vue 集成富文本tinymce

開發環境

1. vscode

開發語言

1. vue
2. javaScript

插件安裝

1. npm install tinymce -S
2. 可以使用裏面的文件， 下載後可以在node_modules 裏面查看如下未目錄結構
    

3. 可以將整個結構拷在static裏面，爲了節省打包後的文件大小可以將tinymce.min.js以cdn方式導入放在index.html中
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.5/tinymce.min.js"></script>
4. 附上封裝的代碼可以直接導入使用
   
    <template>

<div>

<textarea :id="Id"></textarea>

</div>
</template>
<script>
import "tinymce/langs/zh_CN.js"; // 引入中文包地址
// import axios from "axios"; // 可導入axios文件進行上傳圖片
export default {
data() {

const Id = Date.now();
return {
  Id: Id, // 構造tinymce的選擇器
  Editor: null,
  tinymceConfig: {
    // GLOBAL
    height: 500,
    theme: "modern",
    menubar: false,
    toolbar: `styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image  media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat  hr | paste code  link | undo redo | fullscreen `,
    plugins: `
        paste
        importcss
        image
        code
        table
        advlist
        fullscreen
        link
        media
        lists
        textcolor
        colorpicker
        hr
        preview
    `,

    // CONFIG

    forced_root_block: "p",
    force_p_newlines: true,
    importcss_append: true,
    skin_url: "/static/tinymce/skins/lightgray", // 可以把node_modules 下面的文件導入到static然後引入到這裏
    language_url: "/static/tinymce/langs/zh_CN.js", // 導入中文包
    language: "zh_CN",

    // CONFIG: ContentStyle 這塊很重要， 在最後呈現的頁面也要寫入這個基本樣式保證前後一致， `table`和`img`的問題基本就靠這個來填坑了
    content_style: `
        *                         { padding:0; margin:0; }
        html, body                { height:100%; }
        img                       { max-width:100%; display:block;height:auto; }
        a                         { text-decoration: none; }
        iframe                    { width: 100%; }
        p                         { line-height:1.6; margin: 0px; }
        table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
        .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
        ul,ol                     { list-style-position:inside; }
    `,

    insert_button_items: "image link | inserttable",

    // CONFIG: Paste
    paste_retain_style_properties: "all",
    paste_word_valid_elements: "*[*]", // word需要它
    paste_data_images: true, // 粘貼的同時能把內容裏的圖片自動上傳，非常強力的功能
    paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性
    paste_webkit_styles: "all",
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false,

    // CONFIG: Font
    fontsize_formats: "10px 11px 12px 14px 16px 18px 20px 24px",

    // CONFIG: StyleSelect
    style_formats: [
      {
        title: "首行縮進",
        block: "p",
        styles: { "text-indent": "2em" }
      },
      {
        title: "行高",
        items: [
          { title: "1", styles: { "line-height": "1" }, inline: "span" },
          {
            title: "1.5",
            styles: { "line-height": "1.5" },
            inline: "span"
          },
          { title: "2", styles: { "line-height": "2" }, inline: "span" },
          {
            title: "2.5",
            styles: { "line-height": "2.5" },
            inline: "span"
          },
          { title: "3", styles: { "line-height": "3" }, inline: "span" }
        ]
      }
    ],

    // FontSelect
    font_formats: `
        微軟雅黑=微軟雅黑;
        宋體=宋體;
        黑體=黑體;
        仿宋=仿宋;
        楷體=楷體;
        隸書=隸書;
        幼圓=幼圓;
        Andale Mono=andale mono,times;
        Arial=arial, helvetica,
        sans-serif;
        Arial Black=arial black, avant garde;
        Book Antiqua=book antiqua,palatino;
        Comic Sans MS=comic sans ms,sans-serif;
        Courier New=courier new,courier;
        Georgia=georgia,palatino;
        Helvetica=helvetica;
        Impact=impact,chicago;
        Symbol=symbol;
        Tahoma=tahoma,arial,helvetica,sans-serif;
        Terminal=terminal,monaco;
        Times New Roman=times new roman,times;
        Trebuchet MS=trebuchet ms,geneva;
        Verdana=verdana,geneva;
        Webdings=webdings;
        Wingdings=wingdings,zapf dingbats`,

    // Tab
    tabfocus_elements: ":prev,:next",
    object_resizing: true,

    // Image
    imagetools_toolbar:
      "rotateleft rotateright | flipv fliph | editimage imageoptions"
  }
};

},
props: {

value: {
  default: "",
  type: String
},
config: {
  type: Object,
  default: () => {
    return {
      theme: "modern",
      height: 300
    };
  }
},
// 該參數就是上傳文件的url
url: {
  default: "",
  type: String
},
//上傳文件類型
accept: {
  default: "image/jpeg, image/png, image/jpg,",
  type: String
},
maxSize: {
  default: 2097152,
  type: Number
},
withCredentials: {
  default: false,
  type: Boolean
}

},
mounted() {

this.init();

},
beforeDestroy() {

// 銷燬tinymce
//   window.tinymce.remove(`$#{this.Id}`)

},
methods: {

init() {
  const self = this;

  this.Editor = window.tinymce.init({
    // 默認配置
    ...this.tinymceConfig,

    // 圖片上傳
    images_upload_handler: function(blobInfo, success, failure, progress) {
      if (blobInfo.blob().size > self.maxSize) {
        failure("文件體積過大");
      }
      if (self.accept.indexOf(blobInfo.blob().type) > -1) {
        uploadPic();
      } else {
        failure("圖片格式錯誤");
      }
      function uploadPic() {
        // 用axios 上傳文件
        // progress(0);
        // let param = new FormData();
        // let config = {
        //   headers: {
        //     "Content-Type": "multipart/form-data"
        //   }
        // };
        // param.append("file", blobInfo.blob());
        // console.log('axios', axios);
        // axios
        //   .post("http://operate-dev.winchaingroup.com/api/upload", param, config)
        //   .then(response => {
        //     success(response.data.data);
        //     self.$emit("on-upload-complete", [json, success, failure]);
        //     progress(100);
        //   })
        //   .catch(error => {
        //     console.log("err", error);
        //   });

        // 用ajax上傳文件
        const xhr = new XMLHttpRequest();
        let createFrom = document.createElement("form");
        let FromData = new FormData(createFrom);
        xhr.withCredentials = self.withCredentials;
        xhr.open("POST", self.url);
        xhr.onload = function() {
          if (xhr.status !== 200) {
            // 拋出 'on-upload-fail' 鉤子
            failure("上傳失敗: " + xhr.status);
            return;
          }
          const json = JSON.parse(xhr.responseText);
          // success函數中的參數就是你上傳文件返回的url
          success(json.data);
          progress(100);
          // 拋出 'on-upload-complete' 鉤子
        };
        FromData.append("file", blobInfo.blob());
        xhr.send(FromData);
      }
    },

    // prop內傳入的的config
    ...this.config,

    // 掛載的DOM對象
    selector: `#${this.Id}`,
    setup: editor => {
      // 拋出 'on-ready' 事件鉤子
      editor.on("init", () => {
        self.loading = false;
        editor.setContent(self.value);
      });
      // 拋出 'input' 事件鉤子，同步value數據
      editor.on("input change undo redo", () => {});
    }
  });
}

}
};
</script>

5. 在組件中導入即可使用
    import tinymce from './tinymce/index'

引用

https://www.bootcdn.cn/tinymce/     // tinymce地址