document.execCommand（'unlink'）不適用於Firefox中的錨點

我使用document.execCommand("unlink", false, false);來刪除我自己的html編輯器中的超鏈接和錨點。它在一種情況下工作正常：它不會刪除Firefox中的錨。這不是在Firefox中支持，還是有另一種解決方法？document.execCommand（'unlink'）不適用於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); 
    }); 
});

Check it out on Fiddle

來源

2012-12-27 vso

技術上，如果沒有'href'，它是一個鏈接嗎？ –

爲什麼在''元素中仍然有'onclick'處理程序？它做了不同的事情還是隻是多餘的？無論如何，它不被認爲是好的風格，更好的是隻使用jQuery綁定事件處理程序。 – wnstnsmth

對不起，這只是多餘的......我忘了刪除它，但現在它消失了。 – vso

要回答你什麼替代品有問題，你可以調用unlink之前生效的問題，並設置任何a元素的href屬性：

$(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-27 10:12:30

這是一個不錯的主意！現在只有一件事要考慮。我想只刪除用戶選擇內的錨點。你建議的解決方案提供了這個，但作爲一個小副作用，這個div內的所有錨都獲得了href屬性。是否有可能不更改未選中文本的代碼？不幸的是，通過jQuery來處理選定的文本並不是那麼簡單（只編輯包含的元素）。 http://jsfiddle.net/Bz7pR/8/ – vso

@vso - 查看我的編輯。不太確定它是否可以用於多種選擇。以上內容適用於IE，Firefox和Chrome，但由於某些原因，不適用於Opera。 –

非常感謝！最後一個工作正常，並且正是我所需要的 - 與僅在Firefox中執行的瀏覽器檢測相結合。 – vso

document.execCommand（'unlink'）不適用於Firefox中的錨點

回答

相關問題