tinymce富文本在vue2中的使用（踩坑记录）

tinymce富文本在vue2中的使用（踩坑记录）

1.引入相应版本的包

vue出了3，tinymce也出了新版本对应，下包的时候，要注意下载对应版本的包
vue2对应的tinymce版本的大版本号应该是5
tinymce-vue对应的版本大版本号是3
我的项目用yarn管理包
所以执行以下命令

yarn add tinymce@^5
yarn add @tinymce/tinymce-vue@^3

2. 写相应组件

1. 创建vue文件，写富文本组件。不过不用引入两个包，引入tinymce-vue就可以了。

import Editor from '@tinymce/tinymce-vue';

相应的html代码为以下代码

<template>
  <div class="editor">
    <editor v-model="content" :init="init"></editor>
    <div>
      <button class="button" @click="save">
        保存
      </button>
    </div>
  </div>
</template>

2. 配置tinymce

init:{
        height: 400,
        width: 1150,
        language: 'zh_CN', // 汉化
        language_url:'/langs/zh_CN.js',
        plugins:
          "link lists code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
        branding: false,// 去掉编辑器右下角的广告
        menubar: false,
        }

到这步完成，简单的富文本使用就可以了，但是现在不能上传图片，想要上传图片必须另作配置

3. 上传图片

1.配置中的plugins添加image

plugins: "link lists image code table colorpicker textcolor wordcount contextmenu",

2.图片应该上传到我们项目的服务器上，这里有两种办法

方法一

配置文件中添加上传图片的接口

images_upload_url:'/upload/' // 图片上传地址

添加这个配置，在富文本中选择图片上传时就可以直接调用接口，不用做其他配置

方法二

添加图片上传的处理方法

images_upload_handler: function (blobInfo: any,success: Function,failure:Function) {
	const file = blobInfo.blob(); // 转化为file格式
	// 调用上传图片接口
	this.$store.dispatch('upload', { file}).then((result: { url: any; }) => {
            success(result.url)
          }).catch(() => {
            failure('上传失败')
          });
}

至此，富文本可以点击上传图片了，但是，目前在点开上传的弹框中的链接网络图片还是没有成功上传到我们自己的服务器上。想要达成这个效果，还需要添加其他配置

3. 上传网图

urlconverter_callback: (url, node, on_save, name) => {
	// 处理网图:根据网图地址获取图片文件
	axios.get(url).then((res) => {
       const imgFile = new File([res.data],'image.png',{type:"image/jpeg"})
       // 将图片上传到自己的服务器上
       this.$store.dispatch('uploadImg', { file:imgFile}).then((result) => {
       this.newImgUrl.push({
         new: result.url,
         old:url
       })
    }).catch((e) => {
       console.log(e);
       that.$notice.danger('上传失败')
    });
  })
  return url
}

这里一定要将上传后的地址用一个数组接一下是因为这个方法是异步的，即使在then里写了返回上传后的地址也是不能等返回后再结束的，会直接返回空，只能先接一下后来保存的时候将网图地址替换。
完整代码如下：

<template>
  <div class="editor">
    <editor v-model="content" :init="init"></editor>
    <div>
      <button class="button" @click="save">
        保存
      </button>
    </div>
  </div>
</template>
<script>
import Tinymce from "@tinymce/tinymce-vue";
import api from '~api'
import axios from 'axios'
export default {
  name: "Editor",
  components: {
    Tinymce
  },
  data() {
    return {
    content: '',
    newImgUrl:[],
init:{
        height: 400,
        width: 1150,
        language: 'zh_CN', // 汉化
        language_url:'/langs/zh_CN.js',
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
        branding: false,// 去掉编辑器右下角的广告
        menubar: false,
        images_upload_handler: function (blobInfo: any,success: Function,failure:Function) {
			const file = blobInfo.blob(); // 转化为file格式
			// 调用上传图片接口
			this.$store.dispatch('upload', { file}).then((result: { url: any; }) => {
	            success(result.url)
	          }).catch(() => {
	            failure('上传失败')
	          });
},
urlconverter_callback: (url, node, on_save, name) => {
	// 处理网图:根据网图地址获取图片文件
	axios.get(url).then((res) => {
       const imgFile = new File([res.data],'image.png',{type:"image/jpeg"})
       // 将图片上传到自己的服务器上
       this.$store.dispatch('uploadImg', { file:imgFile}).then((result) => {
       this.newImgUrl.push({
         new: result.url,
         old:url
       })
    }).catch((e) => {
       console.log(e);
       that.$notice.danger('上传失败')
    });
  })
  return url
}
 }
 };
  },
  method: {
  save() {
      for(let i = 0;i<this.newImgUrl.length;i++){
        this.content = this.content.replace(this.newImgUrl[i].old,this.newImgUrl[i].new)
      }
    }
  }
  

至此，一个功能相对完善的富文本编辑器就引入了