Node.js 如何在quill到Angular 8中实现多个游标?
我正在尝试在Quill中实现协作编辑,为此,我使用Angular作为前端,在后端使用Node。我已经用mongo适配器和前端的ngx quill模块设置了sharedb。然而,我不知道如何在Angular 8中实现羽毛笔游标模块 我的套接字服务Node.js 如何在quill到Angular 8中实现多个游标?,node.js,angular,websocket,quill,ngx-quill,Node.js,Angular,Websocket,Quill,Ngx Quill,我正在尝试在Quill中实现协作编辑,为此,我使用Angular作为前端,在后端使用Node。我已经用mongo适配器和前端的ngx quill模块设置了sharedb。然而,我不知道如何在Angular 8中实现羽毛笔游标模块 我的套接字服务 import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class SocketsService { connection: an
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SocketsService {
connection: any;
sharedb: any;
socket:any;
doc: any;
constructor() {
this.sharedb = require('sharedb/lib/client');
this.sharedb.types.register(require('rich-text').type);
// Open WebSocket connection to ShareDB server
this.socket = new WebSocket('ws://localhost:8080/sharedb');
this.connection = new this.sharedb.Connection(this.socket);
this.doc = this.connection.get('examples', 'richtext');
}
}
我的编辑器组件
import {ViewChild, Component, OnInit} from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill';
import QuillCursors from 'quill-cursors';
import {SocketsService} from '../sockets.service';
import {HttpClient} from '@angular/common/http';
import Quill from 'quill';
import 'quill-mention';
import jsondecoder from 'jsonwebtoken/decode.js'
Quill.register('modules/cursors', QuillCursors);
const Tooltip = Quill.import('ui/tooltip');
@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit{
@ViewChild(QuillEditorComponent, { static: true })
editor: QuillEditorComponent;
content = '';
myTooltip:any;
public modules: any;
private socket: any;
private http: HttpClient;
ngOnInit(){
}
constructor()
{
this.socket = new SocketsService();
this.modules = {
cursors: {
transformOnTextChange: true
},
mention: {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
onSelect: (item, insertItem) => {
const editor = this.editor.quillEditor as Quill
insertItem(item) // necessary because quill-mention triggers changes as 'api' instead of 'user'
editor.insertText(editor.getLength() - 1, '', 'user')
},
source: (searchTerm, renderList) => {
const values = [
{ id: 1, value: 'Alec'},
{ id: 2, value: 'Irshad'},
{ id: 3, value: 'Anmol'},
{ id: 4, value: 'MunMun'},
{ id: 5, value:'Zoya'}
]
if (searchTerm.length === 0) {
renderList(values, searchTerm)
} else {
const matches = []
values.forEach((entry) => {
if (entry.value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
matches.push(entry)
}
})
renderList(matches, searchTerm)
}
}
}
}
}
editorCreated($event){
this.socket.doc.subscribe((err)=>{ // Get initial value of document and subscribe to changes
if(err) throw err;
$event.setContents(this.socket.doc.data);
this.socket.doc.on('op', (op, source)=>{
if (source === 'quill') return;
$event.updateContents(op);
});
});
}
logChanged($event)
{
if ($event.source !== 'user') return;
this.socket.doc.submitOp($event.delta, {source: 'quill'});
}
}
我的节点后端代码
var ShareDB = require('@teamwork/sharedb');
var richText = require('rich-text');
ShareDB.types.register(richText.type);
const mongodb = require('mongodb');
const db = require('@teamwork/sharedb-mongo')({mongo: function(callback) {
mongodb.connect('mongodb://localhost:27017/test',{useUnifiedTopology: true},callback);
}});
const shareDBServer= new ShareDB({db, disableDocAction: true, disableSpaceDelimitedActions: true});
var connection = shareDBServer.connect();
var doc = connection.get('examples', 'richtext');
doc.fetch(function(err) {
if (err) throw err;
if (doc.type === null) {
doc.create([{insert: 'Document Ready'}], 'rich-text', callback);
return;
}
});
var wss = new WebSocket.Server({
noServer: true
});
wss.on('connection', function(ws, req) {
ws.isAlive = true;
var stream = new WebSocketJSONStream(ws);
shareDBServer.listen(stream);
ws.on('pong', function(data, flags) {
ws.isAlive = true;
});
ws.on('error', function(error) {
console.log('Error');
});
});
我的问题是在我的编辑器组件中导入quill游标模块后,如何实现它?首先,您必须将quill安装到您的angular项目中
npm install ngx-quill
对于使用Angularnpm安装ngx的项目-quill@1.6.0
在你的app.module.ts中
从ngx纬管导入纬管模块:
import { QuillModule } from 'ngx-quill';
将QuillModule添加到NgModule的导入中:
@NgModule({
imports: [
...,
QuillModule.forRoot()
],
...
})
class YourModule { ... }
在模板中使用
添加默认的羽毛笔编辑器
参考如果您指的是协作编辑,请尝试Yjs和Quill。他们已经将完全协同编辑与CRDT集成。您能添加到目前为止的代码吗?这并不能回答OP的问题。如何在Pill到Angular 8中实现多个游标?我已经做到了,下一部分是使用Pill游标模块实现多个游标。我想知道我可以用什么方法来实现这个模块你知道吗@AlecAldrineLakraYes安装ngx纬管并按照文档进行操作