Question

我在我的ASP.NET MVC4 Web应用程序中使用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);

Firefox中的光标位置问题

1 个答案: