Simditor的使用

序

其实，simditor真的是很好用的，只需要简单的配置就可以用的，只是初步接触到它的时候，不知道原理，然后内心又存在着对未知事物的“恐惧”，所以在使用的过程中还是纠结了一段时间的。

编辑文章

simditor的官方网址为http://simditor.tower.im/
上面有它的一些使用帮助。但是，我在使用的过程中，发现很多问题写的不是很清晰，需要自己去摸索和实验。

下载simditor 并使用

首先需要下载simditor的相关js与css文件，放到自己的项目下面。需要引入的css以及js文件先进行引入。
然后进行到很重要的一步，配置自己的js文件，达到真正引入simditor的目的。

(function() {  $(function() {    var editor,toolbar;    Simditor.locale = 'zh-CN';    toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];    editor = new Simditor({      textarea: $('#simditor'),      placeholder: '这里输入文字...',      toolbar: toolbar,      pasteImage: true,      defaultImage: '/simditor/images/image.png',      upload: false    });  });}).call(this);

• 其中有一段是很重要的：

 textarea: $('#simditor')

在你自己的html页面中，必须要有一个textarea，它的id为”simditor”,当然你可以给它任何名字，只要不与其他元素有相同的id名。

• 配置说明：

Simditor.locale = 'zh-CN';

这个是将simditor的提示变成中文的，虽然simditor页面简洁美观，很多选项我们一看图标就知道是什么，但是呢，还是给一个中文的标注比较好。
当然也可以设置成英文的。随你喜欢啦！

• 建议：

  将这段代码单独的放在一个js文件里面，以后的页面中，需要用到富文本编辑器，只需要把它包含进来就可以了。很方便的。

上传图片

上传图片我搜索了一下，本来想着有比较靠谱的答案，但是搜索出来的那些答案很杂，而且说法也不一，所以，最后还是安安心心的看文档了，然后就是各种实验。

    editor = new Simditor({      textarea: $('#simditor'),      placeholder: '这里输入文字...',      toolbar: toolbar,      pasteImage: true,      defaultImage: '/simditor/images/image.png',      upload: {        url: '上传地址',        params: null,        fileKey: "fileName",        connectionCount: 1,        leaveConfirm: "正在上传,确定要取消上传文件吗?"      }    });

如果需要使用上传功能，需要将upload改成true，也就是允许上传图片。

上传图片的原理

• 1 upload选项中的url是你需要上传的地址
• 2 上传的名字就是filekey，在后台接收图片的时候，需要用到它。
• 3 传回来的时候，是一个json格式字符串

{    success: true/false,    file_path:XXXX}

• 4 success一定要写，simditor会通过这个来判断上传是否成功。
• 5 file_path 必须要写。当回传file_path成功的时候，simditor会重新发起一个GET请求，去请求file_path对应的地址，将图片取回，并放倒内容框中进行显示。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
更新：
今天突然发现文章被回复了，而且对图片上传的这一块有疑问。
所以，我就再进行了一次测试。
测试的结果如下：

在上传图片的时候，设置好上传的路径.
选择要上传的图片，就会通过这个路径将图片信息POST到这个链接地址上去。
当上传成功的时候，也就是返回的信息为：

{    file_path:XXX    success: true}

这个时候，Simditor会自己发起一个GET请求，将file_path中的图片文件显示在文本框中。