Vue Webpack完美整合富文本编辑器可视化的方法

选择一个合适的富文本编辑器对于一个前端项目至关重要，这次我基于某视频剪辑软件来开发我项目中的前端部分，经过权衡选择了tinymce。其在UI，功能都很适合，tinymce官方文档：点击打开链接；

引入可视化我选用的版本4.7.4

新公共管理安装tinymce -S将可视化创建为某视频剪辑软件的组件，便于日后复用，创建组件编辑。某视频剪辑软件

模板文本区域： id=' id ' :值=' value '/文本区域/模板脚本//Import TinyMCE从' tinymce/tinymce '导入TinyMCE导入“主题/现代/主题”；导入”tinymce/plugins/paste”；导入”tinymce/plugins/link”；const INIT=0；const CHANGED=2；var EDITOR=null导出默认{ prop : { value : { type : String，required: true }，设置： { watch : }函数(val){控制台。log(' INIT ' val)if(this。status==INIT | | tinymce。activeEDitor。GetContent()！=val){ tinymce。activeeditor。set content(val)；} this.status=CHANGED } }，data : function(){ return { status : INIT，id: 'editor-' new Date().得到毫秒()，} }，methods: { }，mount ed : function(){ const _ this=this；常量设置={选择器： ' # ' _ this。id，language:'zh_CN '，init _ instance _ callback :函数(EDITER){ EDITER=EDITER；控制台。日志(' editor : '编辑器。' id '现已初始化。);editor.on('input change undo redo '，()={ var content=editor。getcontent()_ this .$emit('input '，content)；});}，插件：[]}；Object.assign(设置，_ this。设置)tinymce。init(设置)；}，beforeDestroy:函数(){ tinymce.get(this.id).销毁();} }/脚本在钩子安装好的进行了可视化的初始化工作，调用tinymce.init(设置),设置为配置信息这样我们便初步配置完成了编辑组件

在其他页面使用组件

模板div class='app-container' div！-组件有两个属性价值传入内容双向绑定环境传入配置信息-editor类=' editor ' :值=' content ' :设置=' editor设置' @ input='(content)=content=content '/editor/div/div/模板脚本从@/组件/编辑器'中导入编辑器导出默认值{ name: 'editor-demo '，data : function(){ return { content : '我是富文本编辑器的内容，//tinymce的配置信息参考官方文档https://www.tinymce.com/docs/configure/integration-and-setup/编辑器设置： {高度：400 }，}，组件： { ' editor ' : editor } }/脚本样式作用域/style此刻我们已经完成了百分之90的配置，最后只需将node _ modules/[电子邮件保护]@ tinymce/文件夹下的外皮文件夹放置于项目根目录下，这样可视化才可获取皮肤钢性铸铁文件

下载并解压语言包langs文件夹放置项目根目录，中文下载链接，其他语言包选择；

之后在页面轻松使用组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。