TinyMCEプラグイン：要素にツールチップを表示

Question

TinyMCEエディタの要素にHTMLコンテンツのツールチップを表示することは可能ですか？私は追加のコンテンツをいくつかの単語に注釈を付けなければならないプラグインを作成しており、関連する単語をホバリングするときにこれらのツールチップを表示したい。問題は、TinyMCEのドキュメントが非常に悪いと思われることです。

このような何か：

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

私がツールチップにカスタムHTMLコンテンツを含めたいので、私は、デフォルトのHTMLのtitle属性を使用していません。

Answer 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"); 
});