前言

今天写这篇文章主要是解决如何在vue中使用富文本编辑器进行新增一个自定义菜单，通过富文本上传的图片实现一键排版功能使图片默认样式居中定宽处理，文字首行缩进等功能，从源头上杜绝门户网站上显示用户编写、复制等文章图片排版错乱等问题；

1、新建独立文件wLayoutMenu.js

首先新建一个独立的文件wLayoutMenu.js，在文件内编写如下代码内容

/*** @module wLayoutMenu 一键排版的按钮* @author cy* @date /03/29* @description 自定义一个一键排版的功能*/// 引入 wangEditorimport E from "wangeditor";const { $, BtnMenu } = E;// 设置默认样式const initPStyle = "text-indent: 2em; margin: 0; font-size: 1em; font-weight: normal; color: #000";export default class wLayoutMenu extends BtnMenu {constructor(editor) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = $(`<div class="w-e-menu" data-title="一键排版"><i class="el-icon-s-help"></i></div>`);super($elem, editor);}clickHandler() {// 获取富文本编辑区的DOMlet childDoms = this.editor.$textElem.elems[0].childNodes;if (childDoms.length > 0) {childDoms.forEach(item => {// 富文本编辑的内容默认外层都是由p标签包容，所以直接在p标签上进行设置默认排版的样式if(item.nodeName == 'P') {item.style.cssText = initPStyle;}if(item.childNodes.length>0) {// 遍历找到子元素中存在img标签的内容进行设置默认样式item.childNodes.forEach(child=> {if(child.localName == 'img') {// 获取原图width、heightlet width = child.width;let height = child.height;let ratio = width / height;let setW = 600;let setH = 0; // 等比计算if (setW / setH != ratio) {setH = setW / ratio;}// 给img标签设置行内样式child.setAttribute('width', setW);child.setAttribute('height', setH);child.style.cssText = "text-align: center";}})}})}}// 菜单是否被激活（如果不需要，这个函数可以空着）tryChangeActive() {}}

2、新建一个wangeditor组件

在其中引入上面的wLayoutMenu.js文件，并编写如下代码

import E from 'wangeditor';import { getToken } from "@/utils/auth";import wLayoutMenu from "@/utils/wLayoutMenu";export default {name: 'editor',props: {content: {require: true,type: String,default: ''}},data() {return {editor: null}},watch:{content: function (newVal,oldval) {console.log(newVal,oldval)this.editor.txt.html(newVal)}},mounted() {this.editor = new E(this.$refs.editor); // 实例化富文本编辑器this.editor.config.height = 750 // 设置编辑区域高度为 750px// 注册菜单this.editor.menus.extend('shortcutLayout', wLayoutMenu)// 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档 this.editor.config.menus = this.editor.config.menus.concat('shortcutLayout')this.editor.config.zIndex = 500; // 设置editor的层级// 子传父实时输入数据this.editor.config.onchange = html => {this.$emit('editorChange', html);};// 配置element ui message提示this.editor.config.customAlert = (s, t) => {switch (t) {case 'success':this.$message.success(s);breakcase 'info':this.$message.info(s);breakcase 'warning':this.$message.warning(s);breakcase 'error':this.$message.error(s)breakdefault:this.$message.info(s);break}}// 配置上传图片服务端接口this.editor.config.uploadImgServer = _this.getBaseApi()+"/api/site/file/upload";this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024;this.editor.config.uploadImgMaxLength = 1;this.editor.config.uploadFileName = 'file' // formdata中的name属性this.editor.config.uploadImgHeaders = {Authorization: "Bearer " + getToken() // 设置请求头}this.editor.config.uploadImgHooks = {// 图片上传并返回结果，但图片插入错误时触发fail: function (xhr, editor, result) {console.log('error',result)},success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发console.log(result, 'success')debugger;},customInsert: function (insertImgFn, result) {// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）// insertImgFn 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：const { code, msg, data } = resultif (code == 200) {var url = data.fileUrl;insertImgFn(_this.getBaseApi()+ url)// result 必须是一个 JSON 格式字符串！！！否则报错setTimeout(() => {// 图片上传完成就默认一个样式let img = document.querySelector('.w-e-text-container img[src="'+_this.getBaseApi()+url+'"]');let parentDom = img.parentNode;let width = img.width;let height = img.height;let ratio = width / height;let setW = 600;let setH = 0; // 等比计算if (setW / setH != ratio) {setH = setW / ratio;}img.setAttribute('width', setW);img.setAttribute('height', setH);parentDom.style.cssText = "text-align: center";}, 100);} else {_this.$message.warning(msg)}}}this.editor.create(); // 创建富文本编辑器this.editor.txt.html(this.content); // 初始化默认内容},methods: {/*** 清空内容*/clearContent() {this.editor.txt.clear();}},beforeDestroy() {// 销毁编辑器this.editor.destroy()this.editor = null}}

排版前，如下图

一键排版后效果图如下