如何通过Angular8在quill中实现多个游标？

Question

我正在尝试在 Quill 中实现协作编辑，为此我使用 Angular 作为前端，在后端使用 Node。我已经在前端设置了带有 mongo 适配器的 sharedb 和 ngx-quill 模块。但是我很困惑如何在 Angular 8 ?

中实现羽毛笔游标模块

我的套接字服务

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-cursors 模块后，我该如何实现它？

Answer 1

首先，您必须将 quill 安装到您的 angular 项目

npm install ngx-quill

对于使用 Angular < v5.0.0 安装的项目 npm install ngx-quill@1.6.0

在你的 app.module.ts 从 ngx-quill 导入 QuillModule:

import { QuillModule } from 'ngx-quill';

将 QuillModule 添加到您的 NgModule 的导入中：

@NgModule({
  imports: [
    ...,

    QuillModule.forRoot()
  ],
  ...
})
class YourModule { ... }

在模板中使用 <quill-editor></quill-editor> 添加默认的羽毛笔编辑器

参考ngx-quill

Answer 2

如果您指的是协同编辑，请尝试 Yjs with Quill。他们已经将完整的协同编辑与 CRDT 集成在一起。

如何通过Angular8在quill中实现多个游标？

How do I implement multiple cursors in quill through Angular 8?

node.js

angular

websocket

quill

ngx-quill