vue项目中如何配置TinyMCE富文本编辑器

下面直接展示配置过程，插件api和介绍可以查看中文文档或英文官网1.安装npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S注意：不同版本可能存在不匹配的情况在tinymce和@tinymce/tinymce-vue的情况下，经过多次尝试，我选择了@tinymce/tinymce-vue作为一年前发布的版本。具体安装信息为npminstalltinymce@5.8.2-Snpminstall@tinymce/tinymce-vue@3.2。2-S2.插件配置//TinyEditor.vue组件编写脚本>从“tinymce”导入tinymce从“@tinymce/tinymce-vue”导入编辑器导入“tinymce/themes/silver”导入“tinymce/icons/default”导入“tinymce/plugins/table”导入“tinymce/plugins/lists”“导入“tinymce/plugins/link”导入“tinymce/plugins/image”导入“tinymce/plugins/imagetools”导入“tinymce/plugins/media”导入“tinymce/plugins/code”导入“tinymce/plugins/codesample”导入“tinymce/plugins/anchor”导入“tinymce/plugins/emoticons/js/emojis.min”导入“tinymce/plugins/emoticons”导入“tinymce/plugins/wordcount"import"tinymce/plugins/preview"import"tinymce/plugins/fullpage"import"tinymce/plugins/fullscreen"exportdefault{props:{value:{type:String,default:""},文本:{type:String,default:""},disabled:{type:Boolean,default:false},plugins:{type:[String,Array],default:'tablelistslinkimageimagetoolsmediacodecodesampleanchoremoticons字数预览fullpagefullscreen'},toolbar:{type:[String,Array],default(){return['bolditalicunderlinestrikethroughremoveformat|fontsizeselectfontselect|forecolorbackcolor|alignleftaligncenteralignrightalignjustify|code|bullistnumlist|outdentindentblockquote|撤销重做|链接取消链接|代码示例预览'];}}},data(){return{init:{theme:"silver",//themeskin_url:"/static/tinymce/skins/ui/oxide",//skin,从node_modules复制到/static/tinymcecontent_css:"/static/tinymce/plugins/prism/tomorrow-night.css",//自定义样式，这里使用prism.js实现代码高亮，prism.js官网下载height:"700px",width:'100%',menubar:true,//菜单栏工具栏:this.toolbar,//toolbarelementpath:false,branding:false,//显示技术支持（如Tiny驱动）language_url:"/static/tinymce/zh_CN.js",//语言包，从中文开始文档站点下载language:"zh_CN",//languagecodesample_global_prismjs:true,codesample_languages:[{text:'JavaScript',value:'js'},{text:'HTML',value:'html'},{text:'CSS'，值：'css'}，{文本：'NodeJS'，值：'nodejs'}，{文本：'Java'，值：'java'}，{文本：'Python'，值：'python'},{文本:'PowerShell',值:'powershell'},{文本:'nginx',值:'nginx'},{text:'Markdown',value:'md'},{text:'JSON5',value:'json5'},{text:'Logfile',value:'log'}],plugins:this.plugins,//插件zIndex:1101,},myValue:this.value};},mounted(){tinymce.init({});},方法:{getText(){constactiveEditor=tinymce.activeEditor;consteditBody=activeEditor.getBody();activeEditor.selection.select(editBody);returnactiveEditor.selection.getContent({'format':'text'}).replace(/\r?\n/g,'');}},components:{Editor},watch:{value(newValue){this.myValue=newValue;},myValue(newValue){this.$emit("input",newValue);}}};三、TinyEditor组件使用//在test.vue页面中使用完成以上配置后，编辑器就可以正常使用了