socket.io 퀼로 리치 텍스트 편집

나는 실시간 에디터를 만들기 위해 socket.io로 Quill API를 구현하려고 시도했다. 델타를 방출 할 수 있었지만 quill.updateContents()가 텍스트 편집기를 방출 된 델타 데이터로 업데이트하지 않는 것 같습니다.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

답변

관련 문제