vue中wangEditor的使用及回显数据获取焦点的方法 vue中wangEditor的使用及回显数据

在做后台管理项目时常常会用到富文本编辑器，在这里推荐大家使用wangEditor，非常好用

文章图片

第一步安装

npm i wangeditor --save

第二步在项目中使用
html

页面中的编辑、添加布局在最下面

欢迎使用 wangEditor 富文本编辑器
创建需求编辑

import E from 'wangeditor'// 引入插件const editor = null// 或者 const editor = new E( document.getElementById('div1') )data() { return {dialogForm: {id: null,departmentId: '',systemConfigId: '',title: '',description: '',priorityLevel: '',fileUrl: ''},},},methods: {initEditor() {if (editor) returneditor = new E('#div1')// 自定义菜单配置editor.config.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'image', // 插入图片'table', // 表格'code', // 插入代码'undo', // 撤销'redo' // 重复]editor.config.onchange = (html) => { // 编辑器里的内容console.log(html, '内容')this.dialogForm.description = html // 赋值给自己在data中定义的值}editor.config.customUploadImg = (files, insert) => { // 富文本里的上传图片const param = new FormData()param.append('file', files[0])requireManage.updateOther(param).then((res) => { // 上传图片接口if (res.data) {insert(res.data[0])}})}editor.create() // 创建使用富文本},createData( row, edit) { // 新建或者编辑回显this.dialogVisible = truethis.$nextTick(() => { // 使用 this.$nextTick 获取焦点this.$refs['dialogForm'].resetFields()this.initEditor() // 调用上面写的方法editor.txt.html('') // 清空富文本的内容if (edit) { // 如果是编辑进行下一步this.dialogForm = JSON.parse(JSON.stringify(row)) // 回显的数据this.dialogForm.id = row.ideditor.txt.html(this.dialogForm.description) // 向富文本中插入回显的数据}})}, }

看下面的图片