커서를 움직이지 않고 특정 텍스트 주변의 태그를 contenteditable에 배치하십시오.

Question

저는 간단한 워드 프로세서로 작업하고 있습니다. 그것은 contenteditable를 사용합니다. 항상 강조 표시하고 싶은 단어 목록이 있습니다.

<article contenteditable="true" class="content"> 
    <p>Once upon a time, there were a couple of paragraphs. Some things were <b>bold</b>, and other things were <i>italic.</i></p> 
    <p>Then down here there was the word highlight. It should have a different color background.</p> 
</article> 

기본적으로 내가 필요한 것은 <span> 태그에 단어를 포함하는 것입니다. 이것은 내가 예상했던 것보다 더 어려운 것으로 입증되었습니다. 여기

내가 먼저 시도 무엇 이었습니까 :

var text = document.querySelector('article.content').innerHTML 
    start = text.indexOf("highlight"), 
    end = start + "highlight".length; 
text = text.splice(end, 0, "</span>"); 
text = text.splice(start, 0, "<span>"); 
document.querySelector('article.content').innerHTML = text; 

는 그것은 splice 방법은 here을 발견 사용합니다.

그리고 내가해야 할 일은 큰 문제입니다. 커서가 움직입니다. 모든 텍스트가 바뀌기 때문에 커서가 자리를 잃어 버리는데, 이는 텍스트 편집기에 좋지 않습니다.

나는 또한 document.createRange을 사용하여 두 번 시도했지만 범위의 시작과 끝 점이 표시된 문자 만 포함하는 동안 text.indexOf("highlight")은 태그 등을 포함하는 색인을 제공합니다. 나는 실행하는 방법을 잘 모르겠어요

몇 가지 아이디어 : 커서가 시작 createRange 사이 인덱스의 차이를 찾기

위의 코드를 사용한 후 다시이 배치

• 그림 밖으로 indexOf
• 은 어쩌면 이미 난 그냥

여러분의 도움에 감사드립니다 찾을 수없는 이런 종류의 기능을 가진 라이브러리있다!

Answer 1

먼저, innerHTML을 조작하여이 작업을 수행하지 말 것을 권장합니다. 비효율적이며 오류가 발생하기 쉽습니다 (예 : 콘텐츠에 '강조 표시'클래스가있는 요소가 포함 된 경우를 생각해 봅니다). 여기에 텍스트를 조작하는 DOM 방법을 사용하여이 작업을 수행하는 예는 직접 노드들이있다 :

https://stackoverflow.com/a/10618517/96100

캐럿 위치가 여러 가지 방법으로 달성 할 수있다 유지. character offset-based approach을 사용할 수 있는데, 이는 <br>에 의해 암시 된 줄 바꿈을 고려하지 않아서 몇 가지 단점이 있지만 비교적 간단합니다. 또는 내 Rangy 라이브러리 selection save and restore module을 사용할 수 있습니다.이 라이브러리는 필요에 따라 과잉 사용이 가능하지만 동일한 접근 방식을 사용할 수도 있습니다.

http://jsbin.com/suwogaha/1

: 여기

는 첫 번째 방법을 사용하는 예이다