的iFrame JS富文本編輯器的問題

Question

我已經創建了一個iframe的富文本編輯器，並想了解以下內容：

我如何按一個鍵並沒有它被添加到文本編輯器。例如按下回車或輸入並且沒有中斷添加到文本編輯器。 ??

and

我該如何獲得寫作的地方。基本上我怎麼能弄清楚曼尼文字是如何背後的閃爍文字出來（不知道它叫什麼）？

我希望能夠鍵入：「123 |測試32」，並有我的寫作東西在哪裏|是，並且知道它是3個字符。更多EX「12345 | 678」返回5.「1234 |」返回4

我不需要你寫出一個完整的函數，只是請有人指出我在正確的方向。

謝謝。

Answer 1

您需要捕獲在您的文本的所有版本中按下的每個鍵，並評估每個人。問題是可能非常緩慢，並且您可能需要等待很長時間才能從按鍵到按鍵。

其他解決方案可能會將所有內容都寫入緩衝區，然後在完成版本時解析所有文本並嘗試找出哪些鍵不是正在編輯的鍵。例如，您可以使用特殊字符進行此操作。

這是一個很好的問題。

Answer 2

爲了防止按鍵從插入字符到編輯器的內容，添加一個偵聽器keypress事件iframe的文件並調用事件的preventDefault()方法（或設置returnValue到false在IE < 9）：

var iframe = document.getElementById("your_iframe_id"); 
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 

if (iframeDoc.addEventListener) { 
    iframeDoc.addEventListener("keypress", function(e) { 
     e.preventDefault(); 
    }, false); 
} else if (iframeDoc.attachEvent) { 
    iframeDoc.attachEvent("onkeypress", function(e) { 
     e.returnValue = false; 
    }); 
} 

要根據整個可編輯內容中的字符偏移量來獲取插入符號的位置，可以使用下面的函數，改編自this answer。

function getCaretCharacterOffset(iframe) { 
    var win = iframe.contentWindow, doc = win.document; 
    var caretOffset = 0; 
    if (typeof win.getSelection != "undefined") { 
     var range = win.getSelection().getRangeAt(0); 
     var preCaretRange = range.cloneRange(); 
     preCaretRange.selectNodeContents(element); 
     preCaretRange.setEnd(range.endContainer, range.endOffset); 
     caretOffset = preCaretRange.toString().length; 
    } else if (typeof doc.selection != "undefined" && doc.selection.type != "Control") { 
     var textRange = doc.selection.createRange(); 
     var preCaretTextRange = doc.body.createTextRange(); 
     preCaretTextRange.moveToElementText(element); 
     preCaretTextRange.setEndPoint("EndToEnd", textRange); 
     caretOffset = preCaretTextRange.text.length; 
    } 
    return caretOffset; 
} 

alert(getCaretCharacterOffset(iframe));