vue之富文本插件 tinymce-vue

先安装下载

npm install --save @tinymce/tinymce-vue
npm install --save tinymce

并且在public下创建tinymce文件夹

在这里我们使用中文语言包语言包下载然后把压缩包解压到tinymce文件夹下，然后在node_modules 中找到 tinymce/skins目录，将其复制到static\tinymce目录下面

初始化tinymce-vue

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

然后在components中注册

 components: {
    Editor
  },

接下来直接上全部代码：

<template>
  <div class="tinymce-editor">
    <editor v-model="contentValue"
      :init="init"
        >
    </editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons' //解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
export default {
  components: {
    Editor
  },
  props: ['content'],
  data () {
    return {
      contentValue:this.content,
      init: {
        language_url: `tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `tinymce/skins/ui/oxide`,
        content_css: `tinymce/skins/content/default/content.css`,
        // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
        // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
        height: 400,
        plugins: 'lists image media table wordcount',
        toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
        branding: false,
        menubar: false,
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {

  },
  watch: {
    content (newValue) {
        console.log(newValue,'监听')
      this.contentValue = newValue
    },
    contentValue (newValue) {
      this.$emit('changes', newValue)
    }
  }
}

</script>

在我司图片上传代码是这样的写的

     images_upload_handler: (blobInfo, success, failure) => {
            let formData = new FormData();
            formData.append("file", blobInfo.blob());
            this.$http.post("/manage/image/upload", formData).then(res => {
              success( res.data.fileurl_str);
            });
          }

在这里需要换成后台给的图片上传接口。
在其他页面使用

<template>
    <div class="chlidren">
        <!-- <span>我是子组件</span> 
        <slot></slot>
        <p>子组件</p> -->
        <!-- 编辑器 -->
        <div class="editors">
        <editor :content="content" v-model="content" @changes="(value)=>{content=value}"></editor>
        </div>
        {{content}}
    </div>
</template>
<script>
import editor from "@/components/editor"
export default {
    components:{
        editor
    },
    data(){
        return{
            content:''
        }
    },
    methods:{
        
    }
}