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

当前位置:主页 > jQuery库 > 布局和界面 > 带预览模式的Bootstrap所见即所得文本编辑器
带预览模式的Bootstrap所见即所得文本编辑器
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:03-13
    阅读:
简要教程

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