javascript - Firefox 中的光标位置问题

Question

我在我的 ASP.NET MVC4 网络应用程序中使用 tinyMCE 作为插件。我还使用 SignalR 在服务器和客户端之间建立开放连接。我想做的是一个类似于 Google Docs 的实时编辑器。

到目前为止，我设法找到了一种方法，可以在一个浏览器的编辑器中编写，并在另一个浏览器的另一个打开的文档中显示它。我以前遇到过光标位置问题，因为当我在 tinyMCE 中使用 setContent() 方法时，光标被放在前面，因此输出被颠倒了。

这两个语句解决了这个问题:

ed.selection.select(ed.getBody(), true); 
ed.selection.collapse(false);

但是现在我遇到的问题是，使用 Chrome 时，输出是我希望的那样，即在后面用光标书写，但是当我从 Firefox 浏览器写入时，空格键被忽略，当我按下空格键时, 光标返回。

发生这种情况是否有特殊原因？此外，连接似乎存在速度问题，即当我快速键入时，未提交最新内容(1 或 2 个字母)。

这是关于这个问题的所有代码:

@{
    ViewBag.Title = "- Editor";
    ViewBag.ContentStyle = "/Content/CSS/editor.css";
}

<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript" src="~/Content/tinyMCE/tiny_mce.js" ></script>
<script type="text/javascript" src="~/Scripts/EditorHandler.js"></script>
<script type="text/javascript">
    $(function () {
        tinyMCE.init({
            mode: "textareas",
            theme: "advanced",
            plugins: "emotions,spellchecker,advhr,insertdatetime,preview",

            // Theme options - button# indicated the row# only
            theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
            theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
            theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: false,

            setup: function (ed) {
                ed.onKeyUp.add(function (ed, e) {
                    var chat = $.connection.editorHub;

                    chat.client.broadcastMessage = function (message) {
                        tinyMCE.activeEditor.setContent(message);
                        ed.selection.select(ed.getBody(), true); 
                        ed.selection.collapse(false);
                        tinyMCE.activeEditor.focus();
                    };

                    $.connection.hub.start().done(function () {
                        var text = tinyMCE.activeEditor.getContent();
                        chat.server.send(text);
                    });
                });
            }
        });
    });
</script>

<form method="post" action="somepage">
        <textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>

Answer 1

看起来你可能想检查一下获得 tinymce 书签的可能性。有一些 html 书签是使用具有特定类的隐藏跨度实现的。还有非 html 书签 - 我会使用它们。

// gets you a non-html bookmark which you can transfer to another server if need be
var bookmark = editor.selection.getBookmark(2, true);
editor.setContent(content);
editor.selection.moveToBookmark(bookmark);