vue中引入富文本编辑器真的很简单吗？？？

种太阳的小菇凉
130 阅读3分钟

背景

使用技术栈：vue3+ts

使用富文本编辑器开源组件：www.wangeditor.com/

版本: v5.1

这篇文章主要记录一下使用这个编辑器的过程，包括编辑器初始化、自定义工具栏以及坑点等。因为并不是像我想象的一样简单，过程中还是遇到了很多问题阻碍了我的开发进度，所以就在此分享下。

如何在vue3中初始化富文本编辑器

  1. 引入wangeditor

    image.png

    对于 editor-for-vue 是否可选安装我是持怀疑态度，我这里如果不安装它，会报找不到editor的情况，所以建议大家将它安装上。

  2. 初始化组件

（1）创建editor.vue文件，引入样式文件以及工具栏和编辑区组件 image.png

1、其中必须要定义的props分别是：editor，defaultConfig。
2、因为我的编辑器使用场景的原因，并不需要很多工具项，因此我这里首先把mode设置为‘simple’。
3、v-model的值是必须要定义，也就是编辑区的内容   
const editorRef = shallowRef()
const valueHtml = ref(props.content)
因为我这里将editor.vue作为一个公共组件，会涉及到内容回显的功能，所以valueHtml初始值就是props.content.(具体回显功能下面说)

（2） 拿到编辑器实例 image.png

正如上面的代码，我们如果想要拿到一个编辑器实例需要在onCreated事件中赋值editorRef。

你以为赋值之后就可以在外部直接拿到实例并且调用api了吗？
NoNoNo......

3. api调用

image.png

1、你是不能直接在外部使用editorRef.value.disable()的 ！！！ 在外部直接使用会报错：disable是undefined，因为没有拿到实例┑(￣Д ￣)┍
2、需要对每个你用到的api自定义方法，而且必须要进行非空判断！！！

这里我找了好久才找到这种写法，真的很奇葩了。起初我以为和正常组件一样，ref可以直接使用，导致我自以为是的调用api，各种报错，心态崩溃。

如何自定义工具栏

即使我设置了mode为simple，工具栏上依然有我用不到的工具（可能给我埋坑的工具😂），我就打算自定义工具栏，这里其实按照文档上实现就可以

image.png

const toolbarConfig = { toolbarKeys: TOOLBAR_KEYS };

这是我配置的工具栏，在满足基本用途的前提下，又可以给我少埋坑，效果就是下面这样

image.png

上传图片和图片回显

  1. 图片上传

    先来看下我的实现

    image.png

     1、上传图片首先必须的就是后端接口，接口需要接收文件并上传到服务器或者cdn上，并且返回给前端图片的地址，接下来就是前端要做的。
 2、customUpload：wangeditor内部的上传图片的方法，它会回调给我们file对象，以及insertFn方法。
 3、file、insertFn：file对象是传给后端接口的，在后端接口返回成功状态后我们调用insertFn方法将图片回显至编辑器中

    image.png

存在的坑点

  1. 版本

（1）wangeditor的版本更新之后，之前的版本就不再更新了，所以大家最好使用最新版本。
（2）在v5找不到的api可以去v4看看，看起来它的文档更新的有问题，最新的文档api并不完整。例如maxlength这个属性我就是在v4的文档中找到的。 （3）版本之间的引入方式不一样，我因为一开始看了v4最后改成v5竟然要推翻重写，很头疼，也是建议大家直接看最新版本。

  1. 安全问题

这里主要是对输入内容的思考，比如一些敏感输入：sql、html、script等可能会被公司级网关拦截，造成http请求401，无法提交输入。

解决办法是：对输入内容进行base64转换，拿到后端返回内容需要进行解析再展示。如果各位大佬有什么更好的解决办法也可以留在评论区。

avatar
文章
阅读
粉丝