1

我创建了一个实时共享文本编辑器，它允许人们编辑共享文档，因此当用户在一端键入时，另一端可以看到，但是当用户在一端删除时它不会在另一端删除，我怎么能解决这个问题，例如当用户在一端删除文本时，它在另一端删除，到目前为止这是我的代码

<!DOCTYPE HTML>
<html>
<head>
    <title> Live Text Sharing</title>
    <meta charset='UTF-8' name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <script type="text/javascript">
    var conn;
    var peer = new Peer({key: '5nyu3ci7jomq85mi'});
    peer.on('open', function (id){
        $('#pid').text(id);
    });

    peer.on('connection', connect);
    function connect(c){
        conn=c;
        $('#rid').val(conn.peer);
        $('#rid').prop('disabled', true);
        $('#progBar').width('100%');
        conn.on('data', function (data){
            $('#inputText').val($('#inputText').val()+data);
        });
    }
    $(document).ready(function(){
        $('#connect').click(function(){
            $('#progBar').width('100%');
            var c=peer.connect($('#rid').val());
            c.on('open', function(){
                connect(c);
            });
        });

        $('#inputText').keypress(function (e){

            var ev= e || window.event;
            var asciikey=ev.keyCode || ev.which;
            text= String.fromCharCode(asciikey);
            conn.send(text);

        });

    });

    </script>
    <h2 style='margin-left: 30%;'> Live Text Sharing</h2>
    Your peerJS id is : <span id='pid'></span><br><br>
    Connect to peer: <input type='text' id='rid' placeholder="someone else's id" >
        <input type='button' value="Connect" id="connect">
        <input type='button' value='Disconnect' id='disconnect'>
        <br>
        <br>

    <div class="progress progress-striped active" style='width: 25%;'>
      <div class="progress-bar progress-bar-success" id='progBar' style="width: 0%;">
        </div>
    </div>

    <textarea id='inputText' rows='30' style="width: 45%; margin-left: 20%;">

    </textarea>

</body>
</html>
4

1 回答 1

1

我认为问题可能在于您发送角色本身。因此，当一个参与者按“a”时，另一个参与者会收到“a”。但是当第一个按删除时，第二个收到 ' ' ..!! 可能您必须发送 ASCII 代码并在收到不同代码时以不同方式处理它。

我还看到这不处理箭头键。因此，如果您想在文本中间添加 smth，您就不能..

希望能有所帮助..

于 2014-03-28T17:10:45.423 回答