### 基本步驟 >[success] 引入 tinymce 安裝包 `yarn add tinymce` >[success] 組件內容 ``` <template> <div class="tiny-container"> <textarea ref="editor"></textarea> </div> </template> <script> import tinymce from "tinymce"; import 'tinymce/icons/default' export default { name: "TinyEditor", props: { // 父組件通過:content.sync同步富文本編輯器內容 content: { type: String, required: true, }, // 觸發content同步更新的tinymce Editor Events，其他https://www.tiny.cloud/docs/advanced/events/ updateEvent: { type: String, default: "beforeaddundo undo redo keyup", }, // tinymce依賴文件的cdn url url: { type: String, default: "https://cdn.jsdelivr.net/npm/tinymce@~5", }, // tinymce的init方法的config參數，本組件有默認設置，比如不要toolbar3，可以使用該組件時寫上 :config="{toolbar2:''}" config: { type: Object, default() { return {}; }, }, }, data() { return { editor: null, defaultConfig: { themes: "modern", allow_script_urls: true, remove_script_host: false, convert_urls: false, relative_urls: false, language_url: `${this.url}/langs/zh_CN.js`, language: "zh_CN", theme_url: `${this.url}/themes/silver/theme.min.js`, skin_url: `${this.url}/skins/ui/oxide`, branding: false, menubar: false, fontsize_formats: "12px 13px 14px 15px 16px 18px 20px 24px", external_plugins: {}, plugins: "code hr link advlist lists paste table image imagetools media preview autoresize", contextmenu: "selectall copy paste inserttable", toolbar1: "link unlink bold italic forecolor backcolor table alignleft aligncenter alignright alignjustify removeformat imageUpload videoUpload", setup: (editor) => { const self = this; // 自定義工具欄按鈕 editor.ui.registry.addButton("imageUpload", { tooltip: "插入圖片", icon: "image", onAction: () => { // 點擊觸發事件 }, }) }, // 建立實例事件監聽,editor為tinytmce實例 autoresize_bottom_margin: 20, autoresize_max_height: 380, autoresize_min_height: 250, autoresize_on_init: true, autoresize_overflow_padding: 10, }, }; }, watch: { config: { handler(val) { // 用外部配置覆蓋內部默認配置 Object.assign(this.defaultConfig, val); // ============================================================================ // 如果語言相關為默認英語，則修改默認配置為中文 const zhCN = "zh_CN"; const enUS = "en_US"; // 如果語言沒有配置，則默認配置為中文 if (!this.defaultConfig.language) { this.defaultConfig.language = zhCN; } // 如果有配置語言，并且不是"en_US"，并且沒有配置language_url，則使用本項目的語言包 if ( Object.prototype.toString.call( this.defaultConfig.language ) === "[object String]" && this.defaultConfig.language !== enUS && Object.prototype.toString.call( this.defaultConfig.language_url ) !== "[object String]" ) { let langCDN = "https://cdn.jsdelivr.net/npm/"; if (/unpkg.com/.test(this.url)) { langCDN = "https://unpkg.com/"; } this.defaultConfig.language_url = `${langCDN}@panhezeng/vue-tinymce@latest/src/langs/${this.defaultConfig.language}.min.js`; } // 如果語言為中文，并且沒有配置字體，則使用內部配置 if ( this.defaultConfig.language === zhCN && Object.prototype.toString.call( this.defaultConfig.font_formats ) !== "[object String]" ) { this.defaultConfig.font_formats = '微軟雅黑="微軟雅黑";幼圓="幼圓";Arial=arial'; } // 如果配置為默認英語，則刪除語言相關配置節點 if (this.defaultConfig.language === enUS) { delete this.defaultConfig.language; delete this.defaultConfig.language_url; } this.init(); }, immediate: true, deep: true, }, content: { handler: "setContent", immediate: true, }, }, beforeDestroy() { this.destroy(); }, created() { // 從指定url加載tinymce依賴文件 tinymce.EditorManager.baseURL = this.url; }, mounted() { this.$nextTick(function () { if (!this.editor) { this.init(); } }); }, methods: { // 插入圖片至編輯器 insertImage(res, file) { const src = ""; // 圖片存儲地址 tinymce.execCommand("mceInsertContent", false, `<img src=${src}>`); }, init() { // 編輯器實例初始化 const refEditor = this.$refs.editor; if (refEditor) { this.destroy(); this.defaultConfig.target = refEditor; this.defaultConfig.init_instance_callback = (editor) => { if (this && this.$refs.editor) { if ( /^\[object [^F]*Function\]$/.test( Object.prototype.toString.call( this.config.init_instance_callback ) ) ) { this.config.init_instance_callback(editor); } this.editor = editor; this.setContent(); editor.on( this.updateEvent, tinymce.util.Delay.debounce(() => { this.contentChange(); }, 300) ); } }; tinymce.init(this.defaultConfig); } }, destroy() { try { // 銷毀 if (this && this.$refs.editor && this.editor) { tinymce.remove(this.editor); this.editor.remove(); this.editor.destroy(); this.editor = null; } } catch (e) {} }, setContent() { this.$nextTick(function () { // 如果編輯器實例已經為真，并且編輯器內容和父組件傳入的內容不一樣 if ( this && this.$refs.editor && this.editor && this.editor.getContent() !== this.content ) { this.editor.setContent(this.content); } }); }, contentChange() { this.$nextTick(function () { // 同步到父組件 if (this && this.$refs.editor && this.editor) { const content = this.editor.getContent(); this.$emit("update:content", content); this.$emit("content-change", content); } }); }, }, }; </script> <style scoped lang="scss"> .tiny-container { border: 1px solid #c0ccda; border-radius: 6px; } </style> ```