Question

我在这张图片上实现了一些想法：

如果您点击链接弹出窗口，则可以显示该链接。

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）包括在编辑器的右键菜单中打开链接的选项 - 无需编写自己的自定义代码。

如何添加＆＃34;按照链接弹出＆＃34;进入TinyMCE 4

2 个答案: