今天項目中需要使用tinymce編輯器，結果安裝這個編輯器依賴后，在使用中遇到各種問題，不能正常使用，分享一下遇到的問題和解決方式。
ps：我使用的是tinymce@5.2.2版本。
1. 首先安裝編輯器tinymce依賴
1 npm install --save tinymce@5.2.2
2. 從node_modules/tinymce目錄中將skins和plugins文件復制出來，我是在static目錄創建了一個tinymce文件夾，然后將復制出來的文件放在tinymce里。
3. 在組件中使用tinymce
1 <template> 2 <div class="forum-page" style="padding:30px;"> 3 <div :id="myFormDesignId"></div> 4 </div> 5 </template> 6 <script> 7 import _ from "lodash"; 8 import tinymce from "tinymce/tinymce"; 9 import "tinymce/themes/silver"; 10 import Editor from "@tinymce/tinymce-vue"; 11 export default { 12 name: "forum", 13 components: { Editor }, 14 data() { 15 return { 16 myFormDesignId: _.uniqueId("myFormDesignId"), 17 18 myFormDesignWrapperId:_.uniqueId("myFormDesignWrapperId"), 19 20 tinymceContent: `<!DOCTYPE html> 21 <html> 22 <head> 23 </head> 24 <body> 25 <p>123</p> 26 </body> 27 </html>`, 28 }; 29 }, 30 mounted() { 31 tinymce.init({ 32 selector: `#${this.myFormDesignId}`, 33 language: "zh_CN", 34 height: 500, 35 theme: "silver", 36 browser_spellcheck: true, // 拼寫檢查 37 branding: true, // 去水印 38 // elementpath: false, //禁用編輯器底部的狀態欄 39 statusbar: false, // 隱藏編輯器底部的狀態欄 40 paste_data_images: true, // 允許粘貼圖像 41 menubar: true, // 隱藏最上方menu 42 fontsize_formats: 43 "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px", 44 plugins:"print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code", 45 toolbar: "formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat| code", 46 47 // skin: "lightgray", 48 paste_webkit_styles: true, 49 content_css: [ 50 // '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 51 // '//www.tinymce.com/css/codepen.min.css' 52 ], 53 contextmenu: `inserttable | cell row column deletetable`, 54 relative_urls: false, 55 remove_script_host: false, 56 // 上傳圖片事件 57 images_upload_handler: (blobInfo, success, failure) => { 58 let fd = new FormData(); 59 fd.append("file", blobInfo.blob()); 60 console.log(fd, "圖片"); 61 62 }, 63 init_instance_callback: editor => { 64 this.formEditor = editor; 65 // 渲染初始值 66 if (this.tinymceContent) { 67 editor.setContent(this.tinymceContent, { format: "raw" }); 68 } 69 // 監聽變化 70 editor.on("change", () => { 71 console.log(this.tinymceContent); 72 }); 73 } 74 }); 75 }, 76 beforeDestroy() { 77 this.formEditor && this.formEditor.destroy(); 78 } 79 };
遇到的問題1：
theme.js報錯：Uncaught SyntaxError: Unexpected token <
解決方法：
1 window.tinymce.baseURL = '/static/tinymce' // 步驟二中我在static/tinymce里放置了復制過來的文件
效果圖：
遇到的問題2：
當前組件被keep-alive緩存了的話，組件被切換出去又被切換回來，導致這個編輯器不能正常使用，頁面內容被清空，而且編輯器類似於禁止填寫，不能輸入。
解決方法：核心就是每次切回來都讓這個編輯器重新渲染，activated(){// 重新渲染這個編輯器}
我使用了@tinymce/tinymce-vue這個依賴
1 <template> 2 <div class="forum-page" style="padding:30px;"> 3 <!-- key就是防止組件緩存導致編輯器不能正常使用，每次切換來都更改key,使其重新渲染 --> 4 <editor id="tinymceEditor" :init="tinymceInit" :key="tinymceFlag" v-model="tinymceContent"></editor> 5 </div> 6 </template> 7 <script> 8 import _ from "lodash"; 9 import tinymce from "tinymce/tinymce"; 10 import "tinymce/themes/silver"; 11 import Editor from "@tinymce/tinymce-vue"; 12 export default { 13 name: "forum", 14 components: { Editor }, 15 data() { 16 return { 17 tinymceContent: `<!DOCTYPE html> 18 <html> 19 <head> 20 </head> 21 <body> 22 <p>123</p> 23 </body> 24 </html>`, 25 tinymceFlag: 1, 26 tinymceInit: {} 27 }; 28 }, 29 mounted() { 30 this.tinymceInit = { 31 language: "zh_CN", 32 height: 500, 33 theme: "silver", 34 browser_spellcheck: true, // 拼寫檢查 35 branding: true, // 去水印 36 // elementpath: false, //禁用編輯器底部的狀態欄 37 statusbar: false, // 隱藏編輯器底部的狀態欄 38 paste_data_images: true, // 允許粘貼圖像 39 menubar: true, // 隱藏最上方menu 40 fontsize_formats: 41 "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px", 42 plugins: 43 "print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code", 44 toolbar: 45 "formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat| code", 46 47 // skin: "lightgray", 48 paste_webkit_styles: true, 49 content_css: [ 50 // '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 51 // '//www.tinymce.com/css/codepen.min.css' 52 ], 53 contextmenu: `inserttable | cell row column deletetable`, 54 relative_urls: false, 55 remove_script_host: false, 56 images_upload_handler: (blobInfo, success, failure) => { 57 let fd = new FormData(); 58 fd.append("file", blobInfo.blob()); 59 console.log(fd, "圖片"); 60 }, 61 init_instance_callback: editor => { 62 this.formEditor = editor; 63 if (this.tinymceContent) { 64 editor.setContent(this.tinymceContent, { format: "raw" }); 65 } 66 // editor.on("change", () => { 67 // console.log(this.tinymceContent); 68 // }); 69 } 70 };this.tinymceFlag++; 71 }, 72 beforeDestroy() { 73 this.formEditor && this.formEditor.destroy(); 74 }, 75 activated() { 76 this.tinymceFlag++; 77 } 78 }; 79 </script>