vue 中 wangeditor 格式刷功能

去年我剛到公司的時候，旁邊同事問我wangeditor怎么實現格式刷功能，我找了很多資料勉勉強強實現了一個，一直想寫個文章記錄下，拖到現在才寫，真是老了呢。

新建一個js文件，暫且命名為formatBrush.js，直接上代碼:

// 參考資料
// https://www.jianshu.com/p/13dca2711b6e
// https://juejin.cn/post/6844903737161433102

import wangEditor from "wangeditor";

const { BtnMenu } = wangEditor;
// 第一，菜單 class ，Button 菜單繼承 BtnMenu class
class FormatBrushMenu extends BtnMenu {
    constructor(editor) {
        // data-title屬性表示當鼠標懸停在該按鈕上時提示該按鈕的功能簡述
        // 圖表直接用的element-ui的圖標，請自行調整
        const $elem = wangEditor.$(
            `<div class="w-e-menu el-icon-s-open" data-title="格式刷">
            </div>`
        );
        super($elem, editor);
        const me = this;
        me.editor = editor;
        // 監聽編輯器鼠標釋放事件
        editor.$textElem.on("mouseup", () => {
            // 如果格式刷功能出於激活狀態
            if (me._active) {
                // 延遲執行,避免獲取不到正確的元素
                setTimeout(() => {
                    // 復制格式刷樣式
                    pasteStyle(editor);
                    // 取消格式刷激活樣式
                    me.unActive();
                }, 100);
            }
        });
    }
    // 菜單點擊事件
    clickHandler() {
        const me = this;
        const editor = me.editor;
        if (me._active) {
            // 已經在激活狀態時取消激活
            me.unActive();
            // 清空格式刷樣式數據
            editor.copyStyleList = []
        } else {
            // 沒有選中則終端
            if (editor.selection.isSelectionEmpty()) return;
            // 激活按鈕
            me.active();
            // 獲取格式刷樣式
            const domToParse =
                editor.selection.getSelectionContainerElem().elems[0];
            const copyStyleList = parseDom(domToParse);
            // 保存格式刷樣式
            editor.copyStyleList = copyStyleList;
        }
    }
    tryChangeActive() { }
}

// 菜單 key ，各個菜單不能重復
const menuKey = "formatBrush";

// 注冊菜單
wangEditor.registerMenu(menuKey, FormatBrushMenu);

// 復制選中dom的樣式
function parseDom(dom) {
    let targetDom = null;
    const nodeArray = [];

    getTargetDom(dom);

    getAllStyle(targetDom);

    function getTargetDom(dom) {
        for (const i of dom.childNodes) {
            if (i.nodeType === 3 && i.nodeValue && i.nodeValue.trim() !== "") {
                targetDom = dom;
                return;
            }
        }
        getTargetDom(dom.children[0]);
    }

    function getAllStyle(dom) {
        if (!dom) return;
        const tagName = dom.tagName.toLowerCase();
        if (tagName === "p") {
            nodeArray.push({
                tagName: "span",
                attributes: Array.from(dom.attributes).map((i) => {
                    return {
                        name: i.name,
                        value: i.value
                    };
                })
            });
            return;
        } else {
            nodeArray.push({
                tagName: tagName,
                attributes: Array.from(dom.attributes).map((i) => {
                    return {
                        name: i.name,
                        value: i.value
                    };
                })
            });
            getAllStyle(dom.parentNode);
        }
    }
    return nodeArray;
}

function addStyle(text, nodeArray) {
    let currentNode = null;
    nodeArray.forEach((ele, index) => {
        const node = document.createElement(ele.tagName);
        for (const attr of ele.attributes) {
            node.setAttribute(attr.name, attr.value);
        }
        if (index === 0) {
            node.innerText = text;
            currentNode = node;
        } else {
            node.appendChild(currentNode);
            currentNode = node;
        }
    });
    return currentNode;
}

// 粘貼
function pasteStyle(editor) {
    // 獲取格式刷保存的樣式
    const copyStyleList = editor.copyStyleList;
    // 有樣式說明格式刷被激活
    if (copyStyleList) {
        // 獲取當前選中內容
        // 如果沒選中也會執行，再次使用需要重新激活格式刷功能
        const text = editor.selection.getSelectionText();
        const targetDom = addStyle(text, copyStyleList);
        editor.cmd.do("insertHTML", targetDom.outerHTML);
        // 清空格式刷樣式
        editor.copyStyleList = null;
    }
}

 

vue組件代碼如下，基於ts（沒用ts的自己改改吧，話說vue3這種寫法就不行了呀，組合式api還是好用）：

<template>
    <div class="editor-el">
        <div></div>
        <el-input v-show="false" v-model="value"></el-input>
    </div>
</template>

<script lang="ts">
// 引入 wangEditor
import wangEditor from "wangeditor";
import { Component, Vue, Model, Emit, Watch } from "vue-property-decorator";
import "./formatBrush";
@Component({})
export default class servicesNoticeEdit extends Vue {
    // v-model綁定值
    @Model("valuechange", { type: String }) value!: String;
    @Emit("valuechange") setValue() {}

    @Watch("value", { immediate: true }) updateValue(v: string) {
        if (v) {
            const me = this as any;
            if (me.isUp) {
                // 這里通過標識符避免重復觸發事件
                me.isUp = false;
            } else {
                me.$nextTick(() => {
                    // 重新設置編輯器內容
                    me.editor.txt.html(v);
                });
            }
        }
    }
    editor: any = null;
    // 標識是否正在設置數據，避免重復觸發事件
    isUp: Boolean = false;
    mounted() {
        const me = this as any,
            // eslint-disable-next-line new-cap
            editor = new wangEditor(me.$el.firstChild) as any;
        // zIndex配置小點，避免影響其他組件
        editor.config.zIndex = 100;
        // 配置 onchange 回調函數，將數據同步到 vue 中
        editor.config.onchange = (newHtml: string) => {
            me.isUp = true;
            me.setValue(newHtml);
        };

        // 創建編輯器
        editor.create();
        me.editor = editor;
    }
    beforeDestroy() {
        // 調用銷毀 API 對當前編輯器實例進行銷毀
        this.editor.destroy();
        this.editor = null;
    }
}
</script>
<style scoped lang="scss">
::v-deep.editor-el {
    // 格式刷功能激活圖標樣式
    .w-e-menu.w-e-active {
        color: red;
    }
}
</style>

效果大概是這樣