用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富文本编辑

回答

相关问题