vue使用tinymce5富文本编辑器

极力推荐一个大佬做的tinymce5中文文档；其中包含部分常用插件如：多图上传，行间距，首行缩进等

---

我所使用的版本为

"@tinymce/tinymce-vue": "^2.1.0",
"tinymce":"^5.0.12"

通过npm 安装tinymce和tinymce-vue

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

一、子组件页面

1.首先需要引入tinymce的关键文件

import tinymce from "tinymce";
import "tinymce/themes/silver";
import Editor from "@tinymce/tinymce-vue";

2.此时的tinymce包含了一些基本功能插件，如果需要其他功能，需要引入对应的功能插件，并在plugins和toolbar中使用插件

import "tinymce/themes/silver";
import "tinymce/plugins/paste";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";

3.使用tinymceVue组件

<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
    ></editor>
  </div>
</template>
<script>
	export default {
		components: {
	    	Editor
  		},
	}
</script>

4.用props接收父级页面传来的value值，通过watch进行value的修改

props: {
    value: {
      type: String,
      default: ""
    },
    plugins: {
      type: [String, Array],
      default:
        "link lists image code table wordcounts"
    },
    toolbar: {
      type: [String, Array],
      default:
        "bold italic underline strikethrough | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat"
    }
  },
watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  }

5.声明所需要的参数

data: function() {
    return {
      myValue: this.value,
    };
  },

6.在data中进行编辑器相关的配置

data function() {
	return {
		init: {
        language_url: "/static/plugins/tinymce/zh_CN.js", //如果语言包不存在，指定一个语言包路径
        language: "zh_CN", //语言
        skin_url: "/static/plugins/tinymce/skins/ui/oxide", //如果主题不存在，指定一个主题路径
        content_css: "/static/plugins/tinymce/mycontent.css",
        height: "700px",
        width: this.calcWidth(),
        plugins: this.plugins, //插件
        toolbar: this.toolbar, //工具栏
        branding: false, //技术支持(Powered by Tiny || 由Tiny驱动)
        menubar: true, //菜单栏
        theme: "silver", //主题
        zIndex: 1101,
      },
	}
}

7.可以在methods中定义一些常用的方法

methods: {
	// 使编辑器的宽度始终为页面的一半
	calcWidth() {
      return document.body.clientWidth / 2 + "px";
    },
}

完整子组件代码

<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    ></editor>
  </div>
</template>
<script>
import axios from "axios";
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/paste";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        "link lists image code table wordcounts"
    },
    toolbar: {
      type: [String, Array],
      default:
        "bold italic underline strikethrough | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat"
    }
  },
  data() {
    return {
      init: {
        language_url: "/static/plugins/tinymce/zh_CN.js", //如果语言包不存在，指定一个语言包路径
        language: "zh_CN", //语言
        skin_url: "/static/plugins/tinymce/skins/ui/oxide", //如果主题不存在，指定一个主题路径
        content_css: "/static/plugins/tinymce/mycontent.css",
        height: "700px",
        width: this.calcWidth(),
        plugins: this.plugins, //插件
        toolbar: this.toolbar, //工具栏
        branding: false, //技术支持(Powered by Tiny || 由Tiny驱动)
        menubar: true, //菜单栏
        theme: "silver", //主题
        zIndex: 1101,
      },
      myValue: this.value
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    calcWidth() {
      return document.body.clientWidth / 2 + "px";
    },
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>

二、在父级页面使用

<template>
	 <editor-vue class="editor" :value="dataForm.lessonDetail" @input="(res)=> dataForm.lessonDetail = res" ></editor-vue>
</template>
<script>
import editorVue from "../../../components/editor.vue";
export default{
	components:{editorVue},
}
</script>