使用 Quill 進行 socket.io 富文本編輯

Question

我試圖用 socket.io 實現 Quill API 來構建一個實時編輯器。 我能夠發出 Delta，但 quill.updateContents() 似乎沒有用發出的 Delta op 數據更新文本編輯器。

這是我的代碼：

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);
    });
});

我將非常感謝您的幫助！

Answer 1

我認為您忘記將 json 代碼轉換回對象..您在將數據發送到套接字服務器之前將數據轉換為 json 字符串。 所以你收到的日期總是一個字符串而不是一個 json.object。

// Replace

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

// with 

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

我打算制作一個類似的編輯器，這樣我就可以觀看/分享代碼編輯。

親切的問候。

使用 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