Simditor的快速使用

前言：像编辑器之类的插件，一般使用都无非三个步骤，引入资源，开辟容器，JS初始化。

环境：Windows环境，Java开发，页面与接口在同一个项目中，未进行前后端隔离，服务器Tomcat
官网地址：Simditor文档

第一步

去官网下载地址，导入到相应目录下，若是node开发，则只需要

$ npm install simditor$ bower install simditor

此处笔者用的是java项目开发，自然是放在了webapp目录下

按照官网指示，如下导入相应资源

<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" /><script type="text/javascript" src="[script path]/jquery.min.js"></script><script type="text/javascript" src="[script path]/module.js"></script><script type="text/javascript" src="[script path]/hotkeys.js"></script><script type="text/javascript" src="[script path]/uploader.js"></script><script type="text/javascript" src="[script path]/simditor.js"></script>

script path为你simditor下载所存放的路径。
2.3.6版本有单独的simditor-2.3.6.zip可以下载。
此处要注意的是如果你是下载的源码，只要在simditor-2.3.8\site\assets中引入下面三个目录的内容即可：

如果想要按需加载，则只需要按照你引入的script链接来加载资源。

第二步

开启一个容器，创建一个textare元素，如下：

<textarea id="editor" placeholder="Balabala" autofocus></textarea>

若想制定宽高，也可以如笔者这样（用的是ACE）：

<div class="row cl">    <label class="form-label col-xs-4 col-sm-2">文章内容：&nbsp;    </label>    <div class="formControls col-xs-8 col-sm-9">        <textarea id="editor" type="text/plain" name="content" style="width:100%;height:400px;"autofocus>        </textarea>    </div></div>

注意容器里id的值，要与接下来初始化simditor的JS代码对应起来。

第三步

用JS代码初始化Simditor，官方初始化方式如下：

var editor = new Simditor({  textarea: $('#editor')  //optional options});

笔者此处对option按照自己需求，进行了下完善：

$(function(){        Simditor.locale = 'zh-CN';//设置中文        var editor = new Simditor({            textarea: $('#editor'),  //textarea的id            placeholder: '这里输入文字...',            toolbar:  ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'], //工具条都包含哪些内容            pasteImage: true,//允许粘贴图片            defaultImage: '/res/simditor/images/image.png',//编辑器插入的默认图片            upload : {                url : 'richtext_img_upload.do', //文件上传的接口地址                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交                fileKey: 'upload_file', //服务器端获取文件数据的参数名                connectionCount: 3,                leaveConfirm: '正在上传文件'            }        });

这样启动项目，simditor正常情况下都会正常启动。若有异常，注意下面几点注意事项。

注意事项

1. 若是SSM框架，一定要注意到在你的dispatcher-servlet.xml中，simditor静态资源是否加载！
2. 我们一般直接使用，工具栏的图片一般都会产生偏移，如下：
   
   这是自带的CSS问题，此时需要在simditor.css中修改一处代码，如下：
   
   将对应处注释掉即可。
3. simditor对图片上传接口的格式要求如下:

        //富文本中对于返回值有自己的要求,我们使用是simditor所以按照simditor的要求进行返回//        {//            "success": true/false,//                "msg": "error message", # optional//            "file_path": "[real file path]"//        }

补充

接下来我给出一些常用的Option选项的含义：
textarea 是初始化 Simditor 的必需选项，可以接受 jQuery Object、HTML Element 或者 Selector String。另外，Simditor 还支持这些可选 option：

placeholder（默认值：”）编辑器的 placeholder，如果为空 Simditor 会取 textarea 的 placeholder 属性；

toolbar （默认值：true）是否显示工具栏按钮；

toolbarFloat （默认值：true）是否让工具栏按钮在页面滚动的过程中始终可见；

toolbarHidden （默认值：false）是否隐藏工具栏，隐藏后 toolbarFloat 会失效；

defaultImage（默认值：’images/image.png’）编辑器插入混排图片时使用的默认图片；

tabIndent（默认值：true）是否在编辑器中使用 tab 键来缩进；

params（默认值：{}）键值对，在编辑器中增加 hidden 字段（input:hidden），通常用于生成 form 表单的默认参数；

upload（默认值：false）false 或者键值对，编辑器上传本地图片的配置，常用的属性有 url 和 params；

pasteImage（默认值：false）是否允许粘贴上传图片，依赖 upload 选项，仅支持 Firefox 和 Chrome 浏览器。

更详细的配置说明可以参考 Simditor 的配置文档。

最后，自定义样式和交互

每个项目都有不同的设计风格，大多数时候我们需要修改 Simditor 的样式，让它的样式跟项目的风格相符。

simditor.css 是通过 Sass 自动生成的代码，所以推荐大家修改 simditor.scss，然后再重新生成css代码。

.editor-style 选择符下面的样式，是 Simditor 输出 HTML 的中文排版样式，大家可以根据自己项目的情况进行调整。另外，如果不想使用 font-awesome.css 来实现工具栏按钮的 icon，可以将 font-awesome.css 去掉，然后增加 .toolbar-item-[button name] 选择符来自定义按钮样式。