Vue （2.x） 中如何使用 Tinymce

本組件使用的是  "tinymce": "^5.1.0",     "vue-tinymce-editor": "^1.6.2",

一、安裝

　　npm install tinymce --save

　　npm install vue-tinymce-editor

二、全局注冊組件

　　main.js  中引入

　　import tinymce from "vue-tinymce-editor";

　　 import "../static/tinymce/langs/zh_CN.js";   之所以在這里引入語言包，是因為在配置相中配置的語言路徑不起作用的情況下。

　　語言包下載地址：http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

　　官方語言包下載地址：https://www.tiny.cloud/get-tiny/language-packages/

　　Vue.component("tinymce", tinymce);

　　

三、復制 tinymce 包

　　首先在 public 下面新建一個 tinymce 文件夾

　　找到 node_modules 下的  tinymce 將其目錄下的 skins  themes 復制到 public/tinymce  下。

四、封裝組件

<template lang="pug">   //只有vue項目中配置了 pug 模板的語法才可以這樣寫否則按照正常 html 語法進行書寫
  .tinymce-w(:class='className')
    tinymce(id="tinymce" ref="tinymce" v-model="content" :other_options="other_options")
</template>

<script>
import "tinymce/skins/ui/oxide/skin.css";
export default {
  props: {
    className: {
      type: String,
      default: "",
    },
    contents: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      content: "",
      tinymceId: "tinymce",
      other_options: {
        // language_url: "/public/tinymce/langs/zh_CN.js", //語言包的路徑 
        language: "zh_CN", //語言
        elementpath: false, // 隱藏底欄的元素路徑
        branding: false, // 隱藏右下角技術支持
        contextmenu: false, // 禁用富文本的右鍵菜單，使用瀏覽器自帶的右鍵菜單
        height: "13rem",
        skin_url: "/public/tinymce/skins/ui/oxide", //skin路徑
        content_css: "/public/tinymce/skins/content/default/content.css",
        content_style: "p {color: #ffffff;}",
        menubar: "file edit insert view format table",
        resize: false, //禁用編輯器調整大小
        fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px",
        toolbar1:
          "code preview | undo redo | forecolor textcolor backcolor textcolor | formatselect fontsizeselect | formatselect | bold italic |",
        toolbar2:
          "alignleft aligncenter alignright alignjustify outdent indent | numlist lists | image table | fullscreen fullscreen|",
        //開關使用Data URL/Blob URL插入圖片和文件到內容區的方式。例如，圖像是使用imagetools插件處理后插入到內容區的，此時圖像並未真正上傳到服務器，而是以Data URL/Blob URL的方式插入在內容中。
        automatic_uploads: false,
        //圖片上傳地址
        images_upload_url:
          process.env.NODE_ENV === "production"
            ? window.g.UPLOADER_URL
            : "/api/common/uploadFile",
        // file_picker_types: "image",
        //文件上傳成功時的回調
        // file_picker_callback: () => {},
        //自定義圖片上傳
        images_upload_handler: function(blobInfo, success, failure, progress) {
          var xhr, formData;
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open("POST", process.env.NODE_ENV === "production"
              ? window.g.UPLOADER_URL
              : "/api/common/uploadFile");
          xhr.upload.onprogress = function(e) {
            progress((e.loaded / e.total) * 100);
          };

          xhr.onload = function() {
            var json;
            if (xhr.status == 403) {
              failure("HTTP Error: " + xhr.status, { remove: true });
              return;
            }
            if (xhr.status < 200 || xhr.status >= 300) {
              failure("HTTP Error: " + xhr.status);
              return;
            }
            json = JSON.parse(xhr.responseText);
            console.log(json);
            if (!json || typeof json.resultObject != "string") {
              failure("Invalid JSON: " + xhr.responseText);
              return;
            }
            success(json.resultObject);
          };

          xhr.onerror = function() {
            failure(
              "Image upload failed due to a XHR Transport error. Code: " +
                xhr.status
            );
          };

          formData = new FormData();
          formData.append("files", blobInfo.blob(), blobInfo.filename());

          xhr.send(formData);
        },
      },
    };
  },
  methods: {
    setContent(value = "") {
      console.log(value);
      this.content = value;
      window.tinymce.get("tinymce").setContent(value);
    },
  },
};
</script>

<style></style>

五、使用自己封裝的組件

<template lang="pug">
    Tinymce(ref="editor" :contents="form.content")    
</template>

<script>

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

export default {
  data() {
    return {
      //表單提交參數
      form: {
        content: "",
      },
    };
  },
  components: {
    Tinymce,
  },
  methods: {
    //清空表單
    clearForm() {
      this.form = {
        content: "",
      };
      this.$refs.editor.setContent();// 清空 editor 的值
    },
  },
};
</script>