wangEditor自定义tooltip，v4版本

前言

前几天，接到一个需求，需要在富文本里面，给图片添加链接，刚好wangEditor的tooltip可以满足这个需求，于是去翻了文档，得到的结果, 文档让我看源码，然后点开他的源码链接，404.....给我整无语..............当时去百度，竟然没有能复制粘贴的代码！！！说好的搬砖呢，于是经过一番研究，其文档的思路大概是，复制粘贴他的源码，然后在他实例化后调用，最重要的是，需要清空他自带的tooptip，不然触发的时候，会有两个tooptip ，下面的代码复制就可以用了，我已经为大家踩过坑了，请放心复制！

// 清空自带的tooltip
editor.txt.eventHooks.imgClickEvents = []

代码示例

新建js文件tooltip，import这个文件后，在create()后面调用即可

// XXX.vue
import bindTooltipEvent from "@/packages/PageEdit/tooltip";

// methods 函数
this.editor.create()
bindTooltipEvent(this.editor)

// tooltip.js
import E from "wangeditor";

const {$, Tooltip} = E

function createShowHideFn(editor) {
    let tooltip
    const t = (text, prefix = '') => {
        return prefix + text
    }

    function showImgTooltip($node) {
        const conf = [
            {
                $elem: $("<span class='w-e-icon-trash-o'></span>"),
                onClick: (editor, $node) => {
                    // 选中img元素
                    editor.selection.createRangeByElem($node)
                    editor.selection.restoreSelection()
                    editor.cmd.do('delete')
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>30%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '30%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>50%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '50%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>100%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '100%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
        ]

        conf.push({
            $elem: $(`<span>${t('重置')}</span>`),
            onClick: (editor, $node) => {
                $node.removeAttr('width')
                $node.removeAttr('height')

                // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                return true
            },
        }, {
            $elem: $(`<span>添加链接</span>`),
            onClick: (editor, $node) => {
                editor.Vue.$emit('addLink', $node)
                // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                return true
            },
        })

        if ($node.attr('data-href')) {
            conf.push({
                $elem: $(`<span>${'查看链接'}</span>`),
                onClick: (editor, $node) => {
                    let link = $node.attr('data-href')
                    if (link) {
                        link = decodeURIComponent(link)
                        window.open(link, '_target')
                    }
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            })
        }

        if ($node.attr('data-url')) {
            conf.push({
                $elem: $(`<span>${'重置链接'}</span>`),
                onClick: (editor, $node) => {
                    // let link = $node.attr('data-href')
                    // if (link) {
                    //     link = decodeURIComponent(link)
                    //     window.open(link, '_target')
                    // }
                    $node.removeAttr('data-url')
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            })
        }

        tooltip = new Tooltip(editor, $node, conf)
        tooltip.create()
    }

    /**
     * 隐藏 tooltip
     */
    function hideImgTooltip() {
        // 移除 tooltip
        if (tooltip) {
            tooltip.remove()
            tooltip = null
        }
    }

    return {
        showImgTooltip,
        hideImgTooltip,
    }
}

/**
 * 绑定 tooltip 事件
 * @param editor 编辑器实例
 */
export default function bindTooltipEvent(editor) {
    const {showImgTooltip, hideImgTooltip} = createShowHideFn(editor)
    // 点击图片元素是，显示 tooltip
    editor.txt.eventHooks.imgClickEvents = []
    editor.txt.eventHooks.imgClickEvents.push(showImgTooltip)

    // 点击其他地方，或者滚动时，隐藏 tooltip
    editor.txt.eventHooks.clickEvents.push(hideImgTooltip)
    editor.txt.eventHooks.keyupEvents.push(hideImgTooltip)
    editor.txt.eventHooks.toolbarClickEvents.push(hideImgTooltip)
    editor.txt.eventHooks.menuClickEvents.push(hideImgTooltip)
    editor.txt.eventHooks.textScrollEvents.push(hideImgTooltip)
    editor.txt.eventHooks.imgDragBarMouseDownEvents.push(hideImgTooltip)

    // change 时隐藏
    editor.txt.eventHooks.changeEvents.push(hideImgTooltip)
}