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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!