vue2.x 富文本编辑器Tinymce tinymce-vue 使用记录

第一步 引入（我是用的是这个版本）

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

第二步

找到 node_modules 下的  tinymce 将其目录下的 skins  themes 复制到 static/tinymce  下，这里的langs是我自己加的汉化语言包，语言包下载地址：Language Packages | Trusted Rich Text Editor | TinyMCE

第三步  组件封装

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick">
    </editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
  components: {
    Editor
  },
  props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        // ' anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists   noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        'lists image media table  wordcount '
    },
    toolbar: {
      type: [String, Array],
      default:
        // 'undo redo | searchreplace | bold  italic | underline | strikethrough | alignleft  aligncenter alignright | outdent indent  blockquote  removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table  forecolor backcolor'
        'undo redo |  formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr'
    }
  },
  data () {
    return {
      //初始化配置
      init: {
        language_url: '/static/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: 300,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
        resize: false
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>
<style scoped>
</style>

下面的路径是根据项目中实际的文件位置设置的 

 

4、组件使用

<template>
    <Tinymce class="setTinymce" :height="200" v-model="value"></Tinymce>
</template>

<script>

import Tinymce from "../../components/Tinymce.vue";

export default {
  data() {
    return {
      //表单提交参数
      form: {
        content: "",
      },
    };
  },
  components: {
    Tinymce,
  }
};
</script>

5、效果展示（我这里用到的功能少，需要添加的自己改配置添加进去就好了）

 

遇到的问题：

1、富文本框，渲染了，但是在页面不显示（要设置了正确的skin_url,富文本编辑器才能正常显示）

2、总是报“Uncaught SyntaxError: Unexpected token<”的错误

我之前一直觉得是版本的问题，换了版本还是报错，后面把该引入的文件位置放正确了（初始化配置的路径，static文件里面的），就不报错了。