Question

我创建了一个iframe富文本编辑器，想知道以下内容：

如何按下按键而不将其添加到文本编辑器中。 Ex按下返回或输入，没有中断添加到文本编辑器。 ??

和

如何获得写作内容的位置。基本上我怎么能弄清楚文本出来的眨眼之后manny字符是怎么回事（不确定它叫什么）？

我希望能够输入：“123 | test 32”并将我的写作内容放在|是的，知道它是3个字符。更多EX“12345 | 678”返回5.“1234 |”返回4

我不需要你写出整个功能，只是请有人指出我正确的方向。

感谢。

Answer 1

您需要捕获所有版本的文本中按下的每个键，并评估每个人。问题是可能非常慢，您可能需要等待很长时间才能按下按键。

其他解决方案可以在一种缓冲区中编写所有内容，然后，当您完成编辑时，解析所有文本并尝试找出哪些键不是编辑的。例如，您可以使用特殊字符执行此操作。

这是一个很好的问题。

Answer 2

要防止按键将字符插入编辑器内容，请将keypress事件的侦听器添加到iframe的文档中，然后调用事件的preventDefault()方法（或设置returnValue} IE中的false＆lt; 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) );

iframe JS富文本编辑器问题

2 个答案: