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またはscreenshots経由で私たちを見せてください – 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！いいよ！よくやった！しかし、まだ2つの小さなバグが残っています。あなたが "ok :)を入力しようとすると:)それは:) :)と入力するだけで前の言葉に行く:) :)カレットはその位置付けを台無しにします。もう1つのバグは、画像の:)の置換が、 – Keil

を入力した直後に行われていないことですが、考えは変わりません。置き換えが行われていない場合は、キャレットに触れないで、すぐに一緒にハックしました。 – rlemon

domの画像を含むcontentEditableのキャレット位置合わせ

答えて

関連する問題