html 소스를 사용하여 강조 표시 할 문자를 결정하십시오.

Question

TinyMCE를 사용하여 사용자가 텍스트를 편집하고 서식을 지정할 수있게하고 있습니다. 출력은 html 코드입니다. 그런 다음 html이 서버로 전송되고 웹 페이지에서 편집 진행 상황을 확인할 수있는 다른 클라이언트로 푸시됩니다. html이 div에 삽입되므로 사용자는 형식을 볼 수는 있지만 편집 할 수는 없습니다.

이제 커서 위치와 사용자가 편집기에서 선택한 항목을 강조 표시 (배경색)를 사용하여 읽기 전용 페이지에 표시하거나 문자 사이에 검은 색 테두리가있는 빈 경간을 삽입하여 커서 위치를 모방합니다. .

내가 editor.tinymce()를 사용하여 시도했다. 나에게 사용자가 (서식 문자가 계산되지 않습니다) 보는 것을의 시작과 끝 위치를 제공 selection.getRng() 를 다음 나는 DOM과 계산을 통과 하이라이트 스팬으로 선택된 것들을 래핑하는 모든 텍스트 요소의 문자. 이로 인해 지저분한 코드가 작성되었지만 텍스트 블록에서 ASCII가 아닌 문자 나 인코딩 된 문자가 나올 때까지 잘 작동했습니다.

예 HTML

<p>abc&nbsp;<b>de</b>fg</p> 

사용자에게 다음과 같다

ABC   FG 드

말해 사용자가 선택한 캐릭터 선택 빈, 전반부 (C)를, 커버 (d시켰다tinymce는 범위 시작 : 2 끝 : 5 을 리턴하지만 뒤에 실제 문자는 시작 : 5 끝 : 16이됩니다. 하이퍼 스팬의 문자 5에서 16까지 줄 바꿈하면 html이 잘못됩니다. &으로 시작하여 다음으로 끝나는 단어를 확인하십시오. 그리고 위치의 수를 추가하는 것은 혼란으로 바뀔 것이다. 더 간단한 방법이 있어야합니다.

html 문자 집합이 얼마나 많은 "보이는"문자를 계산합니까?

아니면 다른 방법으로

덕분에 나는 다양한 JQuery와 하이라이트 플러그인을 검토 한 결과 1

PS를 문제를 공격 할 것이다 그러나 그들은 검색 문자열을 기반으로 강조하는 것. 그것들은 사용자가 한 문자를 선택하고 그 문자가 여러 번 존재할 경우에는 작동하지 않고 모든 발생을 강조 표시합니다.

Answer 1

내 Rangy 라이브러리에서이 문제를 해결했습니다. TextRange module은 사용자가 보는 텍스트와 관련이 있습니다. Rangy 's Range 객체의 selectCharacters() 및 toCharacterRange() 메소드가 필요한 것 같습니다.