Vue+Webpack完美整合富文本编辑器TinyMce的方法
选择一个合适的富文本编辑器对于一个前端项目至关重要,这次我基于Vue来开发我项目中的前端部分,经过权衡选择了tinymce。其在UI,功能都很适合,tinymce官方文档:点击打开链接;
引入tinymce 我选用的版本4.7.4
npm install tinymce -S
将tinymce创建为Vue的组件,便于日后复用,创建组件editor.vue
<template> <textarea :id="id" :value="value"></textarea> </template> <script> // Import TinyMCE import tinymce from 'tinymce/tinymce'; import 'tinymce/themes/modern/theme'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/link'; const INIT = 0; const CHANGED = 2; var EDITOR = null; export default { props: { value: { type: String, required: true }, setting: {} }, watch: { value: function (val) { console.log('init ' + val) if (this.status == INIT || tinymce.activeEditor.getContent() != val){ tinymce.activeEditor.setContent(val); } this.status = CHANGED } }, data: function () { return { status: INIT, id: 'editor-'+new Date().getMilliseconds(), } }, methods: { }, mounted: function () { const _this = this; const setting = { selector:'#'+_this.id, language:"zh_CN", init_instance_callback:function(editor) { EDITOR = editor; console.log("Editor: " + editor.id + " is now initialized."); editor.on('input change undo redo', () => { var content = editor.getContent() _this.$emit('input', content); }); }, plugins:[] }; Object.assign(setting,_this.setting) tinymce.init(setting); }, beforeDestroy: function () { tinymce.get(this.id).destroy(); } } </script>
在钩子mounted 进行了tinymce的初始化工作,调用 tinymce.init(setting),setting为配置信息这样我们便初步配置完成了editor组件
在其他页面使用组件
<template> <div class="app-container"> <div> <!-- 组件有两个属性 value 传入内容双向绑定 setting传入配置信息 --> <editor class="editor" :value="content" :setting="editorSetting" @input="(content)=> content = content"></editor> </div> </div> </template> <script> import editor from '@/components/editor' export default { name: "editor-demo", data: function () { return { content:'我是富文本编辑器的内容', //tinymce的配置信息 参考官方文档 https://www.tinymce.com/docs/configure/integration-and-setup/ editorSetting:{ height:400, } } }, components:{ 'editor':editor } } </script> <style scoped> </style>
此刻我们已经完成了百分之90的配置 ,最后只需将node_modules/_tinymce@4.7.4@tinymce/文件夹下的skins文件夹放置于项目根目录下,这样tinymce才可获取皮肤css文件
下载并解压语言包langs文件夹放置项目根目录,中文下载链接 ,其他语言包选择;
之后在页面轻松使用组件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下2022-09-09vue composition-api 封装组合式函数的操作方法
在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数,这篇文章主要介绍了vue composition-api 封装组合式函数的操作方法,需要的朋友可以参考下2022-10-10vue element插件this.$confirm用法及说明(取消也可以发请求)
这篇文章主要介绍了vue element插件this.$confirm用法及说明(取消也可以发请求),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
最新评论