contenteditable div에 양식 요소 기능 추가

Question

MooTools Javascript 라이브러리를 사용합니다. 그리고이 라이브러리는 여기에 정말 유용한 기능 몇 가지를 제공합니다 : http://mootools.net/docs/more/Element/Element.Forms

문제는이 기능은 지금은 온라인 편집기를 만드는 중이 등 텍스트 영역과 같은 '형태'요소,

과 에디터 위해 일한다는 것입니다 그것은 내가 div 요소와 내용 편집 가능한 기능을 사용합니다.

내가이 줄 호출되는 Mootools의 (이상) 라이브러리에 getCaretPosition 같은 기능을 사용하려면

:

var range = this.getDocument().selection.createRange(); 

는하지만 난이 오류가보다 :

this.getDocument().selection is undefined 

그것은 단지 형태로 보인다 요소에는이 선택 개체 (이 문서에서는 S?)가 있습니다.

div (또는 all) 요소에 양식 기능을 추가하는 방법이 있습니까?

Answer 1

이 기능은 CodeMirror (http://marijn.haverbeke.nl/codemirror/, jsfiddle에서도 사용됨)라는 Javascript 프로젝트에서 발견되었습니다. 훌륭한 프로젝트!

Answer 2

쉽게 작동하지 않을 것입니다, 나는 두렵습니다. setSelectionRange 두 주장 1을 가지며, 소스 코드 예

보면 : 그것은 type == "text" (따라서, 입력) 또는 (2)을 갖는다 : 그것은 .value 읽을 수있는 특성을 갖는다. 그 중 하나가 부족한 요소에 적용하면 작동하지 않습니다.

당신이 가능하게 다른 아이디어를 볼 수

- 예를 들어이 데이비드 월시 문서 선택 조각은 유용 할 수 있습니다 :

http://davidwalsh.name/text-select-widget

그는 간단하고있어 :

이

var getSelection = function() { 
    return $try(
     function() { return window.getSelection(); }, 
     function() { return document.getSelection(); }, 
     function() { 
      var selection = document.selection && document.selection.createRange(); 
      if(selection.text) { return selection.text; } 
      return false; 
     } 
    ) || false; 
}; 

행운을 빌어 요 - 여기가이다 매우 나는 급히 함께 모범을 보였고, 그것은 괄호의 오프셋으로 선택 및 가능한 캐럿 위치 (선택의 마지막 문자를 기준으로)를 제공합니다. t 요소 - http://www.jsfiddle.net/82czp/1/