Vue3+Ts如何安装使用wangEditor富文本编辑器？

最新推荐文章于 2025-06-03 22:00:51 发布

寻梦编码

最新推荐文章于 2025-06-03 22:00:51 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 typescript vue

本文链接：https://blog.csdn.net/weixin_48914380/article/details/128930359

本文详述了在Vue3+Typescript环境下安装和使用wangEditor富文本编辑器的步骤，包括安装、组件引入及CSS样式加载。在实际操作中，可能遇到自定义配置、错误处理等问题，例如方法不能直接写在编辑器属性内，以及wangEditor目录结构缺失。解决方案包括调整方法位置和手动复制缺失文件夹。同时提供了wangEditor相关依赖的码云仓库链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇帖子主要是想介绍一下如何在vue3+ts中安装wangEditor编辑器，其实如何安装引入使用在官网里面已经介绍过。点击可查看vue3使用wangeditor。

主要也是我在实际练习过程中，模仿练习的过程中而碰到的问题。

一，安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

二，vue组件中引入

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
const toolbarC