简单好用的文本编辑器《Simditor》插件快速入门实例

项目需要文本编辑器，我在网上找到了Simditor这个插件，感觉简单好用，在这里记录一下，也推荐给更多的人。

Simditor能做什么

简单来说，Simditor能够将web页面中的textarea文本域变成一个简单的富文本编辑器。能够实现常用的加粗加斜下划线，标题表格字体颜色等功能，并且输出所见即所得的html代码。

Simditor如何使用

可以在Simditor的官网查看demo，文档和github下载地址。

下载最新版本的Simditor文件后解压，并且引入：

//引入css
<link rel="stylesheet" type="text/css" href="js/simditor-2.3.6/styles/simditor.css" /> 
//引入js，若不需要上传则可以不引用uploader.js文件
<script type="text/javascript" src="js/simditor-2.3.6/scripts/jquery.min.js">script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/module.min.js">script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/hotkeys.min.js">script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/uploader.min.js">script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/simditor.min.js">script>

然后初始化即可：

$(document).ready(function(){
    //初始化文本编辑器
    var editor = new Simditor({
        //textarea的id
        textarea: $('#remark'),
        //工具条都包含哪些内容
        toolbar:['title','bold','italic','underline','table','color','ol','ul','image','hr'],
        //若需要上传功能，上传的参数设置。
        upload : {
                url : 'ImgUpload.action', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
         } 
    });
});

需要注意的地方：

我下载之后直接使用时，发现工具条的图片会产生偏移，如下图：

看了下发现是Simditor自带的css有问题。我已经反馈在github上，一开始以为是我下载的版本不对，后来重新下载了最新版本，发现直接引入依然有这个问题。再次提交给作者但是目前还没得到回复。如果有小伙伴遇到这个问题，只要如下图这样处理即可：

在simditor.css中去掉该属性即可正常显示。

其他设置

1.fileKey: ‘upload’ 设置插入图片的按钮点击之后的菜单仅有图片上传

2.locale:’en-US’, Simditor的默认语言为中文。其实是可以支持英文的，修改之后工具条中的文本会变成英文。