dom 이미지를 포함하는 contentEditable에서 캐럿 위치 지정

":)"이모티콘을 추가하자마자 contentEditable iframe에서 캐럿 위치를 설정하는 데 문제가 있습니다.dom 이미지를 포함하는 contentEditable에서 캐럿 위치 지정

어떻게 관리 하시겠습니까?

여기에 기본 템플릿입니다 : 내가 코드 섹션을 설명하기보다 상황을 추가

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var init = function() { // initialization 

      this.editor = $('#wysiwyg'); 
      this.editor.curWin = this.editor.prop('contentWindow'); 
      this.editor.curDoc = this.editor.curWin.document; 
      this.editor.curDoc.designMode = "On"; 
      this.editor.curBody = $(this.curDoc).contents().find('body'); 
      this.editor.html = function (data) { // shortcut to set innerHTML 
       if (typeof data == "undefined") 
        return this.curBody.html(); 
       this.curBody.html(data); 
       return $(this); 
      }; 
      var emoji = function (data) { // replace every :) by an image 
       return data.replace(':)', '<img src="http:\/\/dean.resplace.net\/blog\/wp-content\/uploads\/2011\/10\/wlEmoticon-smile1.png"\/>'); 
      }; 
      var self = this; 
      this.editor.contents().find('body').keypress(function (ev) { // handler on key pressed 
       var me = $(this); 

       setTimeout(function() { // timeout so that the iframe is containing the last character inputed 
        var sel = self.editor.curWin.getSelection(); 
        var offset = sel.focusOffset; 

        me.html(emoji(me.html())); 

        var body = $(self.editor.curDoc).find('body').get(0); 
        sel.collapse(body, offset); //here is where i set positionning 
        return; 
       }, 100); 
       return true; 
      }); 

     }; 
    </script> 
</head> 
<body onload="init()"> 
    <iframe id="wysiwyg"></iframe> 
</body> 
</html>

StackOverflow의 요구,하지만 나를 위해 분명한 것 같다. 그래서 더 많은 "멋진 이야기 형제"코멘트를 추가하는 것은 유감스럽게 생각하지만 나는 이것보다 더 설명 할 수있는 것을 볼 수 없다. 어쨌든, 나는 어떤 질문에 대해서도 열려 있습니다.

출처

2012-05-08 Keil

이 방법이 유용합니까? 문제가 무엇입니까? 문제가없는 경우 codereview.stackexchange.com 또는 문제의 악성 코드에 더 좋을 수 있습니까? – rlemon

작동하지만, 이모티콘이 추가되는 즉시 캐럿 위치 지정이 매우 엉망입니다. 그게 진짜 문제입니다 – Keil

jsfiddle 또는 스크린 샷을 통해 우리를 보여줄 수 있습니까 – rlemon

빠른 수정 ... 대체품이 만들어지고 있는지 확인하십시오. 만든 것이 있으면 캐럿을 재조정하십시오. 그렇지 않으면 그대로 둡니다.

var init = function() { // initialization 
    this.editor = $('#wysiwyg'); 
    this.editor.curWin = this.editor.prop('contentWindow'); 
    this.editor.curDoc = this.editor.curWin.document; 
    this.editor.curDoc.designMode = "On"; 
    this.editor.curBody = $(this.curDoc).contents().find('body'); 
    this.editor.html = function(data) { // shortcut to set innerHTML 
     if (typeof data == "undefined") return this.curBody.html(); 
     this.curBody.html(data); 
     return $(this); 
    }; 
    var emoji = function(data) { // replace every :) by an image 
     var tmp = data; 
     tmp = tmp.replace(':)', '<img src="http:\/\/dean.resplace.net\/blog\/wp-content\/uploads\/2011\/10\/wlEmoticon-smile1.png"\/>'); 
     if (tmp !== data) { 
      return [true, tmp]; 
     } 
     return [false, tmp]; 
    }; 
    var self = this; 
    this.editor.contents().find('body').keypress(function(ev) { // handler on key pressed 
     var me = $(this); 
     var res = emoji(me.html()); 
     if (res[0]) { 
      setTimeout(function() { // timeout so that the iframe is containing the last character inputed 
       var sel = self.editor.curWin.getSelection(); 
       var offset = sel.focusOffset; 

       me.html(res[1]); 

       var body = $(self.editor.curDoc).find('body').get(0); 
       sel.collapse(body, offset); //here is where i set positionning 
       return; 

      }, 100); 
     } 
     return true; 
    }); 

}; 
init();

출처

2012-05-08 18:14:23 rlemon

woh! 좋은! 잘 했어 ! 그러나 두 개의 작은 버그가 여전히 여기 있습니다. "ok :) 입력하려고하면 :) 작업 :)"다음 입력 할 이전 단어로 이동 :) 다음 carret 해당 위치를 망칠 것입니다. 다른 버그는 이미지를 :)로 대체 한 것이 더 이상 입력되지 않는다는 것입니다.) – Keil

생각은 여전히 동일합니다. 대체물이 없다면 캐럿을 만지지 마라. 나는 그걸 함께 해킹했다. – rlemon

dom 이미지를 포함하는 contentEditable에서 캐럿 위치 지정

답변

관련 문제