TinyMCE 플러그인 : 요소에 툴팁 표시

Question

TinyMCE 편집기의 요소에 HTML 콘텐츠가 포함 된 툴팁을 표시 할 수 있습니까? 추가 콘텐츠로 일부 단어에 주석을 달아야하는 플러그인을 만들고 있는데 관련 단어를 가리키면이 툴팁을 표시하고 싶습니다. 문제는 TinyMCE 문서가 매우 나쁘다는 것입니다. 이 같은

뭔가 : 나는 툴팁에 사용자 정의 HTML 컨텐츠를 포함 할 때문에

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

내가, 기본 HTML 제목 속성을 사용하고 있지 않다.

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