2

我在我的 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>
4

1 回答 1

0

Looks like you might want to check out the possibility to get a tinymce bookmark. There are html bookmarks which are implemented using hidden spans with a certain class. And there are non-html bookmarks - i would use those.

// 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);
于 2013-02-28T12:50:30.567 回答