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

大家好，我是讯享网，很高兴认识大家。

前言

今天写这篇文章主要是解决如何在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=> { if(child.localName == 'img') { // 获取原图width、height let 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);
                break
            case 'info':
                this.$message.info(s);
                break
            case 'warning':
                this.$message.warning(s);
                break
            case 'error':
                this.$message.error(s)
                break
            default:
                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 } = result
                if (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
    }
}

排版前，如下图

讯享网