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 };this.tinymceFlag++; 71 }, 72 beforeDestroy() { 73 this.formEditor && this.formEditor.destroy(); 74 }, 75 activated() { 76 this.tinymceFlag++; 77 } 78 }; 79 </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库