vue中使用富文本编辑器--tinymce

第一步：下载tinymce

npm install tinymce-vue --save;
cnpm install tinymce-vue --save;

第二步：下载tinymce的css文件包和语言包

在static下创建文件夹tinymce，并将下载好的文件放进去

第三步：在页面中引入并使用它。这里直接将富文本编辑器封装成了一个vue组件的形式

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>
<script>
import {imgUrl} from '../untils/imgUrl'//这里是解析图片路径的一个外部js方法
import tinymce from 'tinymce/tinymce'//引入tinymce
import Editor from '@tinymce/tinymce-vue'//引入tinymce
import 'tinymce/skins/ui/oxide/skin.min.css'; //富文本样式
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: 'lists image table textcolor wordcount contextmenu'
    },
    toolbar: {//这是要显示的功能。如图片上传，切换颜色等等
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic | forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fontsizeselect | fontselect'
    }
  },
  data() {
    return {
        //初始化配置
        init: {
            language_url: '../../static/tinymce/zh_CN.js',//引入语言包
            language: 'zh_CN',//语言切换为中文
            skin_url: '../../static/tinymce/skins/ui/oxide-dark/skin.css',//引入css文件
            height: 300,
            plugins: this.plugins,
            toolbar: this.toolbar,
            branding: false,
            menubar: false,
            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // 字体大小选择
            paste_auto_cleanup_on_paste: true,//是否自动清理复制粘贴过来的文本样式
            //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
            //图片上传功能
            images_upload_handler: (blobInfo, success, failure) => {
              var xhr, formData;
              xhr = new XMLHttpRequest();
              xhr.withCredentials = false;
              //你要上传图片的后台接口
              xhr.open('POST', 'http://127.0.0.1:3000/upload/uploadImg');
              xhr.onload = function() {
                var json;
                if (xhr.status != 200) {
                  failure('HTTP Error: ' + xhr.status);
                  return;
                }
                json = JSON.parse(xhr.responseText);
                //这是上传成功后后台返回的图片地址。这里用处理api的js文件处理一下。
                json.data = imgUrl(json.data);
                if (!json || typeof json.data != 'string') {
                  failure('上传成功！');
                  return;
                }
                //这里表示上传成功。显示你上传的图片
                success(json.data);
              };
              formData = new FormData();
              formData.append('file', blobInfo.blob(), blobInfo.filename());
              xhr.send(formData);
            }
        },
        myValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      console.log(newValue);
      newValue = newValue.replace(/(\')/g,'&apos');
      console.log(newValue);
      this.$emit('input', newValue)
    }
  },
  mounted() {
  //初始化富文本编辑器
    tinymce.init({})
  },
  methods: {
    //需要什么事件可以自己增加
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = ''
    },
    
  },
}
</script>
<style>
.tox-silver-sink{
  z-index: 9999 !important;
}
</style>

第四步：在页面里调用封装好的组件

//引入
import Editor from '../components/edit';
//注册为组件
components:{
   Editor,
},
//使用
<Editor @input = "submitValue" :value="editor.editorValue" :disabled="editor.editordisabled"></Editor>