用Quill編寫socket.io富文本編輯

我試圖用socket.io實現Quill API來構建一個實時編輯器。我能夠獲得Delta發射，但是quill.updateContents（）似乎沒有用發射的Delta操作數據更新文本編輯器。用Quill編寫socket.io富文本編輯

這裏是我的代碼：

的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

用Quill編寫socket.io富文本編輯

回答

相關問題