vue中添加Tinymce富文本編輯器

 

1.在 package.json 中安裝插件

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

     添加後，重新install

2.封裝組件也可以直接用，封裝是爲了後期的延展性做考慮

<editor id='tinymce' v-model='tinymceHtml' :init='init'> </editor>

// 根據需求，自己手動記得預覽功能
<el-dialog :close-on-click-modal="false" top="3%" :visible.sync="dialogVisible"
      width="540px">
      <div class="previewBox">
        <div style="font-size: 18px;font-weight:600;padding-bottom: 10px;">
          <span>預覽</span>
        </div>
        <div v-html="bindHtml" class="preview"></div>
      </div>
  </el-dialog>

     手動引入需要的插件 

  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/silver/theme'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/media'

       在data裏面對編輯器進行定義，因爲上傳方式有兩種，寫了兩個   上傳方法當時寫在 methods裏面，但是調用的時候，調不到，有可能是我寫的有問題，可以自己進行嘗試

init: {
          fontsize_formats: '8px 10px 12px 14px 16px 18px', // 第二步
          language_url: '../../static/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          skin_url:  '../../static/tinymce/skins/ui/oxide',
          height: 500,
          content_css: ['../../static/tinymce/skins/content/default/content.css'],
          accept: '',
          // eslint-disable-next-line standard/object-curly-even-spacing
          branding: false,
          selector: '#textarea',
          paste_data_images: false,
          file_picker_types: 'media',
          media_live_embeds: true,
          plugins: '  link table  lists image code colorpicker textcolor  contextmenu ', // media
          toolbar: '  preview bold italic  underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | undo redo | code uploadpic',
          audio_template_callback: function (data) {
            return '<audio controls>' + '\n<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' + '</audio>'
          },
          setup: (editor) => {
            // eslint-disable-next-line eqeqeq
            editor.ui.registry.addButton('preview', {
              text: '預覽',
              onAction: (_) => {
                this.preview()
              }
            })
          },
          file_picker_callback: (cb, value, meta) => {
            // 當點擊meidia圖標上傳時,判斷meta.filetype == 'media'有必要，因爲file_picker_callback是media(媒體)、image(圖片)、file(文件)的共同入口
            // eslint-disable-next-line eqeqeq
            if (meta.filetype == 'media') {
              // 創建一個隱藏的type=file的文件選擇input
              let input = document.createElement('input')
              input.setAttribute('type', 'file')
              input.onchange = function () {
                let file = this.files[0]// 只選取第一個文件。如果要選取全部，後面注意做修改
                uploadPic(file, cb)
                /*  let xhr, formData;
                 xhr = new XMLHttpRequest();
                 xhr.open('POST', self.apiUrl);
                 xhr.withCredentials = self.credentials;
                 xhr.upload.onprogress = function (e) {
                   // 進度(e.loaded / e.total * 100)
                 };
                 xhr.onerror = function () {
                   //根據自己的需要添加代碼
                   console.log(xhr.status);
                   return;
                 };
                 xhr.onload = function () {
                   let json;
                   if (xhr.status < 200 || xhr.status >= 300) {
                     console.log('HTTP 錯誤: ' + xhr.status);
                     return;
                   }
                   json = JSON.parse(xhr.responseText);
                   //假設接口返回JSON數據爲{status: 0, msg: "上傳成功", data: {location: "/localImgs/1546434503854.mp4"}}
                   if(json.status==0){
                     //接口返回的文件保存地址
                     let mediaLocation=json.data.location;
                     //cb()回調函數，將mediaLocation顯示在彈框輸入框中
                     cb(mediaLocation, { title: file.name });
                   }else{
                     console.log(json.msg);
                     return;
                   }

                 }; */
              }
              // 觸發點擊
              input.click()
            }

            async function uploadPic(blobInfo, cb) {
              let formData = new FormData()
              // 服務端接收文件的參數名，文件數據，文件名
              // formData.append('file', blobInfo)
              // let res = await upload.upload(formData)
              // let data = res.data
              // eslint-disable-next-line eqeqeq
              // if (data && data.code == 0) {
              //   cb(data.data, {title: blobInfo.name})
              //   return data.data
              // } else {

              // }
            }
          },
          images_upload_handler: (blobInfo, success, failure) => {
            if (blobInfo.blob().size > 1024 * 1024) {
              failure('文件體積過大,不大於1M')
            } else {
              uploadPic(this.type)
            }

            async function uploadPic(type) {
              let formData = new FormData()
              // 服務端接收文件的參數名，文件數據，文件名
              // formData.append('file', blobInfo.blob())
              // let res
              // if (type === 'preview') {
              //   res = await pagemanager.uoloadImage(formData)
              // } else {
              //   res = await upload.upload(formData)
              // }
              // let data = res.data
              // // eslint-disable-next-line eqeqeq
              // if (data && data.code == 0) {
              //   success(data.data)
              // } else {
              //   failure('上傳失敗')
              // }
            }
          }
        }

在對富文本進行初始化

components: {Editor},

created() {
      tinymce.init(this.init)
},

 

* 我開始安裝的的版本過高，引入插件後，無法加載出來編輯器，後來把版本降低到現在使用的這個，就可以加載出

  文檔和度娘也有提到，版本跟插件的關係，版本不能超過5