javascript - 如何防止Wordpress内置 “browse link”在wp-editor中输入数据

Question

使用 WordPress Meta Box，我使用了 Dale Sattler 的代码从这里How can I use the built in Wordpress “browse link” functionality?要使用可湿性粉剂浏览链接创建自定义字段，它工作正常，但它也将数据插入可湿性粉剂编辑器中。

我尝试使用此处的代码 Use WordPress link insert dialog in metabox? 来阻止默认事件但不起作用，我也尝试了该代码，但它也有一个错误。

这是我的代码

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var link_btn = (function($){
    'use strict';
    var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
    var input_field = '';

    /* PRIVATE METHODS
    -------------------------------------------------------------- */
    //add event listeners

    function _init() {
        $('body').on('click', '.link-btn', function(event) {
            _addLinkListeners();
            _link_sideload = false;

            input_field = $(this).attr('href');
            var link_val_container = $(input_field);

            if ( typeof wpActiveEditor != 'undefined') {
                wpLink.open();
                wpLink.textarea = $(link_val_container);
            } else {
                window.wpActiveEditor = true;
                _link_sideload = true;
                wpLink.open();
                wpLink.textarea = $(link_val_container);
            }
            return false;
        });

    }

    /* LINK EDITOR EVENT HACKS
    -------------------------------------------------------------- */
    function _addLinkListeners() {
        $('body').on('click', '#wp-link-submit', function(event) {
            var linkAtts = wpLink.getAttrs();
            console.log(linkAtts);
            var link_val_container = $(input_field);
            link_val_container.val(linkAtts.href);
            _removeLinkListeners();
            return false;
        });

        $('body').on('click', '#wp-link-cancel', function(event) {
            _removeLinkListeners();
            return false;
        });
    }

    function _removeLinkListeners() {
        if(_link_sideload){
            if ( typeof wpActiveEditor != 'undefined') {
                wpActiveEditor = undefined;
            }
        }

        wpLink.close();
        wpLink.textarea = $('html');//focus on document

        $('body').off('click', '#wp-link-submit');
        $('body').off('click', '#wp-link-cancel');
    }

    /* PUBLIC ACCESSOR METHODS
    -------------------------------------------------------------- */
    return {
        init:       _init,
    };

})(jQuery);

请帮忙，拜托......

Answer 1

好吧，我想我找到了一种从内容中删除链接的方法。在您的提交事件中，您需要添加:

$('body').on('click', '#wp-link-submit', function(event) {
    var linkAtts = wpLink.getAttrs();
    var link_val_container = $(input_field);
    link_val_container.val(linkAtts.href);

    var $frame = $('#content_ifr'),
    $added_links = $frame.contents().find("a[data-mce-href]");

    $added_links.each(function(){
        if ($(this).attr('href') === linkAtts.href) {
            $(this).remove();
        }
    });

    _removeLinkListeners();
    return false;
});

$('#content_ifr') 是加载 tinymce 编辑器及其内容的 iframe。由于iframe是从同一个域加载的，所以你可以搞乱它(幸运的是)。因此，您只需浏览其内容，然后寻找具有名为 mce-href 的数据属性的 anchor ，并且如果您刚刚添加的链接具有与您之前添加的 href 值添加它会删除它们。

我重新执行了这部分代码，因为我注意到我的内容中的所有链接都具有此属性，因此您不能仅删除具有此属性的所有 anchor data-mce-href 属性，因为这会删除所有这些。您只想删除那些已添加到元框中的内容。

这对我有用:)