YUI 편집기 (RTE) : HTML 요소를 삽입하고 커서를 내부에 배치합니다.

Question

문제가 있습니다. 나는 지금 그것을 한동안 해결하려고 노력했고 폭발 할 준비가되었습니다. 내 요구 사항은 다음과 같습니다.
HTML 태그를 삽입하는 데 사용하려는 편집기 위에 외부 도구 모음 (Yui의 일부가 아님)이 있습니다. 사용자는 몇 가지 일이 발생할 수있는 도구 모음에서 링크를 클릭 할 수 있어야합니다.

1. 선택한 텍스트가 있으면이 텍스트는 HTML 태그로 싸여 있습니다.
2. 선택한 텍스트가 없으면 편집기에 빈 HTML 태그가 삽입됩니다.
3. 시나리오에 관계없이 커서는 새 요소 안에 배치되어야하므로 사용자가 더 많은 텍스트를 입력 할 때 새 요소에 있습니다.

기능은 편집기 도구 모음에서 "B"또는 "U"버튼을 누르는 것과 매우 유사합니다 (이제이 편집기를 사용하고 있으므로 잘 수행합니다 :-)). 그것은 모든 것을 멋지게 보존합니다. 지금까지 나는 1 또는 2를 할 수 있지만 3은 아닙니다. 3 단계는 매우 중요합니다. 이는 없으면 사용자 경험이 크게 어려워지기 때문입니다. 그것을 구현하려면 정말 당신의 도움이 필요합니다. 아래는 삽입을 수행하는 방법의 단순화 된 버전입니다 (단순성을 위해 div 삽입 만 삽입). this._OEDITOR- YUI 편집기의 로컬 인스턴스 :

this._insertElement = function() {
var sSelection = this._oEditor._getSelection(); // Attempt to get selected text from the editor
if (sSelection == '') sSelection = ' '; // If nothing was selected, insert a non-breaking space

var sNewElt = '<div>' + sSelection + '</div>';

this._oEditor.execCommand('inserthtml', sNewElt);

this._oEditor.focus(); // This gives the editor focus, but places cursor in the beginning!
}

커서를 올바른 위치에 배치하려면 어떻게해야합니까? 가능합니까? 또한, 이것을 구현하는 더 좋은 방법이 있다면, 나는 그 모든 것을 위해 있습니다. 고맙습니다!

Answer 1

다음은 솔루션을 완료합니다.

this._insertElement = function() {
   var sSelection = this._oEditor._getSelection(); 
  if (sSelection == '') sSelection = ' '; 

  var sNewElt = '<div>' + sSelection + '</div>';

  this._oEditor.execCommand('inserthtml', sNewElt);

  var pos = 1000; //pos determines where to place the cursor. if greater than the length of characters, it will place at the end.
  if(this._oEditor.createTextRange) { //IE Specific code
        var range = this._oEditor.createTextRange();   
        range.move("character", pos);   
        range.select();   
    } else if(this._oEditor.selectionStart) {  //Works with Firefox and other browsers 

        this._oEditor.focus();   
        this._oEditor.setSelectionRange(pos, pos);   
  }  
  this._oEditor.focus(); 
}

Answer 2

커서를 배치하려면 브라우저에 다른 방법이 필요합니다. 즉, 당신은 a를 만들고 싶을 것입니다 텍스트 객체, 모질라에서 당신은 창을 사용할 수 있습니다 .find () 또는 선택 Object, WebKit/Safari/Chrome에는 또 다른 방법이 필요합니다.