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中添加

拷贝目录

使用拷贝插件，将assets/tinymce拷贝到dist目录下，这么做的原因是因为上面配置了tinymce文件夹位置，
加载资源文件文件时，会访问ip地址:端口号/assets/tinymce/。。。
所以需要把tinymce拷贝到dist目录下
npm install [email protected] --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>