粗暴將tinymce富文本編輯器整合到vue項目

之前我使用的tinymce富文本編輯器，版本時4版本的，一些新的功能使用不上，現在想把5版本的tinymce整合進項目，之前tinymce是通過cdn的形式引入的，不會占用項目體積，

但是又想使用tinymce的新功能，比如加入第三方插件什么的，地圖插件，設置行高，多圖片上傳等，都是很吸引人的功能，於是打算先不顧文件體積，將tinymce整個文件拷貝到項目里，這樣方便插入第三方插件，

中文官網：http://tinymce.ax-z.cn/configure/integration-and-setup.php

首先，tinymce最新版本下載地址：https://www.tiny.cloud/get-tiny/self-hosted/    找到最新版本，現在是5.15版本，下載生產環境pro

然后解壓得到以下文件：tinymce

 

 

 放到vue的public目錄下

在index.html頁面引入

<!-- 5.1.5 -->
    <script src="./tinymce/tinymce.min.js"></script>

然后在項目中

初始化配置：

initTinymce() {
      const _this = this
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        base_url: '/tinymce',//指定插件及皮膚所在的文件路徑
        inline: false,//是否開啟內斂模式，不開啟就是iframe模式
        // language: this.languageTypeList['zh'],
        language:'zh_CN',
        language_url: '/tinymce/langs/zh_CN.js',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        height: this.height,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        // advlist_bullet_styles: 'square',
        // advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
          }
          _this.hasInit = true
          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.hasChange = true
            this.$emit('input', editor.getContent())
          })
        },

需要加上語言包，中文官網可以下載，之后將zh_CN.js放在tinymce下的langs文件夾下，沒有此文件夾可以創建一個，然后按照上面的語言配置即可，指定語言、指定語言包路徑，當然，我們本地引用tinymce時，需要指定插件皮膚等文件所在的位置：

base_url: '/tinymce',//指定插件及皮膚所在的文件路徑

然后加入第三方插件時，就從中文官網上下載對應的插件文件，解壓好之后，放在plugins文件下，然后配置plugins和toolbar即可，很簡單

另外集成七牛上傳圖片的一段代碼，大家可以看看，

images_upload_handler(blobInfo, success, failure, progress) {
          // progress(0);
          console.log("開始上傳圖片")
          console.log(blobInfo.blob());//將blobinfo變成易於理解的file對象
          tools.updateOfflineImg(blobInfo.blob(),_this.token).then(url=>{
            console.log(url)
            success(url);
          }).catch(err=>{
            failure(err);
          })
        },

七牛上傳需要自己封裝好方便的方法，大家自己可以封裝，這里就不多說了。

另外提醒一下，中文官網也有vue集成tinymce的方法，可以去使用，不過我是按照自己之前使用的集成方法，感覺不用改太多的代碼，所以就沒有按照中文官網上集成的方法使用。

上訴術方法集成后，打包體積國讓增大到嚇人的底部，整整增加了6M那個樣子，有點嚇人，不過如果用不了三方插件，比如多圖上傳，地圖，設置行高等等時，我們完全可以用cdn的形式引入，這樣就會憑空減少6M的體積，我覺的犧牲點功能還是比較好的，項目體積大真讓人受不了。希望tinymce早日把地圖和多圖上傳集成吧，這樣就可以隨意用cdn引入了。

 

。