Simditor富文本编辑器的简单使用

木来

在这里讲一下Simditor富文本编辑器,我之前使用的百度Ueditor,但是百度Ueditor的UI样式确实不太好看,所以我就入手了这款编辑器,用了那么长时间,发现还是很好用的,所以,就在这里推荐一下。

首先呢,需要去Simditor下载支持包。

然后,我们在所需要引用Simditor的页面引用以下css与js文件。

<!--引入simditor2.3.13富文本编辑器-->
<link href="<%=basePath%>asset/public/js/simditor/styles/simditor.css" rel="stylesheet">
<script src="<%=basePath%>asset/public/js/jquery-3.1.0.min.js"></script>


<script type="text/javascript" src="<%=basePath%>asset/public/js/simditor/styles/module.js"></script>
<script type="text/javascript" src="<%=basePath%>asset/public/js/simditor/styles/hotkeys.js"></script>
<script type="text/javascript" src="<%=basePath%>asset/public/js/simditor/styles/uploader.js"></script>
<script type="text/javascript" src="<%=basePath%>asset/public/js/simditor/lib/simditor.js"></script>

因为Simditor是基于jQuery实现的,所以,我们还需要引用jQuery,我上面的jQuery版本是3.1.0

然后,我们需要在展示富文本编辑器的地方,

   <!--写文章的模块,即富文本编辑器-->
        <div>
<textarea id="editor1" name="article_content"  autofocus >
</textarea>
<script>
$(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: $('#editor1'),
      toolbar: toolbar,
      pasteImage: true,//是否允许粘帖上传图片
      defaultImage: '<%=basePath%>asset/public/js/simditor/images/image.png',
      upload : {
            url : '<%=basePath%>article/qiniuUploadImg.action?Math.random()', //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'ImageFile', //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
        } 
    });
  });
</script>
        </div>

<!--写文章的模块,即富文本编辑器end-->

这样的话,再次刷新运行页面,就会出现以下页面:

图片.png

哈哈,太懒了,直接截图现在正在写的富文本编辑器好了。

如果编辑器的图标样式有一些错乱,请不要担心,把你的html页面的表头修改为:

<!DOCTYPE html>

就好啦!

意见反馈