使用 Quill 进行 socket.io 富文本编辑

Question

I was trying to implement Quill API with socket.io to build a realtime editor.我试图用 socket.io 实现 Quill API 来构建一个实时编辑器。 I was able to get the Delta emitted, but quill.updateContents() does not seems to update the text editor with the emitted Delta op data.我能够发出 Delta，但 quill.updateContents() 似乎没有用发出的 Delta op 数据更新文本编辑器。

Here is my code:这是我的代码：

index.html (client side) 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 (server side) 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);
    });
});

I will really appreciate your help!我将非常感谢您的帮助！

Answer 1

i think you forget to convert the json code back to an object.. you convert the data before sending to your socket server to a json string.我认为您忘记将 json 代码转换回对象..您在将数据发送到套接字服务器之前将数据转换为 json 字符串。 So the date you receive would alway be a string instead of an json.object.所以你收到的日期总是一个字符串而不是一个 json.object。

// Replace

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

// with 

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

i'm planning to make a similar kind of editor, so i can watch / share code editing.我打算制作一个类似的编辑器，这样我就可以观看/分享代码编辑。

Kind Regard.亲切的问候。

使用 Quill 进行 socket.io 富文本编辑

问题描述

1 个解决方案

解决方案1
1 2016-11-14 03:10:18

使用 Quill 进行 socket.io 富文本编辑

问题描述

1 个解决方案

解决方案1 1 2016-11-14 03:10:18

解决方案1
1 2016-11-14 03:10:18