작은 MCE 편집기에서 단어의 끝에 캐럿을 이동하십시오.

Question

입력 할 때 특정 단어를 스팬 태그로 감싸는 tinyMCE 편집기 용 함수를 작성하려고하는데, 지금까지이 코드를 사용하고 있습니다. TinyMCE를 인스턴스 초기화 init_instance_callback 옵션 동안 :

function(ed) { 
     ed.on('keyup', function() { 
      var editor  = tinyMCE.get('content'), 
       regex  = new RegExp('test|abc', 'gi'), 
       oldContent = editor.getContent(), 
       newContent = oldContent.replace(regex, '<span style="background-color: yellow;">$&</span>'); 

      // Save cursor position 
      var marker = editor.selection.getBookmark(2); 

      // Set new content in editor 
      editor.setContent(newContent); 

      // Move cursor to where it was 
      editor.selection.moveToBookmark(marker); 
     }); 
    } 

을 다음 동작하는 예제와 바이올린입니다 : 당신이 (그러나 바로이 일치하는 단어 중 하나를 입력으로 입력하는 동안 http://fiddle.tinymce.com/Jjeaab

그것은 잘 작동 이 경우 "테스트"또는 "abc") 캐럿이 단어의 시작 부분으로 이동하면 나는 이것이 여분의 문자를 스파에 추가하기 때문에 이것이라고 생각합니다 n 요소가 없으므로 단어가 줄 바꿈 된 후 북마크가 제대로 설정되지 않습니다.이 문제를 해결할 수있는 방법이 있습니까?

Answer 1

아마도 모든 내용을 바꾸는 대신 새 노드를 삽입 할 수 있습니다. 그것은 당신을위한 포지셔닝을 관리 할 것입니다.

그 전에 일치하는 문자열을 제거하기 만하면됩니다. 올바르게 수행하는 방법을 알려줍니다. 여기

은 예입니다

ed.on('keyup', function() { 
    var editor = tinyMCE.get('content'), 
    regex = new RegExp('test|abc', 'i'); 

    var match = editor.getContent().match(regex); 
    if (match) { 
     // Here remove the "match[1].length" last character 

     // Then add the new Node, it will set the cursor just after it 
     editor.selection.setNode(editor.dom.create('span', {style : 'background-color: yellow;'}, match[1])); 
    } 
}); 

당신은 또한 당신이 만든 노드를 (당신은 단지 사용자가 입력 한 문자열을 일치시킬 일치 방지하기 위해 정규식을보고 할 수 있습니다 ->로 둘러싸여 있지 span 태그).