1

我正在使用document.execCommand("unlink", false, false);我自己的 html 编辑器中删除超链接和锚点。它工作正常，除了一种情况：它不会删除 Firefox 中的锚点。Firefox 不支持此功能还是有其他方法可以解决此问题？

这是我的例子：

<div contenteditable="true">This is an <a name="anker">anchor</a>. And this is a <a href="#">normal hyperlink</a>. Please try to select them and then press the "Unlink" button.</div>

<input type="button" id="btn" value="Unlink">

$(document).ready(function() {    
    $('#btn').click(function() {
        document.execCommand("unlink", false, false);
    });
});

在 Fiddle 上查看

4

1 回答 1

4

要回答您关于有哪些替代方案的问题，您可以在调用之前强制解决问题并设置任何a元素的属性：hrefunlink

$(document).ready(function() {    
    var $editable = $('[contenteditable]');

    $('#btn').click(function() {
        $editable.find('a:not([href])').attr('href', '#');
        document.execCommand("unlink", false, false);
    });
});

http://jsfiddle.net/Bz7pR/7/

当然，可能有多种方法可以“解决”这个问题。我$.unwrap()想可能也可以。我不是那么精通document.execCommand和富文本编辑器，但我想你需要小心，精确，并测试测试测试。

注意，这只是一个演示；你真的必须考虑这一点，并准确考虑你将如何处理这个问题。例如，您可以检测并仅在 Firefox 是浏览器时运行它，这将限制您可能遇到的任何意外损害或结果。

编辑

这是一个更完整的版本，仅影响选定的文本范围：

$(document).ready(function() {    
    $('#btn').click(function unlink() {
        var holder,
            frag,
            range,
            child;

        if (window.getSelection && window.getSelection().getRangeAt) {
            holder = document.createElement('div');
            frag = document.createDocumentFragment();
            range = window.getSelection().getRangeAt(0);

            $(holder)
                .append(range.cloneContents())
                .find('a:not([href])')
                .attr('href', '#');

            while ((child = holder.firstChild)) {
                frag.appendChild(child);
            }

            range.deleteContents();
            range.insertNode(frag);
        }

        document.execCommand("unlink", false, false);
    });    
});

http://jsfiddle.net/Bz7pR/12/

在文本范围和选择方面我不是天才，所以我修改了这个答案中的代码：

https://stackoverflow.com/a/6252893/451969

想出上面的内容。如果有人看到错误或不连贯的内容，请在下面给我留言。

于 2012-12-27T10:12:30.597 回答