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