document.execCommand ('unlink')가 Firefox의 앵커에 대해 작동하지 않습니다.

Question

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); 
    }); 
}); 

Check it out on Fiddle

Answer 1

이 대안이 무엇인지에 대한 질문에 대답하기 위해 당신이 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과 리치 텍스트 에디터에 정통하지는 않지만, 조심스럽고 정확해야하며 테스트 테스트 테스트가 필요하다고 상상해보십시오.

참고로 이는 데모입니다. 당신은 정말로 그것에 대해 생각하고 그 문제를 어떻게 처리 할 것인지 정확히 생각해야합니다. 예를 들어 파이어 폭스가 브라우저 일 경우에만이를 감지하고 실행할 수 있습니다. 이로 인해 예기치 않은 손상이나 결과가 제한 될 수 있습니다. 여기에 편집

그리고

는 선택한 텍스트 범위에 영향을 미치는보다 완벽한 버전입니다 : 그것은 범위를 텍스트에 관해서

$(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

위의 내용을 생각해 내십시오. 다른 사람이 잘못되었거나 일관성이없는 것을 본다면 아래에 의견을 남겨주세요.