vue tinymce富文本插件引入

vue tinymce富文本插件引入

vue版本 2.6

tinymce版本 4.9.10

1.安装tinymce

根据官网的安装教程

• For Vue.js 3.x users:

  $ npm install --save "@tinymce/tinymce-vue@^4"
  

• For Vue.js 2.x users:

  $ npm install --save "@tinymce/tinymce-vue@^3"
  

由于我是vue2版本所以使用npm install --save "@tinymce/tinymce-vue@^3"

然后再运行以下命令，安装tinymce-vue@4.9.10

npm install @tinymce/tinymce-vue@4.9.10 -S

2.配置tinymce

1. 在public\static目录下新建一个tinymce目录

2. 将\node_modules\tinymce下的skins目录复制到public\static\tinymce下

   

3. 从官网下载语言包

   

4. 点击下载，可以得到一个压缩文件，把里面的zh_CN.js复制到public\static\tinymce下

5. 在components目录下新建一个tinymce文件夹，创建一个index.vue文件

<template>
  <div class="tinymce">
    <editor id="tinymce" v-model="tinymceHtml" :init="init" />
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/print'
import 'tinymce/plugins/autoresize'
export default {
  name: 'Tinymce',
  components: { Editor },
  props: {
    value: {
      type: String,
      default: ''
    }},
  data() {
    return {
      tinymceHtml: this.value,
      init: {
        language_url: './static/tinymce/zh_CN.js', // 引入语言包路径 重要！！
        language: 'zh_CN',
        skin_url: './static/tinymce/skins/lightgray', // 引入皮肤路径 重要！！
        height: 435, // 设置高度 其实可以设置成props传值的，我这边只需要用到一次，所以给了固定高度
        autoresize_bottom_margin: 10,
        autoresize_max_height: 435, // 编辑区域的最大高
        autoresize_min_height: 435, // 编辑区域的最小高度
        autoresize_on_init: true,
        autoresize_overflow_padding: 10,
        end_container_on_empty_block: true,
        // 插件列表可自定义
        plugins: 'print link lists image code table colorpicker textcolor wordcount contextmenu',
        // 工具栏列表
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent blockquote | undo redo |  code removeformat print',
        branding: false // 隐藏水印
      }
    }
  },
  watch: {
    value(newValue) {
      this.tinymceHtml = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init({})
  }

}
</script>