先别忙着拒绝富文本编辑器，用过这款你会惊呼原来还可以这么用！

前言

在web开发中，富文本编辑器是必不可少的，它可以帮助开发者快速、轻松地创建出具有丰富格式的文本内容。目前，市面上有许许多多的富文本编辑器可供选择，但它们大多功能复杂、上手难度大，且需要开发者具有较强的开发经验。

富文本编辑器wangEditor

wangEditor 是一款开源且免费的富文本编辑器，它基于 Vue 3 和 Springboot 开发，具有以下优点：

• 安装简单，无需任何依赖
• 功能强大，支持各种文本编辑操作
• 操作简单，即使新手也能快速上手
• 支持自定义上传资源，方便用户管理自己的资源
• 界面美观，可与各种风格的网站相匹配

使用wangEditor构建富文本编辑器

安装wangEditor非常简单，只需在你的项目中引入以下代码即可：

npm install wang-editor

安装完成后，你就可以在你的代码中使用wangEditor了。创建一个新的Vue组件，并在其中引入wangEditor：

import WangEditor from 'wang-editor'

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new WangEditor('#editor')
    this.editor.create()
  },
  beforeDestroy() {
    this.editor.destroy()
  }
}

在你的HTML模板中，创建一个div元素，并将其id设置为"editor"：

<div id="editor"></div>

现在，你就可以使用wangEditor来编辑文本了。你可以使用各种编辑工具来对文本进行排版、添加图片、链接等。

wangEditor的自定义上传功能

wangEditor支持自定义上传功能，你可以通过设置uploadImgServer和uploadFileName这两个属性来实现。

this.editor.config.uploadImgServer = '/upload'
this.editor.config.uploadFileName = 'file'

其中，/upload是你的上传接口地址，file是上传文件的字段名。

总结

wangEditor是一款功能强大、简单易用的富文本编辑器，它非常适合用于web开发中。如果你正在寻找一款好用的富文本编辑器，那么wangEditor绝对是你的不二之选。

附实战源码

你可以通过以下链接下载wangEditor的前后端实战源码：

wangEditor前后端实战源码下载

结语

我希望这篇文章能帮助你了解并使用wangEditor。如果你有任何问题，请随时在评论区留言。