富文本編輯一個比一個難用，很大編輯器的問題是圖片插入、表格插入、或者自定義html 代碼插入會遇到問題，比如大多數(shù)編輯器不支持自定義圖片上傳，不能粘貼內(nèi)容上傳等等，或者只能提供一個圖片上傳地址，加入像我這樣傳圖接口需要token驗證，需要一個自定義headers參數(shù)，那還有點叫人難受呢。
折騰來折騰去，Tinymce順手一點。但很多教程就是Tinymce 4.x版本，這個版本有一重大問題那就是圖片插入，居中不管用。總之生成的css樣式有很大問題！如果使用4版本那就得自己實現(xiàn)一個插入圖片的功能，增加開發(fā)成本。
軟件還是要用最新版，目前最新版是5.x，接入方式差不多和4.x一樣。
首先安裝 兩個npm依賴：@tinymce/tinymce-angular (3.5.1) 和 tinymce(5.2.2)，安裝目前最新版即可！
然后在需要使用編輯器的組件所在module導(dǎo)入編輯器模塊，路徑為：
import { EditorModule } from '@tinymce/tinymce-angular';然后在HTML模板頁面添加編輯器標(biāo)簽！
<editor id="editorID" [init]="editorConfig"></editor>其中init屬性就是一般場景中使用的Tinymce配置參數(shù)，此處就看官方文檔配置參數(shù)寫法吧。
editorConfig = {
height: 500,
menubar: false,
plugins: ['image paste media'],
toolbar: 'image media'
};在angular.json引入一下tinymce代碼路徑！
漢化：去官網(wǎng)下載語言包，然后放在截圖所示目錄下！
然后可以在剛才的init配置參數(shù)添加語言路徑配置：
language_url: '/tinymce/lang/zh_CN.js',上面的angular.json打包會把tinymce代碼導(dǎo)出在tinymce目錄下面供web瀏覽器映射服務(wù)器路徑訪問。
打包以后生成的路徑，需要修改路徑根據(jù)自己需要替換就可！
在angular中，不需要折騰編輯器渲染生命周期，組件復(fù)用各種問題。上面的代碼不需要在任何生命周期函數(shù)做初始化和調(diào)整等。至于插件，圖片上傳，添加自定義按鈕等就在init屬性里配置，配置方法看官方文檔即可。
這里貼一個我常用的配置參數(shù)：
這是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: `系統(tǒng)默認(rèn)字體;華文細(xì)黑;微軟雅黑;蘋方字體;華文楷體;華文宋體;華文仿宋;華文黑體;儷黑;儷宋;標(biāo)楷體;蘋果儷中黑;蘋果儷細(xì)宋;新細(xì)明體;細(xì)明體;標(biāo)楷體;黑體;宋體;新宋體;仿宋;楷體;仿宋_GB2312;楷體_GB2312;微軟正黑體;微軟雅黑體;隸書;幼圓;華文細(xì)黑;華文楷體;華文宋體;華文中宋;華文仿宋;方正舒體;方正姚體;華文彩云;華文琥珀;華文隸書;華文行楷;華文新魏;Arial;Helvetica;Tahoma;Verdana;Lucida Grande;Times New Roman;Georgia;`,
branding: false,
menubar: true,
image_advtab: true,
paste_data_images: true, // 允許粘貼圖像
// 此處為圖片上傳處理函數(shù)，這個直接用了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)
// 直接轉(zhuǎn)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('文件上傳錯誤，未知服務(wù)器異常')
failure(new Error('文件上傳錯誤，未知服務(wù)器異常'))
}
})
.catch((err) => {
console.log(err)
this.$message.error('文件上傳錯誤，服務(wù)器請求失敗')
failure(new Error('文件上傳錯誤，服務(wù)器請求失敗'))
})
},
mobile: {
menubar: true
}
}