iframe JS 富文本编辑器问题答案

【问题标题】：Iframe JS rich text editor questionsiframe JS 富文本编辑器问题
【发布时间】：2011-06-03 15:24:25
【问题描述】：

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

如何按下某个键而不将其添加到文本编辑器中。 Ex 按下回车键或回车键，而不会将中断添加到文本编辑器中。 ??

和

我怎样才能得到写作的位置。基本上我怎么能弄清楚文本出来的闪烁的东西后面有多少个字符（不确定它叫什么）？

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

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

谢谢。

【问题讨论】：

标签： javascript text iframe editor selection

【解决方案1】：

您需要记录在文本的所有版本中按下的每个键，并对每个人进行评估。问题是这可能非常慢，并且您可能会从按键到按键等待很长时间。

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

这是个好问题。

【讨论】：

【解决方案2】：

要防止按键将字符插入到编辑器内容中，请将keypress 事件的侦听器添加到 iframe 的文档并调用事件的 preventDefault() 方法（或在 IE 中将 returnValue 设置为 false

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) );

【讨论】：