vue3+wangeditor富文本编辑器详细教程

最新推荐文章于 2025-03-05 18:23:10 发布

花花´◡`

最新推荐文章于 2025-03-05 18:23:10 发布

阅读量2.5k

点赞数 11

文章标签： vue.js 前端 javascript 前端框架富文本编辑器

本文链接：https://blog.csdn.net/2202_75550100/article/details/143188255

版权

一、前言

在这篇教程中，我将指导如何使用 Vue 3 和 WangEditor 创建一个功能丰富的富文本编辑器。WangEditor 是一个轻量级的富文本编辑器，它非常适合集成到 Vue 项目中。这个例子展示了如何配置富文本编辑器，包括工具栏、编辑器配置以及如何处理提交。此外，还将介绍如何在组件销毁时正确销毁编辑器实例，来防止内存泄漏。

二、效果展示

废话不多说直接看效果,文章最后有效果展示的全部代码，有需要的小伙伴可以自取。

三、使用流程和代码讲解

1.安装 WangEditor

npm install @wangeditor/editor --save

2. 导入必需的资源

import { ref, shallowRef, onBeforeUnmount } from 'vue'
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

3.编辑器实例，必须用 shallowRef

const editorRef = shallowRef()

4.记录编辑器创建后的实例

const handleCreated = (editor) => {
  editorRef.value = editor
}

5.工具栏配置（下面是几个常用的工具栏配置）

const toolbarConfig = {
  toolbarKeys: [
    "headerSelect",  // 标题选择
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'delIndent', // 缩进
    'indent', // 增进
    'divider', // 分割线
    'insertTable', // 插入表格
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen', // 全屏
    "blockquote", // 引用
    "codeBlock", // 代码块
    "insertImage", // 插入图片
    "uploadImage", // 上传图片
    "insertVideo", // 插入视频
  ]
}

6.编辑器配置

const editorConfig = {
  placeholder: '请输入内容...', //初始的提示内容
  MENU_CONF: {
    uploadImage: {
      server: 'https://.....',  // 图片上传接口
      fieldName: 'file',  // 上传字段名，根据自己的接口参数配置
    }
  }
}

7.组件销毁时同时销毁编辑器实例防止内存泄漏

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()  // 销毁 editor 实例
})

四、全部代码

<template>
  <div style="border: 1px solid #ccc;min-width: 365px; max-width: 100%; ">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" 
    :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="content" 
    :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
  </div>
  <button @click="submit">提交</button>
</template>

<script setup>
import { ref, reactive, shallowRef, onBeforeUnmount } from 'vue'
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const content = ref('')

const submit = () => {
  console.log(content.value);
} 

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()




// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    "headerSelect",  // 标题选择
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'delIndent', // 缩进
    'indent', // 增进
    'divider', // 分割线
    'insertTable', // 插入表格
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen', // 全屏
    "blockquote", // 引用
    "codeBlock", // 代码块
    "insertImage", // 插入图片
    "uploadImage", // 上传图片
    "insertVideo", // 插入视频
  ]
}


// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: 'https://.....', // 上传接口 URL
      fieldName: 'file', // 图片字段名称
      // meta: {
      //   token: '您的认证token' // 如果需要的话
      // },
    }
  }
}

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


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


</script>

<style lang='scss' scoped>
button{
  margin-top: 20px;
  padding: 2px 5px;
  background-color: #57a3ef;
  border: none;
  color: #fff;
  border-radius: 2px;
}
</style>