tinymce富文本编辑器小节

此文章是基于tinymce 5.0以上的版本，对4.X版本的帮助不会很大，推荐使用5.X以上的版本。

在使用tinymce富文本编辑器之前我也用过UEditor和kindeditor，就本人的使用感受而言，UEditor功能确实是很强大，但总感觉使用起来有点僵硬，让我放弃使用的原因有两点，第一，无法上传图片或者文件到云服务器上，这部分功能是需要使用者去完善的，本人能力有限，试着去修改，但是没能成功。第二，也是让我放弃使用UEditor的最主要原因，在编辑文本的时候，生成的css属性非常冗余和低效，查看源码就可以看到，明明只是很简单的一篇文章，源码里面全是重复的样式处理，导致源码非常多并且无用，在展示富文本的时候由于源码很多，造成浏览器渲染很慢。不再使用kindeditor的原因是，功能略简单，无法满足我的需要，我对比了一下kindeditor生成的源码和tinymce生成的源码，还是tinymce更加简洁。

h5页面引用的文件如下：

<script src="/tinymce/js/tinymce/tinymce.js" charset="UTF-8"></script>
<script src="/tinymce/js/tinymce/init.js" charset="UTF-8"></script><!-- 实例化编辑器 -->

init.js
//实例化编辑器
tinymce.init({
    selector: "#tinymceeditor",
    height: 800,
    language:'zh_CN',
    font_formats : "宋体=SimSun;新宋体=NSimSun;仿宋_GB2312=FangSong_GB2312;楷体_GB2312=KaiTi_GB2312;黑体=SimHei;微软雅黑=Microsoft YaHei;Arial=Arial;Arial Black=Arial Black;Times New Roman=Times New Roman;Courier New=Courier New;Tahoma=Tahoma;Verdana=Verdana;",
    fontsize_formats : "8px 9px 10px 12px 13px 14px 15px 16px 18px 24px 36px",
    plugins: [
        'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template powerpaste textcolor textpattern imagetools codesample toc',
        'help lineheight margintop marginbottom letterspacing imguploadtoqiniu formatpainter'
      ],
     toolbar1: 'code hr | undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image imguploadtoqiniu media',
     toolbar2: 'preview | forecolor backcolor | fontselect fontsizeselect | lineheightselect margintopselect marginbottomselect letterspacingselect | formatpainter removeformat',
     image_advtab: true,//此选项将“高级”选项卡添加到图像对话框，允许您向图像添加自定义样式，间距和边框
	 powerpaste_word_import: "merge",
	 powerpaste_html_import: "merge",//https://www.tiny.cloud/docs/plugins/powerpaste/在谷歌浏览器里面打开并翻译
     templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
      ],
    menubar: false,//禁用菜单栏
    allow_script_urls:true//允许链接和图像url使用js，开启此选项则允许href="javascript:alert('hello');"这类代码不会被编辑器过滤掉。出于安全考虑，该选项默认关闭，因为从别处复制来的内容中可能会携带js代码
});

<textarea id="tinymceeditor">${content }</textarea>

var content = tinyMCE.activeEditor.getContent();//获取编辑器内容
var content0 = tinyMCE.activeEditor[0].getContent();//多个编辑器时获取内容，没试过

height设置富文本编辑器高度，建议设置，编辑器高度也可以手动拖动

font_formats：字体重写，可根据个人需要不设置

fontsize_formats：字体大小重写，可根据个人需要不设置

如果想要上传图片到本地，需要添加一个images_upload_url : "xxxxxxx",的设置，这样才会出现上传选项框。

其他相关配置可自行百度。

引用文件我已经上传到百度云盘

链接: https://pan.baidu.com/s/1EUqekQ7Tot5P75eXYF4rOA 提取码: i5fw

如果要是用上传图片到七牛功能，需要修改tinymce/js/tinymce/plugins/imguploadtoqiniu/upfiles.html这个文件的配置。

另外，我简单修改了下配置文件，富文本编辑器通过源码修改a标签属性添加onclick不会被格式化。

更多tinymce功能介绍详见http://tinymce.ax-z.cn/

半世晨晓17

发布了27 篇原创文章 · 获赞 1 · 访问量 1万+

私信关注

tinymce富文本编辑器小节

猜你喜欢