0

我正在使用 Rangy 在富文本编辑器中执行多项操作（设计模式 =“on”）。其中一项功能是粘贴格式化内容，这些内容可以表示用户事先创建的某些预定义字符。所有文本内容都保存在段落元素中。用户可以从这个开始：

<p>The following is a special character: |</p>

其中竖线 (|) 是插入符号的位置。然后，他们选择通过编辑器上的按钮粘贴其中一个“特殊”字符，最终得到以下结果：

<p>The following is a special character: <span class="read-only" contenteditable="false">SPECIAL</span>|</p>

该操作在幕后使用 Rangy 在内部粘贴过程中保持插入符号 (SelectionSaveRestoreModule) 的位置，这可能是在编辑器中对文本进行后粘贴处理，否则可能会弄乱光标的位置。

但是，在 IE8 中，插入符号不能放在之后，<span>因为似乎存在一个错误，使其位置无效。结果光标出现在<span>元素之前，甚至无法使用键盘光标控件将光标移动到跨度之后。事实上，它甚至可以防止光标移动到任何后续段落。

最近几天我尝试了几种技术，包括在<span>s 之后放置额外的字符并取得了一些成功。然而，这些额外的字符在出现时显然会给用户造成混淆并且并不理想。使用零宽度空间在视觉上更好，但在粘贴操作后尝试整理它们会导致问题。

我需要一种“整洁”的方法来支持用户对特殊字符的要求，我自由地接受我可能以错误的方式处理这个问题。

4

1 回答 1

0

到目前为止，我有一个似乎在我的测试中有效的解决方案，但是当我看到它时，它仍然让我感到必须有更好的方法（更不用说恐惧感了）。

这段代码试图做的是在段落末尾的任何只读跨度之后放置一个零宽度空间。它通过检查这些元素之后的节点以确定其中是否实际存在文本来做到这一点。同时，它从以前的检查中删除了可能仍存在于文本中的任何零宽度空格，这些检查现在不再需要。

var ZWS = '\ufeff';

jQuery(_doc.body).find('p').each(function () {
    var lastContentEditable = undefined;
    // Look through the root contents of each paragraph to remove no-longer require zws fixes
    jQuery(this).contents().each(function () {
         if (this.nodeType === 3) {
            if (this.nodeValue.indexOf(ZWS) != -1) {
                // Text node containing a ZWS - remove for now
                this.nodeValue = this.nodeValue.replace(new RegExp(ZWS, 'g'), '');
            }

            // Does this node now contain text?
            if (this.nodeValue.length > 0 && lastContentEditable) {
                // Found text after a read-only node, ergo we do not need to modify that read-only node at the end
                lastContentEditable = undefined;
            }
        } else if (this.nodeType === 1 && this.getAttribute('contenteditable') === "false") {
            // Indicate that this is currently the last read-only node
            lastContentEditable = this;
        }
    });

    if (lastContentEditable) {
        // It appears that there is a read-only element at the end of the paragraph.
        // Add the IE8 fix zws after it.
        var node = document.createTextNode(ZWS);
        jQuery(lastContentEditable).after(node);
    }

});
于 2012-07-30T11:27:29.283 回答