TinyMCE 插件：在元素上显示工具提示答案

【问题标题】：TinyMCE plugin: show a tooltip on an elementTinyMCE 插件：在元素上显示工具提示
【发布时间】：2018-12-04 10:54:57
【问题描述】：

是否可以在 TinyMCE 编辑器中的元素上显示带有 HTML 内容的工具提示？我正在创建一个插件，它必须用附加内容注释一些单词，并且我想在悬停相关单词时显示这些工具提示。问题是 TinyMCE 文档似乎很糟糕。

类似这样的：

editor.on("click", function(e) {
    editor.showTooltipOnElement(e.target, "<p>Hello, I am a tooltip");
});

我没有使用默认的 HTML 标题属性，因为我想在工具提示中包含自定义 HTML 内容。

【问题讨论】：

标签： tinymce

【解决方案1】：

所以我自己解决了这个问题，虽然有点骇人听闻。我使用 TinyMCE 上下文菜单功能在所选元素上创建上下文菜单，然后用我的自定义 HTML 替换上下文菜单的内容。好处是单击窗口中的任意位置也会再次隐藏菜单。

editor.on("click", function(e) {
    var menu = new tinymce.ui.Menu({
        items: [{
            text: "Some tooltip text"
        }],
        context: "contextmenu",
        onhide: function() { menu.remove(); }
    });

    menu.renderTo(document.body);
    menu.$el.html(htmlGenerator());

    var pos = tinymce.DOM.getPos(editor.getContentAreaContainer());
    var targetPos = editor.dom.getPos(target);
    var root = editor.dom.getRoot();

    if(root.nodeName === "BODY") {
        targetPos.x -= root.ownerDocument.documentElement.scrollLeft || root.scrollLeft;
        targetPos.y -= root.ownerDocument.documentElement.scrollTop || root.scrollTop;
    } else {
        targetPos.x -= root.scrollLeft;
        targetPos.y -= root.scrollTop;
    }

    pos.x += targetPos.x;
    pos.y += targetPos.y;

    menu.moveTo(pos.x, pos.y + target.offsetHeight + 5);
    menu.$el.removeClass("mce-container");
});

【讨论】：

这是一个很好的例子，只需注意要使其成为工具提示，请使用： var tooltip = new tinymce.ui.Tooltip({ text: "some tooltip" });

【解决方案2】：

我在按钮属性上使用tooltip 解决了这个问题：

tinymce.init({ 
...other 
    setup: function(editor)
    {
        editor.addButton('mybutton', {
            type: 'menubutton',
            tooltip: "My custom button",
            icon: 'myicon',
            menu: [
                {
                    text: 'Action_A',
                    onclick: function() {
                        editor.insertContent('&nbsp;{{A}}&nbsp;');
                    }
                },
                {
                    text: 'Action_B',
                    onclick: function() {
                        editor.insertContent('&nbsp;{{B}}&nbsp;');
                    }
                },
            ]
        });
    }
..other 
});

Basic setup

More info

问候

【讨论】：

【解决方案3】：

工具提示的问题是，如果分配给 TinyMCE 内容中的元素，它不会滚动。除非您也在 TinyMCE 内容中移动工具提示并使用“.mce-offscreen-selection”包装器。还有很多工作和可能的错误需要处理。

最简单的解决方案是这样的：

<span data-mytooltip="My Tooltip">This</span> is content in TinyMCE

然后放上CSS样式：

.span[data-mytooltip]{ position:relative; }
.span[data-mytooltip]:before{
      content:attr(data-mytooltip);
      position:absolute;
      top:-15px;background:#ffffcc;color:#000;
  }

你明白了。

【讨论】：