如何在富文本编辑器中实现自定义一键排版功能

前言

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

---

1、新建独立文件wLayoutMenu.js

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

/**
 * @module wLayoutMenu 一键排版的按钮
 * @author cy
 * @date 2021/03/29
 * @description 自定义一个一键排版的功能
 */
// 引入 wangEditor
import 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() {
        // 获取富文本编辑区的DOM
        let 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=> {
                        i