tinymce富文本编辑器的使用

由于业务需要,做一个运用在移动端的富文本编辑器,找了多个富文本组件,最后选择了tinymce
官网
中文文档,网友翻译

此篇文章的代码用的html文件编写,如果有vue或其他框架需要可以自行百度

  1. 创建一个标签用于挂载富文本

  2. script中创建富文本

此时页面就会出现一个富文本


相关属性设置:


需要取消上下相关栏目(menubar、statusbar),只需要在init里面设置

还有一些其他的属性如下图:
mobile:设置mobile端的相关属性
icons_url:自定义icons的js路径
icons:自定义icons的名称
language:设置语言翻译,zh_CN可以在官网或者中文网汉化下载
content_style:设置相关富文本的css
plugins:引用官网的话:plugins配置参数用于指定哪些插件被用在当前编辑器实例中。TinyMCE自带丰富的插件,您也可以编写自己的插件,用此选项引入。比如这里的hr(官方)defendImage(自定义)
toolbar:重定义工具栏,这里设置默认的工具栏会被覆盖
toolbar_mode: 设置工具栏的布局,默认wrap, mode相关文档
toolbar_location: 工具栏的位置,有bottom、top、auto三个属性,默认auto

toolbar_groups:把菜单折叠起来,如下图效果,其中折叠实现需要结合toolbar_mode: 'floating'来使用,移动端的话还需要mobile: { toolbar_mode: 'floating' }方能生效


自定义菜单组件:

defendAt:自定义组件的名字(此处只是我自定义的名字)
icon:此处放svg图标,可以用官方的,也可以自定义,自定义的如下图,注册完成之后,在页面直接引用相关js
tooltip:pc端鼠标聚焦tooltip说明
onAction:这个因业务未涉及暂无研究,可以直接在官网搜索
箭头函数里面的就是相关点击触发之后的处理,即此处的tinyMCE.editors['mytextarea'].insertContent('@')

原文地址:https://www.cnblogs.com/AdolphWilliam/p/15701918.html