前端文本编译器使用总结：
UEditor :百度前端开源项目功能强大，基于jQuery，但已经不再维护，后端代码有限，因此难以修复
bootstrap-wysiwyg :小巧、易用、小巧美观，只是Bootstrap jQuery .
kindEditor :强大、代码简洁，需要设置后台，久违地更新了
王编辑器：重量轻、简洁、易用，但升级到3.x后，不方便定制开发。 但是作者很勤奋，广义上是我和家人，打call
quill :本身的功能很少，但可以自己扩展。 api也很容易理解。 如果你能理解英语.
summernote :我没有深入研究。 UI是一个非常漂亮、小巧漂亮的编辑器，但需要很大的
现在，让我们集中讨论这个名为tinymce的插件
有三个好处：
1. GitHub有很多星星，功能也很丰富
唯一一个即使从word中粘贴也可以保留大多数格式的编辑器
3 .后端人员无需扫码换接口，前后端分离
上代码(在vue中使用) ) ) ) ) )。
1 .部署
NPM install @ tinymce/tinymce-vue-s
在node_modules中找到tinymce/skins目录，然后将skins目录复制到静态目录中
对于使用vue-cli 3.x构建的typescript项目，请将其放在公共目录下，这样处理语句中的所有静态目录关联
4 .然后把这个语言包放在静态目录下，为了结构清晰，把tinymce目录包在一楼
5 .导入
importtinymcefrom ' tinymce/tinymce '
import ' tinymce/themes/modern/theme '
importeditorfrom ' @ tinymce/tinymce-vue '
tinymce-vue是一个组件，必须在组件中注册并直接使用
这里的init是tinymce初始化设置，下面将介绍几个重要的api。 完整的api为https://www.tiny.cloud/docs/configure /
由于编辑器需要skin才能正常工作，因此将skin_url设置为指向以前复制的skin文件
数据()。
返回{
tinymceHtml: '请输入内容'，
init: {
language _ URL : '/static/tinymce/zh _ cn.js '，
语言： ' zh _ cn '，
skin _ URL : '/static/tinymce/skins/light gray '，
高清： 300，
plugins : ' linklistsimagecodetablecolorpickertextcolorwordcountcontextmenu '，
toolbar : ' bolditalicunderlinestrikethrough fontsize select forecolor back color alignleftaligncenteralignrightalignjustior outdentindentblockquote (卸载重做)，
branding :假
}
}
(，
6 .同时mounted也需要初始化一次：
mounted () }
tinymce.init(}//请特别注意此空对象的存在。 如果此初始化空对象不存在，将出现错误
}
完整的代码如下。
tinymceimporttinymcefrom ' tinymce/tinymce '
import ' tinymce/themes/modern/theme '
importeditorfrom ' @ tinymce/tinymce-vue '
import 'tinymce/plugins/image '
import 'tinymce/plugins/link '
import 'tinymce/plugins/code '
import 'tinymce/plugins/table '
import 'tinymce/plugins/lists '
import ' tinymce/plugins/context menu '
import ' tinymce/plugins/word count '
import ' tinymce/plugins/color picker '
import ' tinymce/plugins/text color '
导出默认值{
name: 'tinymce '，
数据()。
返回{
tinymceHtml: '请输入内容'，
init: {
language _ URL : '/static/tinymce/zh _ cn.js '，
语言： ' zh _ cn '，
skin _ URL : '/static/tinymce/skins/light gray '，
高清： 300，
plugins : ' linklistsimagecodetablecolorpickertextcolorwordcountcontextmenu '，
toolbar : ' bolditalicunderlinestrikethrough fontsize select forecolor back color alignleftaligncenteralignrightalignjustior outdentindentblockquote (卸载重做)，
branding :假
}
}
(，
mounted () }
tinymce.init(}
(，
组件： { editor }
}
的带plugins是可扩展性操作，如果不需要，也可以不引入。
效果如下图所示。
总结
以上，希望编辑介绍的vue2.0能够实现富文本编辑器功能，对大家有所帮助。 如果大家有什么疑问的话请给我留言。 编辑马上回复大家。 在此也感谢您对脚本房屋网站的支持！