html编辑器带预览,带预览模式的Bootstrap所见即所得文本编辑器
bootstrap-markdown-editor是一款带预览模式的Bootstrap所见即所得文本编辑器jQuery插件。该文本编辑器支持图片上传，可以进入全屏模式，非常实用。它的特点还有：
支持预览模式。
支持文件上传(拖拽和点击按钮上传)。
支持快捷键。
同一个页面支持多个编辑器实例。
支持全屏模式。
多种主题。
支持i18n。
安装
可以通过bower来安装该文本编辑器插件。
bower install bootstrap-markdown-editor --save
使用方法
该文本编辑器依赖于Bootstrap 3，jQuery和Ace editor
HTML结构
可以使用一个
初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该文本编辑器插件。
$('#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);