富文本编辑一个比一个难用，很大编辑器的问题是图片插入、表格插入、或者自定义html 代码插入会遇到问题，比如大多数编辑器不支持自定义图片上传，不能粘贴内容上传等等，或者只能提供一个图片上传地址，加入像我这样传图接口需要token验证，需要一个自定义headers参数，那还有点叫人难受呢。
折腾来折腾去，Tinymce顺手一点。但很多教程就是Tinymce 4.x版本，这个版本有一重大问题那就是图片插入，居中不管用。总之生成的css样式有很大问题！如果使用4版本那就得自己实现一个插入图片的功能，增加开发成本。
软件还是要用最新版，目前最新版是5.x，接入方式差不多和4.x一样。
首先安装 两个npm依赖：@tinymce/tinymce-angular (3.5.1) 和 tinymce(5.2.2)，安装目前最新版即可！
然后在需要使用编辑器的组件所在module导入编辑器模块，路径为：
import { EditorModule } from '@tinymce/tinymce-angular';然后在HTML模板页面添加编辑器标签！
<editor id="editorID" [init]="editorConfig"></editor>其中init属性就是一般场景中使用的Tinymce配置参数，此处就看官方文档配置参数写法吧。
editorConfig = {
height: 500,
menubar: false,
plugins: ['image paste media'],
toolbar: 'image media'
};在angular.json引入一下tinymce代码路径！
汉化：去官网下载语言包，然后放在截图所示目录下！
然后可以在刚才的init配置参数添加语言路径配置：
language_url: '/tinymce/lang/zh_CN.js',上面的angular.json打包会把tinymce代码导出在tinymce目录下面供web浏览器映射服务器路径访问。
打包以后生成的路径，需要修改路径根据自己需要替换就可！
在angular中，不需要折腾编辑器渲染生命周期，组件复用各种问题。上面的代码不需要在任何生命周期函数做初始化和调整等。至于插件，图片上传，添加自定义按钮等就在init属性里配置，配置方法看官方文档即可。
这里贴一个我常用的配置参数：
这是Vue项目里常用的，把路径改了即可！
{
setup: editor => {
this.editor = editor
},
emoticons_database_url: `${this.baseUrl}/tinymce/emoticons/js/emojis.min.js`,
language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
language: 'zh_CN',
// skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide${this.navTheme === 'dark' ? '-dark' : ''}`,
skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
// content_css: `${this.baseUrl}/tinymce/skins/content/${this.navTheme === 'dark' ? 'dark' : 'default'}/content.css`,
// content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
content_css: `${this.baseUrl}/tinymce/skins/content/default`,
// skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
// content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
height: parseInt(this.heightValue) || 500,
// height: 500,
min_height: parseInt(this.heightValue) || 350,
autoresize_on_init: false,
plugins: this.plugins,
toolbar: this.toolbar,
font_formats: `系统默认字体;华文细黑;微软雅黑;苹方字体;华文楷体;华文宋体;华文仿宋;华文黑体;儷黑;儷宋;標楷體;蘋果儷中黑;蘋果儷細宋;新細明體;細明體;標楷體;黑体;宋体;新宋体;仿宋;楷体;仿宋_GB2312;楷体_GB2312;微軟正黑體;微软雅黑体;隶书;幼圆;华文细黑;华文楷体;华文宋体;华文中宋;华文仿宋;方正舒体;方正姚体;华文彩云;华文琥珀;华文隶书;华文行楷;华文新魏;Arial;Helvetica;Tahoma;Verdana;Lucida Grande;Times New Roman;Georgia;`,
branding: false,
menubar: true,
image_advtab: true,
paste_data_images: true, // 允许粘贴图像
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
console.log('typeof blobInfo', typeof blobInfo)
// 直接转Base64文件图片编码
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
const formData = new FormData()
formData.append('file', blobInfo.blob(), blobInfo.filename())
ApiAttachment.upload(formData)
.then((res) => {
console.log(res)
if (AnnApiUtil.checkOkData(res)) {
this.$message.success('文件上传成功')
success(AttachmentUtil.getResUrlFull(res.data))
} else if (AnnApiUtil.checkMsg(res)) {
this.$message.warn(res.msg)
failure(new Error(res.msg))
} else {
this.$message.error('文件上传错误，未知服务器异常')
failure(new Error('文件上传错误，未知服务器异常'))
}
})
.catch((err) => {
console.log(err)
this.$message.error('文件上传错误，服务器请求失败')
failure(new Error('文件上传错误，服务器请求失败'))
})
},
mobile: {
menubar: true
}
}