vue项目如何使用tinymce5
Posted grow-up-up
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue项目如何使用tinymce5相关的知识，希望对你有一定的参考价值。
今天项目中需要使用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 }; 71 }, 72 beforeDestroy() { 73 this.formEditor && this.formEditor.destroy(); 74 }, 75 activated() { 76 this.tinymceFlag++; 77 } 78 }; 79 </script>
以上是关于vue项目如何使用tinymce5的主要内容，如果未能解决你的问题，请参考以下文章