vue 整合富文本编辑器vue-tinymce

vue引入

npm install @tinymce/tinymce-vue
npm install tinymce

复制文件夹

复制node_modules下tinymce到src/assets下(如果有public，也可以选择public)
复制完这个文件夹，这个插件就可以删除了
npm uninstall tinymce

下载语言包

官方链接

选择Chinese (China)	进行下载

assets/tinymce中新建目录langs,将语言包zh_CN.js放到该文件夹下

index.ejs或者index.html body中添加
<script type="text/javascript" src="/assets/tinymce/tinymce.min.js"></script>

拷贝目录

使用拷贝插件，将assets/tinymce拷贝到dist目录下，这么做的原因是因为上面配置了tinymce文件夹位置，
加载资源文件文件时，会访问ip地址:端口号/assets/tinymce/。。。
所以需要把tinymce拷贝到dist目录下
npm install copy-webpack-plugin@4.0.1 --save
webpack.dev.config.js、webpack.prod.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path');

plugins: [
	new CopyWebpackPlugin(
     [
       {
         from: path.join(__dirname, 'src/assets/tinymce'),
         to: path.join(__dirname, 'dist/assets/tinymce')
       }
     ],
     {
       copyUnmodified: true
     }
   ),
]

新建editor.vue

<template>
  <div>
    <vue-tinymce
      ref="tinymce"
      @input="$emit('input', content)"
      v-model="content"
      :init="setting">
    </vue-tinymce>
  </div>
</template>
<script>
  import vueTinymce from '@tinymce/tinymce-vue'
  export default {
    components: {
      vueTinymce
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      plugins: {
        type: [String, Array],
        default: "lists image media table wordcount code fullscreen help  toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor"
      },
      toolbar: {
        type: [String, Array],
        default(){
          return [
            'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat | code  bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap  pastetext print preview hr',
          ]
        }
      }
    },
    data() {
      return {
        content: this.value,
        setting: {
          height: 500,
          statusbar: false, // 隐藏编辑器底部的状态栏
          language: "zh_CN",//语言
          plugins: this.plugins,//插件
          toolbar: this.toolbar,//工具栏
          paste_data_images: true, // 允许粘贴图像
          images_upload_handler: (blobInfo, success, failure) => {
            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            success(img)
          },
        }
      }
    },
    watch: {
      value(val) {
        if (val !== this.content) {
          this.content = val;
        }
      }
    }
  }
</script>

页面中使用

<template>
	<editor v-model="content" ref="editor"></editor>
</template>
<script>
	import Editor from '../_comps/editor'
  export default {
    components: {
      Editor
    },
    data() {
		return {
			content:''
		}
    }
</script>

自定义图片上传功能

images_upload_handler: (blobInfo, success, failure) => this.uploadImg(blobInfo, success, failure)

methods: {
	async uploadImg(blobInfo, success, failure) {
	  let formData = new FormData();
	  formData.append('file', blobInfo.blob(), blobInfo.filename());
	  // 发送ajax返回的url
	  let uri= await this.uploadFile(formData);
	  success(uri)
	},
	uploadFile(formData) {
	  return axios.post("/api/editor/upload", formData, {
	    headers: {
	      'Content-Type': 'multipart/form-data'
	    }
	  }).then(r => {
	    let data = r.data;
	    return data
	  });
	},
}

上传视频

// 想要哪一个图标提供本地文件选择功能，参数可为media(媒体)、image(图片)、file(文件)
file_picker_types: 'media',
file_picker_callback: (cb, value, meta) => this.uploadMedia(cb, value, meta)

methods: {
	uploadMedia(cb, value, meta) {
        //当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
        if (meta.filetype === 'media') {
          //创建一个隐藏的type=file的文件选择input
          let input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.onchange = (e) => {
            this.upload(e.currentTarget.files[0], cb)
          }
          //触发点击
          input.click();
        }
      },
      async upload(file, cb) {
        let formData = new FormData();
        formData.append('file', file);
        let uri= await this.uploadFile(formData);
        //cb()回调函数，将mediaLocation显示在弹框输入框中
        cb(uri, {title: file.name});
      },
      //uploadFile同上
}

关于富文本编辑器内视频不能预览，解决办法暂时只能是通过修改源码的方式，请替换tinymce/plugins/media/plugin.min.js下载链接:https://download.csdn.net/download/qq_35134375/12998656

文件链接

https://download.csdn.net/download/qq_35134375/12998767