iview-admin2.5加入tinymce 富文本编辑器，并使用iview Upload组件进行上传图片。

前言：iview-admin2.5的富文本编辑器wangEditor，不能对图片进行拖拉编辑，所有考虑换一个好用的富文本编辑器。找了很多进行对比，最后看到Wisg.Wrong的“在 Vue 项目中引入 tinymce 富文本编辑器”，选择了 tinyMCE。

在结合 来点灵感的“tinymce 5更新后，如何使用tinymce-vue”后，最后完成了的整合。

问题：iview-admin2.5的富文本编辑器wangEditor，不能对图片进行拖拉编辑。

需求：可以拖拉编辑图片的，好用的编辑器。

tinyMCE 官网：点这里，

github地址：https://github.com/tinymce

安装：

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 /public/tinymce 目录下

tinymce 默认是英文界面，需要langs的语言包。链接

/src/components/tinymce-editor/tinymce-editor.vue

<template>
<div>
  <!--
    给editor加key是因为给tinymce keep-alive以后组件切换时tinymce编辑器会显示异常，
    在activated钩子里改变key的值可以让编辑器重新创建
  -->
  <editor id="tinymceEditor" :init="tinymceInit" v-model="value" :key="tinymceFlag"></editor>
  <Upload
      multiple
      ref="imageUpload"
      action="//127.0.0.1:8026/upload/"
      :on-success="insertImage"
      style="display:none">
  </Upload>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'

import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'

export default {
  name: 'TinymceEditor',
  components: {
    'editor': Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tinymceFlag: 1,
      tinymceInit: {},
    }
  },
  methods: {
    // 插入图片至编辑器
    insertImage (res, file) {
      let src = res.image // 图片存储地址
      tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`)
    }
  },
  created () {
    const that = this
    this.tinymceInit = {
      skin_url: '/tinymce/skins/ui/oxide',
      language_url: `/tinymce/langs/zh_CN.js`,
      language: 'zh_CN',
      height: document.body.offsetHeight - 300,
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      // elementpath: false,  //禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      menubar: false, // 隐藏最上方menu
      plugins: 'advlist table lists paste preview fullscreen',
      toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen',   
      // tinymce添加自定义插入图片按钮
      // 使用iview的Upload组件,将图片先上传到api上，再将图片的URL放入编辑器内容
      setup: (editor) => {
        editor.ui.registry.addButton('imageUpload', {
          // text: '插入图片',
          tooltip: '插入图片',
          icon: 'image',
          onAction: () => {
            let upload = that.$refs.imageUpload
            upload.handleClick()
          }
        })
      }
    }
  },
  activated () {
    this.tinymceFlag++
  },
  mounted () {

  }
}
</script>

 

src/view/components/content/edit.vue

<FormItem label="内容：">
  <tinymce-editor ref="editor" :value="formItem.content"></tinymce-editor>
</FormItem>

提交前，需要获取 tinymce 富文本编辑器里面的内容。

_this.formItem.content = _this.$refs.editor.value

完成。