目录

插件安装
  安装tinymce-vue
  安装tinymce
  下载中文语言包
使用
  初始化
扩展插件
完整代码tinymce-editor.vue
封装后使用
效果图
在线预览

npm install @tinymce/tinymce-vue -S

npm install tinymce -S 

"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.3",

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

<editor id="tinymce" v-model="value" :init="init"></editor>

init: {
    language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
    language: 'zh_CN',//语言
    skin_url: '/tinymce/skins/ui/oxide',// skin路径
    height: 300,//编辑器高度
    branding: false,//是否禁用“Powered by TinyMCE”
    menubar: false,//顶部菜单栏显示
}

import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件

plugins: 'lists image media table wordcount',
toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',

 <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/contextmenu";import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";import "tinymce/plugins/image"; // 插入上传图片插件import "tinymce/plugins/media"; // 插入视频插件import "tinymce/plugins/table"; // 插入表格插件import "tinymce/plugins/lists"; // 列表插件import "tinymce/plugins/wordcount"; // 字数统计插件import "tinymce/plugins/codesample"; // 代码示例插件import "tinymce/plugins/code"; // 源代码import "tinymce/plugins/fullscreen"; // 全屏import "tinymce/plugins/preview"; // 预览export default {  components: {    Editor  },  props: {    ueditorConfig: {},    //传入一个value，使组件支持v-model绑定    value: {      type: String,      default: "请输入内容"    },    disabled: {      type: Boolean,      default: false    },    plugins: {      type: [String, Array],      default:        "lists image media table wordcount codesample code fullscreen preview"    },    toolbar: {      type: [String, Array],      default:        "undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | codesample | code | preview | fullscreen | "    }  },  data() {    return {      //初始化配置      init: {        language_url: "/js/zh_CN.js",        language: "zh_CN",        //skin_url: "/tinymce/skins/ui/oxide-dark",        skin_url: "/js/skins/ui/oxide",        height: this.ueditorConfig.height,        width: this.ueditorConfig.width,        plugins: this.plugins,        toolbar: this.toolbar,        branding: true,        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);        }      },      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>

<template>  <div>    <tinymceEditor      ref="contents"      v-model="contents"      :ueditorConfig="ueditorConfig"      @onClick="onClick"    ></tinymceEditor>    <button @click="clear">清空内容</button>    <button @click="disabled = true">禁用</button>  </div></template><script>import TinymceEditor from './tinymce-editor/tinymce-editor'export default {  components: {    TinymceEditor  },  data () {    return {      contents: 'Welcome to Use Tinymce Editor',      disabled: false,       ueditorConfig: {         height: 500, //设置编辑器宽度         width: "80%" //设置编辑器高度      },    },  },  methods: {    // 鼠标单击的事件    onClick (e, editor) {      console.log('Element clicked')      console.log(e)      console.log(editor)    },    // 清空内容    clear () {      this.$refs.contents.clear()    }  }}</script>