vue项目实现富文本编辑器(实践用过)

实现网址: https://codepen.io/packy1980/pen/BayPrVO

官网文档: http://lpreterite.github.io/vue-tinymce/#/

1.下载安装

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

2.下载 之后 在 index.html 中引入

先将node_modules下的 tinymce 文件复制到static 下

<script src="./static/tinymce/tinymce.min.js"></script>

下拉框层级可能不够 看不到下拉框显示

就在上面那行代码下引入一下代码   

覆盖原有样式

<style>
      .tox-tinymce-aux {
        // 未显示的下拉框class 
        z-index: 3000 !important
      }
</style>

3.main.js 中引入

import VueTinymce from '@packy-tang/vue-tinymce' // 富文本编辑器
import 'tinymce/plugins/table' // 表格插件
import 'tinymce/icons/default/icons'

import tinymce from 'tinymce'

Vue.prototype.$tinymce = tinymce
// 安装组件
Vue.use(VueTinymce)

4.vue中直接使用

<vue-tinymce 
id="textarea" 
v-model="content" 
:setup="setup" 
:setting="setting">
</vue-tinymce>

5.在 vue 对应的 js 中

加入配置项 ---- 表格啥的乱七八糟的 基本上想要的功能就全了

data () {
    return {
      content: "", // 这个是文本框里的内容
      setting: {
        menubar: true,
        toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright                     
        alignjustify | link unlink | numlist bullist | image media table | fontselect 
        fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent 
        outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | 
        fontsizeselect forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        language: 'zh_CN',
        language_url: 'https://lab.uxfeel/node_modules/tinymce/langs/zh_CN.js',
        height: 500
      }
   }
}

6.完成之后案例

安装 使用 ------

配置 表格 ------

下面是遇到的问题及解决

问题：先是为了回显 由于是在弹层中使用 所以加了v-if=”drawer” drawer是弹层是否弹出还是关闭的自定义属性(true/false) 加完之后回显没问题了 但是获取编辑器内容获取不到了 于是
解决办法：
加入change事件 是改变编辑器内容就会返回val 直接在事件下赋值 编辑器内容就会获取到, v-model 后端返回的值也要改编成 :content="contentTex"
 
全部代码:
这是VUE中改法

<vue-tinymce 
id="textarea" 
v-if="drawer" 
:content="contentTex" 
@change="changeTinyMce" 
:setup="setup" 
:setting="setting">
</vue-tinymce>
 
// 富文本编辑器 编辑器内容改变就触发 获取VAL --- js中
    changeTinyMce (val) {
      this.contentTex = val // 把变化的值赋给this.contentTex
},

// contentTex 是在data中命的空值
onSubmit () { // 编辑、新增提交
      this.ruleForm.contentTex = this.contentTex
       // 将 上面拿到的 值 赋给即将要传给后端的 form表单中 的contentTex
          Request.onSubmit(this)
    },
 
 
data() {
Return {
contentTex: “”, // 编辑器内容
  ruleForm: {
    contentTex: null // 内容
}
}
}
 
 
以上代码要自上而下执行 按顺序赋值  按理说是不会出错了 不按理说 我也不会啊

再一个是啥呢 就是这个步骤全部完事之后 会报个错 会说 setup 报错

解决一下就是  

在初始化 mounted ()  加   this.setup()

在事件函数里加 methods () 加 setup(editor) {}