socket.ioリッチテキスト編集with Quill

私はリアルタイムエディタを構築するためにsocket.ioでQuill APIを実装しようとしていました。私はデルタを発行することができましたが、quill.updateContents（）は、テキストエディタを放出されたデルタ演算データで更新していないようです。socket.ioリッチテキスト編集with Quill

index.htmlを（クライアント側）

<!DOCTYPE html> 
<html> 
<head> 
    <title>Connected Clients</title> 
    <!--<meta charset="UTF-8"> --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <!--<script type="text/javascript" src="jquery.js"></script> --> 
    <script src="/socket.io/socket.io.js"></script> 
    <link href="https://cdn.quilljs.com/1.1.1/quill.snow.css" rel="stylesheet"> 
    <link href="https://cdn.quilljs.com/1.1.2/quill.snow.css" rel="stylesheet"> 
</head> 

<body> 
    <div id="editor"> 
    <p>Hello World!</p> 
    <p>Some initial <strong>bold</strong> text</p> 
    <p><br></p> 
    </div> 

    <span id="insertHere"></span> 

    <script src="https://cdn.quilljs.com/1.1.2/quill.js"></script> 
    <script> 
     $(document).ready(function() { 
     var quill = new Quill('#editor', { 
      theme: 'snow' 
     }); 

     var socket = io(); 
     socket.on('updated_para',function(data){ 
      var el = document.getElementById('insertHere'); 
      el.innerHTML = data; 
      var ops = data; 
      quill.updateContents(data); 
     }); 

     quill.on('text-change', function(delta, source) { 
      var para = quill.getContents(); 
      socket.emit('para',{delta:JSON.stringify(delta.ops)}); 
     }); 
    }); 
    </script> 
</body> 
</html>

index.js（サーバ側）

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 


http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
}); 

io.sockets.on('connection', function(socket){ 
    console.log('a user connected'); 

    socket.on('disconnect', function(){ 
     console.log('user disconnected'); 
    }); 

    socket.on('para',function(data){ 
     io.emit('updated_para',data.delta); 
     console.log('message: ' + data.delta); 
    }); 
});

私は本当にあなたの助けに感謝します：

は、ここに私のコードです！

出典

2016-10-24 Amber Han

jsonコードをオブジェクトに戻すのを忘れていると思います。ソケットサーバーにjson文字列を送信する前にデータを変換します。あなたが受け取る日付はいつもjson.objectではなく文字列になります。

// Replace 

var ops = data; 
quill.updateContents(data); 

// with 

var ops = JSON.parse(data); 
quill.updateContents(data);

私は、エディタの似たようなものを作るために計画していますので、私は/共有コードの編集を見ることができます。

種類

出典

2016-11-14 03:10:18

socket.ioリッチテキスト編集with Quill

答えて

関連する問題