Question

我正在尝试为Web应用程序执行富文本编辑器，我需要能够将文本中的某些元素标记为用户无法编辑。这样做的原因是它们是动态内容（如创建日期）的占位符，我想要进行实时预览。

以下面的代码为例 - 这个代码中没有工具栏或任何东西，因为重量轻，但textarea和html是同步的。

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<html>
<head>
    <title>Hi</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script>
        $(function() {
            g = {};

            g.iFrame = document.createElement("IFRAME");
            $("#frameContainer").append(g.iFrame);
            g.iDoc = g.iFrame.contentWindow.document;
            g.iDoc.designMode = "on";

            g.jTextArea = $("#textContainer textarea");

            setTimeout(function() {
                g.iDoc.body.innerHTML = "<b class=\"notype\">Cannot type here</b>";
                $(g.iDoc).trigger("keyup");
                $(g.iDoc.body).focus();
            }, 0);

            $(g.iDoc).keyup(function() {
                g.jTextArea.text(g.iDoc.body.innerHTML);
            });

            g.jTextArea.keyup(function() {
                g.iDoc.body.innerHTML = this.innerText;
            });

            var getSelection = function() {
                if (typeof g.iDoc.selection !== "undefined" && g.iDoc.selection.type !== "Text" && g.iDoc.selection.type !== "None") {
                    g.iDoc.selection.clear();
                }
                return g.iDoc.selection.createRange();
            };

            $(g.iDoc).keypress(function(event) {
                // If we're in a marked field, disable the operation.
                var sel = getSelection();

                if ($(sel.parentElement()).hasClass('notype')) {
                    sel.moveToElementText(sel.parentElement());
                    sel.collapse();
                    sel.move("character", -1);
                    sel.select();
                    $("#log").append("<div>outside of thing</div>");
                }
            });

            $(testLink).click(function() {
                // Try and insert stuff at the front
                $(g.iDoc.body).focus();
                var sel = getSelection();
                sel.moveToElementText(sel.parentElement());
                sel.collapse();
                sel.move("character", -100);
                sel.pasteHTML("Before html?");
                $(g.iDoc).trigger("keyup");
                $(g.iDoc.body).focus();
            });
        });
    </script>

</head>
<body id="#body">
    <div id="container">
        <div id="frameContainer">
            <h1>
                Frame</h1>
        </div>
        <div id="textContainer">
            <h1>
                Text</h1>
            <textarea rows="10" cols="80"></textarea>
        </div>
        <a href="#" id="testLink">Test</a>
        <div id="log">
        </div>
    </div>
</body>
</html>

在keyup绑定中，我可以成功检测到我是否在另一个元素中，并在插入之前将光标移动到文本的前面没问题。但是，由于在标记为'notype'的元素之前没有文本，因此它将插入到同一元素中。

当用户按下“enter”时，这是双坏的，因为新的

标签是生成的，并且“notype”标签是重复的，显然不是必需的。

我希望行为如下：

如果用户在光标位于'notype'标签内时键入，则光标移动到前面，文本就会显示在那里
如果光标位于'notype'标记内的最后一个位置，则文本显示在标记
如果用户在其他地方输入，则会一如既往地插入。

底部的链接尝试手动将光标放在前面并插入html。显然失败了。我知道这个可以通过像$（g.iDoc.body）.prepend（“之前！”）之类的东西来工作，但这显然不适用于真实场景（使用keyup）。

Answer 1

我建议使用contenteditable代替designMode。它适用于IE，因为版本5.5，Firefox 3.0，Safari 1.2和Opera 9：

<div id="contentContainer">
    <p contenteditable="true">An editable paragraph</p>
    <p>An uneditable paragraph</p>
    <p contenteditable="true">Another editable paragraph</p>
</div>

打破IHTMLTxtRange中的第一个元素

1 个答案: