wangEditor 是一款基于 JavaScript 开发的 Web 富文本编辑器以其开箱即用、配置简单的特点深受开发者喜爱。目前最新版本为 V5相比之前的版本V5 进行了彻底的重构功能更强大使用更灵活。1、安装使用 npm 安装npminstallwangeditor/editor--savenpminstallwangeditor/editor-for-vue--save使用 yarn 安装yarnaddwangeditor/editoryarnaddwangeditor/editor-for-vue安装说明wangeditor/editor 是 wangEditor 的核心库必须安装wangeditor/editor-for-vue 是官方提供的 Vue2 组件封装⚠️ 注意如果是 Vue3 项目需要安装 wangeditor/editor-for-vue3如果是 React 项目安装 wangeditor/editor-for-react2、基本使用在 Vue2 组件中使用 Editor 和 Toolbar 组件templatedivclasseditor-container!-- 工具栏 --Toolbar:editoreditor:defaultConfigtoolbarConfig/!-- 编辑器 --Editorv-modelcontent:defaultConfigeditorConfigonCreatedhandleEditorCreated//div/templatescriptimport{Editor,Toolbar}fromwangeditor/editor-for-vueexportdefault{name:WangEditor,components:{Editor,Toolbar},data(){return{editor:null,content:p请输入内容.../p,// 工具栏配置toolbarConfig:{excludeKeys:[],// 排除某些菜单},// 编辑器配置editorConfig:{placeholder:请输入内容...,},}},methods:{handleEditorCreated(editor){this.editoreditor// 保存 editor 实例供后续操作},},// 组件销毁时也销毁编辑器beforeDestroy(){if(this.editor){this.editor.destroy()}},}/scriptstylesrcwangeditor/editor/dist/css/style.css/style3、配置图片上传实际项目中通常需要配置图片上传功能。wangEditor V5 提供了 customUpload 自定义上传方法scriptimport{Editor,Toolbar}fromwangeditor/editor-for-vueexportdefault{// ... 其他配置data(){return{editorConfig:{placeholder:请输入内容...,// 自定义上传配置MENU_CONF:{uploadImage:{// 自定义上传customUpload:async(file,insertFn){// file 是选中的文件constformDatanewFormData()formData.append(file,file)try{// 调用后端上传接口constresawaitthis.uploadImageToServer(formData)// 插入图片insertFn(res.data.url,res.data.alt,res.data.href)}catch(error){console.error(上传失败,error)}},},},},}},methods:{asyncuploadImageToServer(formData){// 示例使用 axios 上传constresponseawaitaxios.post(/api/upload,formData)returnresponse.data},},}/script4、读取和设置内容// 获取编辑器内容HTML 格式consthtmlthis.editor.getHtml()// 获取纯文本内容consttextthis.editor.getText()// 设置内容this.editor.setHtml(p新内容/p)5、常用配置项// 编辑器配置示例consteditornewE(domElement)// 设置 z-indexeditor.config.zIndex100// 设置菜单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 --templatedivclasswang-editorToolbarv-ifeditor:editoreditor:defaultConfigtoolbarConfig/Editorv-modelhtml:defaultConfigeditorConfigonCreatedhandleCreatedonChangehandleChange//div/templatescriptimport{Editor,Toolbar}fromwangeditor/editor-for-vueexportdefault{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.htmlthis.editor){this.editor.setHtml(newVal)}},html(newVal){this.$emit(input,newVal)},},methods:{handleCreated(editor){this.editoreditor},handleChange(editor){this.$emit(change,editor.getHtml())},},beforeDestroy(){if(this.editor){this.editor.destroy()}},}/scriptstylesrcwangeditor/editor/dist/css/style.css/style使用组件templateWangEditorv-modelcontentplaceholder请输入文章内容//templatescriptimportWangEditorfrom/components/WangEditor.vueexportdefault{components:{WangEditor},data(){return{content:,}},}/script如您在阅读中发现不足欢迎留言