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>