2

ASP.NET MVC4 Web アプリケーションで tinyMCE をプラグインとして使用しています。また、SignalR を使用して、サーバーとクライアント間のオープン接続を確立しています。私がやろうとしているのは、Google ドキュメントに似たリアルタイム エディターです。

これまで、あるブラウザーでエディターに書き込み、別のブラウザーで開いている別のドキュメントに表示する方法を見つけることができました。以前、tinyMCE で setContent() メソッドを使用していたときにカーソル位置に問題があったため、カーソルが前面に配置されたため、出力が逆になりました。

これは、次の 2 つのステートメントによって解決されました。

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

しかし、今私が抱えている問題は、Chrome では、出力が希望どおりになることです。戻ります。

これが起こった特定の理由はありますか？また、接続に速度の問題があるようです。つまり、すばやく入力すると、最新のコンテンツ (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

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);
于 2013-02-28T12:50:30.567 に答える