插入符positionning CONTENTEDITABLE中對DOM的圖像

我遇到了儘快制定在CONTENTEDITABLE iframe中插入位置和問題，我添加一個「:)」表情。插入符positionning CONTENTEDITABLE中對DOM的圖像

你會怎麼辦？

這是一個基本的模板：

<!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或ascreenie的問題會更好嗎？ – rlemon

它的工作，但插入符positionning非常只要表情添加搞砸。這是真正的問題 – 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！很好！做得好！但是兩個小錯誤仍然存在。如果你嘗試輸入「確定:)它是:)工作:)」，然後去上一個單詞只是鍵入:)然後，卡爾特將搞砸定位。另一個錯誤是，圖像的替換:)不是在輸入 – Keil

之後立即做出的，但是這個想法仍然是一樣的。如果沒有更換，不要觸摸脫字符，我很快就把它們混在一起。 – rlemon

插入符positionning CONTENTEDITABLE中對DOM的圖像

回答

相關問題