0

我正在尝试为 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”的元素之前没有文本，因此它被插入到同一个元素中。

当用户按下“回车”时，这是双重错误，作为一个新的

生成标签，并复制“notype”标签，显然不需要。

我希望行为如下：

  • 如果用户在光标位于“notype”标签中时键入，则光标会移到前面，文本会移到那里
  • 如果光标位于“notype”标签内的最后一个位置，则文本出现在标签之后
  • 如果用户在其他任何地方键入，它会像往常一样插入。

底部的链接尝试手动将光标放在前面并插入html。显然失败了。我知道这可以通过 $(g.iDoc.body).prepend("before!") 之类的操作来工作，但这显然在实际场景中不起作用（使用 keyup）。

4

1 回答 1

0

我建议使用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>
于 2010-06-07T08:50:40.293 回答