封装一个富文本，即用即飞~

前言

常网IT戳我呀！
常网IT源码上线啦！
本篇录入技术选型专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

当你在背单词的时候，阿拉斯加的鳕鱼正跃出水面；

当你算数学时，南太平洋的海鸥正掠过海岸；

当你晚自习时，地球的极圈正五彩斑斓；

但是年轻人，梦要你亲自实现，世界你要亲自去看。

2024年跨年香港拍下的烟花~

文章末有源代码，没时间的同学可以往下看看~~~

一、问题剖析

那是一个倾盆大雨的早上，花瓣随风雨落在我的肩膀上，是五颜六色的花朵。

我轻轻抚摸着他，随后拨开第一朵花瓣，她不爱我。

拨开第二朵，她爱我。

正当我沉迷于甜蜜的幻想中，产品小白🙋喊道：明天做个富文本应该OKK的吧！

🙋🏻‍♂️那是自然，有什么功能是我大前端做不了的，必须得让你们大开眼界。

二、富文本的选择

虽然接的时候回答得特别快，但此时要冷静下来，市面上的富文本插件也是蛮多的，哪个才是又好又符合我们的场景。

不是说，你会用A技术，就习惯用A技术；具体情况具体分析，得看看业务上的需求，技术服务于产品。

细心的我帮各位总结了一下：

TinyMCE： 提供了广泛的功能和可定制选项，适用于需要高度定制化的项目。
CKEditor： 一个功能强大且灵活的富文本编辑器，支持大量的插件和主题，适用于需要复杂编辑需求的项目。
Quill： 专注于简洁性和易用性，同时具有可扩展的插件系统，适用于注重用户体验的项目。
Draft.js： 由Facebook开发的富文本编辑器框架，适用于需要构建高度自定义编辑器的项目。
Froala Editor： 具有现代化界面和丰富的插件生态系统，适用于需要快速集成和丰富功能的项目。
Summernote： 轻量级但功能丰富的富文本编辑器，适用于对页面加载速度有要求的项目。

不好意思，以上都不想选，今天的主角是wangeditor，相比于其他，它有的特点：

简洁易用： WangEditor 设计简洁，易于上手和集成到项目中。用户界面清晰明了，操作简单直观。
功能丰富： 尽管 WangEditor 简洁，但功能齐全，支持常见的文本编辑功能，如加粗、斜体、插入链接、插入图片等。
定制性强： WangEditor 提供了丰富的配置项和扩展接口，可以根据项目需求进行灵活的定制和扩展，满足个性化的编辑器需求。
轻量高效： WangEditor 采用了精简的代码设计，保持了较高的性能表现，适合对页面加载速度有要求的项目。
社区支持： WangEditor 拥有活跃的开发者社区和文档支持，用户可以方便地获取帮助和解决问题。

主要是他比较轻量，产品对编辑器功能要求不是特别复杂。

来吧，展示。

三、使用

文档

文档地址：www.wangeditor.com/v5/installa...

文档地址VUE2：www.wangeditor.com/v5/for-fram...

安装

javascript 复制代码

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

Toolbar和Editor组件

引入这两个组件：

javascript 复制代码

import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

使用

javascript 复制代码

<Toolbar
    :editor="editor"
    :defaultConfig="toolbarConfig"
    :mode="mode"/>
<Editor
    v-model="html"
    :defaultConfig="editorConfig"
    :mode="mode"
    @onChange="onChange"
    @onCreated="onCreated"/>

主要是defaultConfig这个属性

工具栏配置

javascript 复制代码

toolbarConfig: {
  // 不显示哪些工具按钮
  excludeKeys: ['fullScreen', 'emotion', 'codeBlock', 'todo', 'code']
}

编辑器配置

javascript 复制代码

editorConfig: {
  placeholder: '请输入内容...',
  readOnly: false, // 是否只读
  autoFocus: false, // 默认是否 focus
}

当然，编辑器会有change事件，可以拿到改变后的内容。

效果

到这里，简单的富文本就渲染成功了，以下介绍一下图片附件上传。

四、需求升级：图片上传

图片上传，上传到我们自己的服务器内，则需要我们自己去对接。

在编辑器配置中进行配置：

在editorConfig的MENU_CONF对象中添加uploadImage对象。

主要有几个属性介绍一下：

server：我们的上传图片的接口url
headers：我们接口的请求头，一般添加token
customInsert：函数是我们调用接口成功回调的函数，需要返回url，alt才会在富文本中回显

javascript 复制代码

uploadImage: {
  fieldName: 'file',
  server: this.uploadURL,
  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 10 * 1024 * 1024, // 1M
  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 50,
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ['image/*'],
  // 自定义增加 http  header
  headers: {
      'TOKEN': this.$store.getters.token,
  }, 
  // 跨域是否传递 cookie ，默认为 false
  // withCredentials: true,
  // 超时时间，默认为 10 秒
  timeout: 30 * 1000, // 30 秒

  customInsert: (res, insertFn) => {  // TS 语法
      let {url, alt, href} = res  // res是我们上面调用接口返回的
      insertFn(url, alt, href)
  },
},

视频上传

当然，视频的操作也会图片上传的类似。

在编辑器配置中进行配置：

在editorConfig的MENU_CONF对象中添加uploadVideo对象。

javascript 复制代码

uploadVideo: {
    fieldName: 'file',
    server: this.uploadURL,
    // 单个文件的最大体积限制，默认为 10M
    maxFileSize: 5 * 1024 * 1024, // 5M
    // 最多可上传几个文件，默认为 5
    maxNumberOfFiles: 3,
    // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['video/*'],
    // 自定义增加 http  header
    headers: {
        'TOKEN': this.$store.getters.token,
    },
    // 跨域是否传递 cookie ，默认为 false
    // withCredentials: true,
    // 超时时间，默认为 30 秒
    timeout: 15 * 1000, // 15 秒
    customInsert: (res, insertFn) => {  // TS 语法
      let {url, alt, href} = res  // res是我们上面调用接口返回的
      insertFn(url, alt, href)
    }
}

五、难度提升

wangeditor的defaultConfig的MENU_CONF的uploadImage，上面例子还是比较简单的。

如果我是需要先调用A接口返回一个链接，在调B接口上传文件。

也就是我们需要调用多次接口才能完成上传这个操作。

在我山重水复疑无路的时候，我看到文档有customUpload这么一个自定义的上传函数，顿时柳暗花明又一村啊。

如果你不想使用 wangEditor 自带的上传功能，可以通过 customUpload 来自定义上传。

javascript 复制代码

editorConfig.MENU_CONF['uploadImage'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
        // file 即选中的文件
      const a = await A接口();
      const b = await B接口(file, a)
      let {url, alt, href} = b
      // 自己实现上传，并得到图片 url alt href
      // 最后插入图片
        insertFn(url, alt, href)
    }
}

nice~

六、封装OK，即用即爽

当然，贴心的我已经为大家封装成一个组件，即用即爽~

github链接：github.com/git-Dignity...

调用：

javascript 复制代码

<Wangeditor
  ref="wEditor"
  :uploadURL="uploadURL"
  :infoShowImage="infoShowImage"
  :infoShowVideo="infoShowVideo"
  @richChange="richChange"
/>

// 初始化的时候
showDialog({disable, html}){
  this.$nextTick(()=>{
    this.$refs.wEditor.setHtml(html || '')	// 设置内容
    this.$refs.wEditor.disable(disable)
  })
},

// 提交
submit() {
  let html = this.$refs.wEditor.getHtml()	// 获取html内容
  this.$emit("submit", html, );
},
  
infoShowImage(res) {
    return new Promise((resolve,reject) => {
      if(res.code !== 200){
        this.$message.warning(res.message)
        resolve(false)
      }else{
        resolve({
          url:  res.data[0].fileName,
          alt: res.data[0].name,
          href:  res.data[0].fileName
        })
      }
    })
  }