bootstrap-markdown-editor是一款带预览模式的Bootstrap所见即所得文本编辑器jQuery插件。该文本编辑器支持图片上传，可以进入全屏模式，非常实用。它的特点还有：

  • 支持预览模式。
  • 支持文件上传（拖拽和点击按钮上传）。
  • 支持快捷键。
  • 同一个页面支持多个编辑器实例。
  • 支持全屏模式。
  • 多种主题。
  • 支持i18n。

安装

可以通过bower来安装该文本编辑器插件。

bower install bootstrap-markdown-editor --save

使用方法

该文本编辑器依赖于Bootstrap 3，jQuery和Ace editor

<link href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="dist/css/bootstrap-markdown-editor.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/ace.js"></script>
<script src="js/marked.min.js"></script>
<script src="dist/js/bootstrap-markdown-editor.js"></script>
HTML结构

可以使用一个<div>容器作为该文本编辑器的容器。

<div id="myEditor"># Test</div>
初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该文本编辑器插件。

$('#myEditor').markdownEditor();

可以通过下面的方法来获取文本内容。

var markdownContent = $('#myEditor').markdownEditor('content');
预览模式

Bootstrap Markdown Editor提供一个回调函数来解析模型并返回HTML代码，要使用预览模式，你需要使用下面的参数。

$('#myEditor').markdownEditor({
  // Activate the preview:
  preview: true,
  // This callback is called when the user click on the preview button:
  onPreview: function (content, callback) {

    // Example of implementation with ajax:
    $.ajax({
      url: 'preview.php',
      type: 'POST',
      dataType: 'html',
      data: {content: content},
    })
    .done(function(result) {
      // Return the html:
      callback(result);
    });

  }
});
图片上传

要实现图片上传，你需要自己实现服务器端代码，并使用下面的参数。

$('#myEditor').markdownEditor({
  imageUpload: true, // Activate the option
  uploadPath: 'upload.php' // Path of the server side script that receive the files
});

在你的服务器端代码可以接收到一个json格式的数组。例如下面的PHP代码：

$uploadedFiles = array();

if (! empty($_FILES)) {
  foreach ($_FILES as $file) {
    if (superAwesomeUploadFunction($file)) {
      $uploadedFiles[] = '/img/' . urlencode($file['name']);
    }
  }
}

echo json_encode($uploadedFiles);
快捷键

下面是一些可用的快捷键。

  • Ctrl-B / ⌘B：Bold
  • Ctrl-I / ⌘I：Italic
  • Ctrl-K / ⌘K：Link

配置参数

下面的参数可以以对象的方式传入初始化方法中。

$('#myEditor').markdownEditor({
  // Options
});

或者你也可以覆盖插件的默认参数：

$.fn.markdownEditor.defaults.width = '250px';
  • width：类型：string，默认值：'100%'。编辑器的宽度。
  • height：类型：string，默认值：'400px'。编辑器的高度。
  • fontSize：类型：string，默认值：'14px'。编辑器的默认值字体大小。
  • theme：类型：string，默认值：'tomorrow'。编辑器的主题，可用的主题可以参考Ace。
  • softTabs：类型：boolean，默认值：true。设置为false可以禁止使用soft tabs。soft tabs是指使用空格来代替tab字符（"\t"）。
  • fullscreen：类型：boolean，默认值：true。全屏模式是否可用。
  • imageUpload：类型：boolean，默认值：true。是否可以上传图片。如果可用，你还需要指定uploadPath参数。
  • uploadPath：类型：uploadPath，默认值''。服务器端接收图片的路径。可以接收到一个json格式的数组。
  • preview：类型：boolean，默认值：false。是否开启预览模式。如果开启，你需要指定onPreview参数。
  • onPreview：类型：function，默认值： 
    function (content, callback) {
  callback(content);
}

    回调函数会在用户点击预览按钮时触发，它有2个参数：

    • content：文本内容。
    • callback：将解析的HTML作为一个参数的函数。
  • label：类型：object，默认值： 
    {
  btnHeader1: 'Header 1',
  btnHeader2: 'Header 2',
  btnHeader3: 'Header 3',
  btnBold: 'Bold',
  btnItalic: 'Italic',
  btnList: 'Unordered list',
  btnOrderedList: 'Ordered list',
  btnLink: 'Link',
  btnImage: 'Insert image',
  btnUpload: 'Uplaod image',
  btnEdit: 'Edit',
  btnPreview: 'Preview',
  btnFullscreen: 'Fullscreen',
  loading: 'Loading'
}

方法

可以通过字符串的形式将方法名称作为参数传入markdownEditor()中来调用相应的方法：

// Returns the content of the editor
var content = $('#myEditor').markdownEditor('content'); 

// Sets the content of the editor  
$('#myEditor').markdownEditor('setContent', content);

bootstrap-markdown-editor文本编辑器插件的github地址为：https://github.com/inacho/bootstrap-markdown-editor