一.总结
1 .各编辑器之间的竞争
UEditor :百度前端开源项目功能强大，基于jQuery，但已经不再维护，后端代码有限，因此很难修复
bootstrap-wysiwyg :小巧、易用、小巧美观，只是Bootstrap jQuery .
kindEditor :强大、代码简洁，需要设置后台，久违地更新了
王编辑器：重量轻、简洁、易用，但升级到3.x后，不方便定制开发。 但是作者很勤奋，广义上是我和家人，打call
quill :本身的功能很少，但可以自己扩展。 api也很容易理解。 如果你能理解英语.
summernote :我没有深入研究。 UI是一个非常漂亮、小巧漂亮的编辑器，但需要很大的
2 .我最终用了这个
tinymce插件：唯一一个编辑器，即使从GitHub中有很多星星、功能丰富的word中粘贴，也可以保留大多数格式； 无需给后端人员扫码换接口，前后端相距甚远
二、如何使用
1 .部署
cnpm install tinymce -S
2 .部署
)1)可以在node_modules中找到tinymce/skins目录，然后将skins目录放在static目录下/其他assets目录中，请查看您的选择。 不是固定的
)2)已传递语言包(https://www.tiny.cloud/download/language-packages/)的所有地址。 如果还做不到就没救了
)3)然后把这个语言包放在静态目录下，为了结构清晰，我把tinymce目录包了起来
)4)导入
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文件
3 .完整的代码
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 }
}
4 .效果图