前言：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完成。
