【免费可商用】3分钟即可拥有你的专属富文本编辑器（附Vue3+七牛图床实战分享及代码下载）在很多前后端项目开发中，富文本

在很多前后端项目开发中，富文本编辑器都是其中必不可少的工具组件，一个高效、稳定且易扩展的编辑器往往能给项目带来较大好处。

今天给大家推荐的这款富文本编辑器不仅开源，而且完全免费商用到自己的项目中，它就是——WangEditor。

项目亮点

轻量，打包体积更小
兼容性强，兼容主流的 PC 浏览器，如 Chrome Firefox Safari Edge 等
文档全面
简洁易用，功能强大

（注：它不支持IE浏览器）

效果展示

富文本+图床实战

这里的实战分享主要是结合图床服务进行分享，因为在大多数的实际项目中，富文本编辑器都离不开图片内容，而我们又不可能把所有的图片都转成Base64格式存储到数据库中，所以这个时候就需要我们在上传图片到编辑器中的时候，将图片直接上传到图床服务器中，编辑器中显示预览效果即可，这样可以大大提高内容提交效率，同时减轻数据库压力。

1、技术组成

前端：Vue3
富文本编辑器： WangEditor5
图床服务：七牛云

如果你想用其他图床服务也是可以的，同时前期我也分享过千万级项目都在使用的图床服务内容，有兴趣的可以点击下方链接直接查看：

juejin.cn/post/753506…

2.2 项目创建

创建vue项目

这个比较简单，执行以下命令即可按需逐步创建你的项目：

# 创建项目
npm create vue@latest

# 安装依赖库
npm install

# 运行项目
npm run dev

扩展：

1、如果你使用npm比较慢，可以选择使用pnpm以及yarn进行，其他都不变

2、更多vue的使用可以查看官网：cn.vuejs.org/guide/quick…

安装WangEditor

通过以下命令即可快速将WangEditor集成到你的项目中：

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

扩展：

1、WangEditor官网：www.wangeditor.com/

2、Vuew和React文档地址：www.wangeditor.com/v5/for-fram…

安装七牛云

安装七牛云也是非常的简单快捷，运行以下命令即可：

npm install npm install qiniu-js

2.3 集成WangEditor

编写组件

这里编写组件的目的大家应该也清楚，便于项目中任何有需要的页面直接使用，避免重复造轮子，以下就是简单的组件代码：

<!-- WangEditor.vue -->
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  setup(props, { expose }) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
      }, 1500)
    })

    const toolbarConfig = {}
    const editorConfig = {
      placeholder: '请输入内容...'
      },
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    // 添加一个可以直接调用的 getHtml 方法
    const getHtml = () => {
      if (editorRef.value) {
        return editorRef.value.getHtml()
      }
      return ''
    }

    // 暴露方法给父组件
    expose({
      getHtml,
      editorRef,
    })

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      getHtml,
    }
  },
}
</script>

页面使用

<!-- App.vue -->
<script setup lang="ts">
import WangEditor from './components/WangEditor.vue'
import { ref } from 'vue'

// 使用模板引用获取组件实例
const wangEditorRef = ref<any>(null)
const htmlContent = ref<string>('')

// 接收编辑器实例
const handleCreated = (editor: any) => {
  console.log('created', editor)
}

</script>

<template>
  <h1>WangEditor</h1>
  <div style="border: 1px solid #ccc; width: 800px; height: 500px">
    <WangEditor ref="wangEditorRef" @onCreated="handleCreated" />
  </div>
</template>

<style scoped></style>