当前位置：首页 > news >正文

【VUE】16、使用 wangEditor 富文本编辑器

news 2026/5/16 3:03:02

wangEditor 是一款基于 JavaScript 开发的 Web 富文本编辑器，以其开箱即用、配置简单的特点深受开发者喜爱。目前最新版本为 V5，相比之前的版本，V5 进行了彻底的重构，功能更强大，使用更灵活。

1、安装

使用 npm 安装

npminstall@wangeditor/editor--savenpminstall@wangeditor/editor-for-vue--save

使用 yarn 安装

yarnadd@wangeditor/editoryarnadd@wangeditor/editor-for-vue

安装说明：

@wangeditor/editor 是 wangEditor 的核心库，必须安装
@wangeditor/editor-for-vue 是官方提供的 Vue2 组件封装
⚠️ 注意：如果是 Vue3 项目，需要安装 @wangeditor/editor-for-vue3；如果是 React 项目，安装 @wangeditor/editor-for-react

2、基本使用

在 Vue2 组件中使用 Editor 和 Toolbar 组件：

<template><divclass="editor-container"><!-- 工具栏 --><Toolbar:editor="editor":defaultConfig="toolbarConfig"/><!-- 编辑器 --><Editorv-model="content":defaultConfig="editorConfig"@onCreated="handleEditorCreated"/></div></template><script>import{Editor,Toolbar}from'@wangeditor/editor-for-vue'exportdefault{name:'WangEditor',components:{Editor,Toolbar},data(){return{editor:null,content:'<p>请输入内容...</p>',// 工具栏配置toolbarConfig:{excludeKeys:[],// 排除某些菜单},// 编辑器配置editorConfig:{placeholder:'请输入内容...',},}},methods:{handleEditorCreated(editor){this.editor=editor// 保存 editor 实例，供后续操作},},// 组件销毁时也销毁编辑器beforeDestroy(){if(this.editor){this.editor.destroy()}},}</script><stylesrc="@wangeditor/editor/dist/css/style.css"></style>

3、配置图片上传

实际项目中，通常需要配置图片上传功能。wangEditor V5 提供了 customUpload 自定义上传方法：

<script>import{Editor,Toolbar}from'@wangeditor/editor-for-vue'exportdefault{// ... 其他配置data(){return{editorConfig:{placeholder:'请输入内容...',// 自定义上传配置MENU_CONF:{uploadImage:{// 自定义上传customUpload:async(file,insertFn)=>{// file 是选中的文件constformData=newFormData()formData.append('file',file)try{// 调用后端上传接口constres=awaitthis.uploadImageToServer(formData)// 插入图片insertFn(res.data.url,res.data.alt,res.data.href)}catch(error){console.error('上传失败',error)}},},},},}},methods:{asyncuploadImageToServer(formData){// 示例：使用 axios 上传constresponse=awaitaxios.post('/api/upload',formData)returnresponse.data},},}</script>

4、读取和设置内容

// 获取编辑器内容（HTML 格式）consthtml=this.editor.getHtml()// 获取纯文本内容consttext=this.editor.getText()// 设置内容this.editor.setHtml('<p>新内容</p>')

5、常用配置项

// 编辑器配置示例consteditor=newE(domElement)// 设置 z-indexeditor.config.zIndex=100// 设置菜单editor.config.menus=['head',// 标题'bold',// 粗体'italic',// 斜体'underline',// 下划线'image',// 图片'code',// 代码块'table',// 表格]// 设置 onChangeeditor.config.onchange=(html)=>{console.log('变化后的 HTML:',html)}// 设置 onblureditor.config.onblur=(html)=>{console.log('编辑器失焦:',html)}editor.create()

6、封装成组件

封装组件

<!-- WangEditor.vue --><template><divclass="wang-editor"><Toolbarv-if="editor":editor="editor":defaultConfig="toolbarConfig"/><Editorv-model="html":defaultConfig="editorConfig"@onCreated="handleCreated"@onChange="handleChange"/></div></template><script>import{Editor,Toolbar}from'@wangeditor/editor-for-vue'exportdefault{name:'WangEditor',components:{Editor,Toolbar},props:{value:{type:String,default:'',},placeholder:{type:String,default:'请输入内容...',},},data(){return{editor:null,html:this.value,toolbarConfig:{},editorConfig:{placeholder:this.placeholder,},}},watch:{value(newVal){if(newVal!==this.html&&this.editor){this.editor.setHtml(newVal)}},html(newVal){this.$emit('input',newVal)},},methods:{handleCreated(editor){this.editor=editor},handleChange(editor){this.$emit('change',editor.getHtml())},},beforeDestroy(){if(this.editor){this.editor.destroy()}},}</script><stylesrc="@wangeditor/editor/dist/css/style.css"></style>

使用组件

<template><WangEditorv-model="content"placeholder="请输入文章内容"/></template><script>importWangEditorfrom'@/components/WangEditor.vue'exportdefault{components:{WangEditor},data(){return{content:'',}},}</script>