AngularJS를 사용하여 굵게 언볼로그 기능을 구현하는 방법

Question

일부 클라이언트 측 텍스트 서식 기능을 구현하려고합니다. 다른 편집기와 마찬가지로. 기본적으로 사용자가 텍스트를 선택하고 굵은 글씨를 클릭하면 텍스트를 굵게 표시해야하고 동일한 텍스트를 다시 선택하고 굵게를 클릭해야합니다. 그것을 펼쳐 야합니다. jQuery 랩 및 언 랩핑 기능을 사용하여이 기능을 구현할 수 있습니다.

내가 가지고있는 문제는 사용자가 이미 주위에 굵은 태그가있는 무언가의 부분 문자열 인 텍스트를 선택하는 경우입니다. 예를 들어 <b>Some text "I am the selection" some text</b>이 경우 버튼을 클릭하면 "나는 선택입니다"를 굵게 표시하고 텍스트는 굵게 표시해야합니다. 이 프로젝트는 angularJS를 기반으로합니다.

질문 : 이 문제를 해결하는 가장 좋은 방법은 무엇입니까? (내 마지막 옵션은 텍스트를 문자열로 처리하고 실제로 그것을 피하려고하는 수동 바꾸기입니다.) 다양한 각도로 작업 할 수 있습니까? 좋은 플러그인 (이미 프로젝트에 가서 내 자신을 만든 때문에 난 그냥 기능을하려면, 전체 도구 모음을 원하지 않는)

http://plnkr.co/edit/KmVBjOeUps302NrdV89k?p=catalogue

Answer 1

당신이해야한다고 생각 그냥이 기능을 거기에

function getSelectedText() { 
    if (window.getSelection) { 
     return window.getSelection(); 
    } 
    else if (document.selection) { 
     return document.selection.createRange().text; 
    } 
    return ''; 
} 
$(document).ready(function(){ 
    $("#button").click(function(){ 
     var myObj = $('#highlight'); 
     myObj.html(myObj.html().replace(getSelectedText(), 
      '<b>'+getSelectedText()+'</b>') 
     ); 
    }); 
}); 

여기서 #highlight는 선택할 단락의 ID입니다. 이것은 단지 영역을 대담하게 할 것이고, 나는 당신에게 언 프레임을 남길 것이다;)