富文本编辑器小技巧大杂烩之TinyMce

TinyMce富文本编辑器问题点总结

由于是第一次接触富文本编辑器，走过不少歪路，在这里另起一篇特别记录：

问题一、如何获取编辑器内容和回显编辑器

获取编辑器的内容：

 var content = tinymce.get('myTextarea').getContent();

解析： myTextarea是编辑器的id
将数据回显到编辑器：

 $("#myTextarea").val('content')

解析： #myTextarea 是你创建的容器的id属性值
如果回显到其他普通的标签，也是一样的做法，直接赋值就好，因为从编辑器获取的本来就是完整的html。

问题二、如何给编辑器外框加上红色边框

使用场景： 当我们需要给编辑器加上校验时，校验不通过的话，需要显示红色外框，以提示用户重新输入。
从前端出发，解释如何添加。（这里提一嘴，我们目前使用的是tinyMce的经典模式，编辑器其实是在创建的容器下方插入一个div，里面包括一个全新的页面）。
从页面我们可以知道想要在外边框加上红色边框，就需要找到tinyForm的第二个子元素，js如下：

$("#tinyForm").children(":eq(1)").css('border','1px solid red');

前端渲染图：

效果图： 编辑器外边框加上了红色边框，也就起到警醒用户的作用，当然，加其他样式就随你了。

问题三：如何和谐去掉编辑器下方的广告

首先来了解下编辑器下方的状态栏，分别由记录状态、官网地址和可拖曳按钮。

个人想要的效果是，去掉下面的广告和记录每个标签状态，但是要保留可拖曳的按钮。
如果不要拖曳的按钮，简单粗暴的处理方式：设置 statusbar: false，默认是true

   /*tinyMce初始化*/tinymce.init({selector: '#myTextarea',plugins: 'lists,advlist',statusbar: false,//直接设置为false

如果想要留着拖曳的按钮，就得文明一点啦！配置如下：

   /*tinyMce初始化*/tinymce.init({selector: '#myTextarea',plugins: 'lists,advlist',statusbar: true, //保留状态栏branding: false, //去掉广告elementpath: false, //去掉记录标签状态

效果图：可以看到广告和标签记录栏不见了，保留了可拖曳按钮，当然想要去掉那个多余的横线，我还没找到方法，留给你自己研究好了。

问题四、如何销毁和重新初始化编辑器

这个问题困扰了我几天，百度找到各种方式都没效果，自己试出来的方法，我使用的是5.3.1版本的tinymce。
使用场景： 在一个表格中添加富文本编辑器，点击删除时，删除一行，点击添加一行，重新加回来。
按照正常思路（错误的）：点击删除时，把一整行删除就好，点击添加时，重新初始化，但是发现这个被你删除的编辑器，你重新初始化是不会再显示的。
正确思路：
1、点击删除了，先销毁编辑器，再把整行删除。
销毁编辑器：

tinyMCE.get('myTextarea').remove();

解析：myTextarea 就是你要删除的编辑器的id
2、重新使用init初始化编辑器，就可以显示出来了。

问题五、如何去掉编辑器默认生成的p标签和调整默认行高

使用场景：
1、我们需要保存富文本编辑器的内容到数据库，并展示到另外一个页面，这时，因为编辑器默认会生成p标签，无论是否有写内容都会生成一个p标签（块标签），我们把内容展示到另外一个页面时，会出现换行的现象，看起来很不美观。换行的原因的正是因为块标签。直接看图片更加直观。
2、当我们需要在编辑器内写多行时，换行的发现两行的间距实在是太大了。看起来很不美观！效果图如下：

当然，知道了痛点，就得解决。附上配置代码：

   /*tinyMce初始化*/tinymce.init({selector: '#myTextarea',plugins: 'lists,advlist',force_br_newlines : true, //强制回车换行时生成</br>force_p_newlines : false, //强制关闭回车换行时生成p标签forced_root_block : '', //强制初始化时的根标签为“”，默认是p标签。

配置好后，效果图如下：

问题六、如何添加行高插件（默认是没有这个插件的）

实现步骤：
1、下载插件，附上百度网盘地址：行高插件下载提取码：k7vo
2、解压下载的行高插件，并放到tinymce的插件目录下。目录结构如下：

3、在tinymce初始化中配置行高插件，附上代码：

  /*tinyMce初始化*/tinymce.init({selector: '#myTextarea',plugins: 'lists,advlist,lineheight', //指定插件，lineheight，名字与添加的文件名一致toolbar: 'undo redo | bold italic | fontselect fontsizeselect | bullist numlist |lineheight | removeformat', //在工具栏配置行高插件 lineheight lineheight_val : "0.5 1 1.5 1.6 1.75 1.8 2 3 4 5", //自定义行高插件的选项，默认是没有0.5的

效果图如下： 有了行高插件，可以自由调整行之间的间距。

问题七、如何设置编辑器只读和可编辑状态

使用场景： 当我们需要对编辑器进行权限控制时，没有权限的只能view，不能编辑，这时候需要开启编辑器的只读模式。附上代码：

if(没权限时){ //条件自己控制tinymce.editors['编辑器id'].setMode('readonly');//开启只读模式
}
if(有权限时){tinymce.editors['编辑器id'].setMode('design');//开启编辑模式
}

问题八、如何自定义字体颜色选项集合

字体颜色配置代码：

 /*tinyMce初始化*/tinymce.init({selector: '#myTextarea',plugins: 'lists,advlist',toolbar: 'undo redo | bold italic | fontselect fontsizeselect| bullist numlist | forecolor | removeformat', //forecolor 字体颜色color_map: [ //自定义所有默认选项，当然可以通过拾色器自己重新添加'#000aff', 'Blue','#000000', 'Black','#E03E2D', 'Red','#B96AD9', 'Purple','#95A5A6', 'Gray'],color_cols: 7, //设置一行显示几列

默认效果如下：

配置自定义选项后效果如下：

希望可以帮到你！如有侵权，联系删除！

                                             灰色稻草人