优质VPS推荐
VPS优惠 评测

好用的富文本编辑器TinyMCE

TinyMCE是一个轻量、简洁、功能强大的编辑器。
公司之前使用过kindEditor和wangEditor。
kindEditor:功能强大,代码简洁,有常用的从txt和word复制、多图上传等功能,但是没有格式刷,运营的妹子经常反馈生成多余的空行,并且插入h5的video标签默认也会被过滤掉,项目到2016年便不再维护了。
wangEditor:轻量、简洁、易用,但是功能有限,没有多图上传、格式刷等功能。
鉴于此,便换上了TinyMCE,原因有三:

  • GitHub 上星星很多,一直在维护
  • 从word粘贴和微信公众上复制过来的文章基本能保持原格式
  • 插件丰富,官网提供了很多实用的插件,如多图上传,首行缩进,字数限制等,还可以自定义插件,方便拓展

第1步:引入TinyMCE脚本
首先在官网下载自己需要的版本后,在<head>中插入如下这行代码,将tinymce.min.js源文件引入项目。

<script src="你的网站路径/tinymce/tinymce.min.js"></script>

第2步:将TinyMCE初始化为页面的一部分
我们需要使用tinymce.init()来进行初始化。tinymce.init()内的初始化对象包含众多参数,但都是可省略的,唯一必须的参数就是selector(允许通过css选择器指定TinyMCE要绑定的内容容器,传统模式需指定textarea,内联或沉浸模式可指定div或其它块元素,推荐div)
在下面这个例子中,我们创建一个TinyMCE实例初始化,来取代<textarea id=’mytextarea’>

第3步:通过正常表单POST保存内容
当form提交时,TinyMCE会将内容塞进textarea,你可以通过正常的post方法获取到编辑器中的内容,行为与普通textarea完全一致。
注意:使用第三方UI框架或采用ajax提交可能不会主动触发内容同步,需要自己执行同步或自己获取内容

最近遇到这个问题非常头疼,通过ajax提交数据的时候,居然没有数据写入,找了好久,发现是没有同步内容

    // 手动触发 TinyMCE 内容同步
    tinymce.triggerSave();

关于汉化:
1.在语言包(俗称汉化包)下载页,选择可用的语言包下载到本地。
2.将语言包解压,将js文件放入tinymce根目录下的langs文件夹中(如不存在就自己新建一个),最后路径形如:XXX/tinymce/langs/zh_CN.js
3.在TinyMCE实例配置参数中指定语言。

tinymce.init({selector: '#mytextarea',language:'zh_CN',//注意大小写
});
赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《好用的富文本编辑器TinyMCE》
文章链接:https://www.tianyanjie.com/1838.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

评论前必须登录!

 

登录

找回密码

注册