带预览模式的Bootstrap所见即所得文本编辑器_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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