Firefox의 커서 위치 관련 문제

Question

ASP.NET MVC4 웹 응용 프로그램에서 tinyMCE를 플러그인으로 사용하고 있습니다. 또한 SignalR을 사용하여 서버와 클라이언트 간의 연결을 설정합니다. 내가 뭘하려고하는지는 Google 문서 도구와 유사한 실시간 편집기입니다.

지금까지 한 브라우저에서 편집기로 작성하고 다른 브라우저의 다른 열린 문서에 표시하는 방법을 찾았습니다. 나는 이전에 tinyMCE에서 setContent() 메소드를 사용할 때 커서가 앞쪽에 놓이기 때문에 커서 위치에 문제가 있었기 때문에 출력이 뒤 바뀌었다.

이이 두 문장에 의해 해결되었다 그러나

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

지금 내가 가지고있는 문제는 내가 원하는대로 때 그것을 그러나 뒤쪽에있는 커서를 쓰기 즉, 일을 위해 크롬과 출력이 있다는 것이다 파이어 폭스 브라우저에서 쓰기, 공간 버튼을 무시하고, 내가 공간을 누르면 커서가 돌아갑니다.

특별한 이유가 있습니까? 또한 연결 속도 문제가있는 것으로 보입니다. 즉, 빠르게 입력하면 최신 내용 (1 ~ 2 자)이 제출되지 않습니다. 당신이 TinyMCE에 북마크를 얻을 수있는 가능성을 확인 할 수 있습니다처럼

@{ 
    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

가 보이는 :

이것은 내가이 문제에 관한 한 모든 코드입니다. 특정 클래스와 함께 숨겨진 범위를 사용하여 구현되는 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);