如何添加「按照鏈接彈出」到TinyMCE的4

Question

我實現somethink像這樣的畫面：

，如果你點擊一個鏈接彈出將出現，您可以點擊此鏈接。

Answer 1

jQuery(function($){ 
/** 
* add the follow link popup to all TinyMCE instances 
*/ 
if (!window.tinymce) return; 

tinymce.on('AddEditor', function(event) { 

    tinymce.editors.forEach(function(editor) { 
     if (!editor.isFollowLinkAdded) { 
      editor.isFollowLinkAdded = true; 

      editor.on('blur', function(e) { 
       jQuery(e.target.contentDocument.body).find('#followLink').remove(); 
      }); 


      editor.on('click', function(e) { 
       var link = jQuery(e.target).closest('a'); 
       jQuery(e.view.document.body).find('#followLink').remove(); 

       if (link.length) { 
        e.preventDefault(); 
        var POPUP_WIDTH = 215, 
         isRightSide = (jQuery(e.view.document).width()-e.pageX) >= POPUP_WIDTH, 
         boxCss = { 
          top: e.pageY, 
          padding: '6px 10px', 
          position: 'absolute', 
          backgroundColor: '#ffffff', 
          border: '1px solid #a8a8a8', 
          borderRadius: '2px', 
          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)', 
          color: '#666666', 
          cursor: 'pointer', 
          whiteSpace: 'nowrap', 
          zIndex: 502 
        }; 
        boxCss[(isRightSide) ? 'left' : 'right'] = (isRightSide) ? e.pageX : jQuery(e.view.document).width()-e.pageX; 

        jQuery('<a/>', { 
         href: link.attr('href'), 
         text: link.attr('href'), 
         target: '_blank' 
        }).css({ 
         cursor: 'pointer', 
         display: 'inline-block', 
         maxWidth: '100px', 
         overflow: 'hidden', 
         textOverflow: 'ellipsis', 
         whiteSpace: 'nowrap' 
        }).wrap(
         jQuery('<p/>', { 
          text: 'Click to follow: ', 
          id: 'followLink', 
         }).on('click', function(){ 
          var win = window.open(link.attr('href'), '_blank'); 
          win.focus(); 
         }).css(boxCss) 
        ).parent().appendTo(e.view.document.body); 
       } 
      }); 
     } 
    }); 

    }, true); 

}）;

Answer 2

最新版本的TinyMCE 4（4.5.3）包括在編輯器的右鍵菜單中打開鏈接的選項 - 無需編寫自己的自定義代碼。