html编辑器带预览,带预览模式的Bootstrap所见即所得文本编辑器

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

支持预览模式。

支持文件上传(拖拽和点击按钮上传)。

支持快捷键。

同一个页面支持多个编辑器实例。

支持全屏模式。

多种主题。

支持i18n。

安装

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

bower install bootstrap-markdown-editor --save

使用方法

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

HTML结构

可以使用一个

容器作为该文本编辑器的容器。

# Test

初始化插件

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

$('#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);