사용자 입력 텍스트를 입력 할 때 지정된 색상으로 페인트하십시오.

Question

etherpad 각 사용자가 다른 색상으로 타이핑 할 때 UI 효과를 얻고 싶습니다. 리치 텍스트 편집기로 contenteditable div를 사용합니다. 내가 지금까지 시도했습니다 무엇

: 모든 입력 변화에

1) (예를 들어, DIFF-일치 패치를 사용하여 원본과 변경된 텍스트 사이 DIFF을).

2) true의 경우, 아무것도하지 않고))

3은 diff의 문자열 경계 봐하고 태그의 부부에 의해 정의 된 사용자의 텍스트 (내부 낳는 경우를 참조하십시오. false 인 경우 해당 하위 문자열 옆에 두 개의 색상 태그를 삽입하고 변경 사항을 적용하십시오. 을 호출하면 텍스트 편집기에서 작업 할 때 캐럿 위치가 0으로 재설정됩니다. contenteditable div에서 캐럿 위치를 추출하고 diff.length 오프셋을 사용하여 다시 설정하려고했습니다. div에 많은 자식 노드가 있고 부모가 상대적으로 오프셋되기 때문에 잘 작동하지 않습니다.

UPDATE :

그래서, 나는 내 문제를 조금 좁힐 수 :

1) 내가 TextNode 요소 내 캐럿 위치를 얻는 방법을 알고를

2)를 설정하는 방법을 알고 그것 TextNode 요소 내에서 (범위 또는없이)

3) 유일한 질문은 지금 어떤 요소가 내 케렛인지 어떻게 알 수 있습니까?

Answer 1

결국 Rangy의 saveSelection 및 restoreSelection 함수를 사용합니다. 물론 Tim Down에게 큰 감사를드립니다.