超碰人人人人人,色婷婷综合久久久久中文一区二区,国产-第1页-浮力影院,欧美老妇另类久久久久久

協(xié)同文檔

在平時的開發(fā)中，協(xié)同文檔真的幫助到了我們很多，他可以應用到很多場景，比如：

• 需求文檔同步
• 信息收集
• 公司內(nèi)部文檔編寫

所以現(xiàn)階段協(xié)同文檔也是市面上很火的一種趨勢，比較火的產(chǎn)品有：

• 企微文檔
• 飛書文檔
• 語雀
• 等等。。。。

協(xié)同

想要實現(xiàn)協(xié)同文檔，其實有一個最大的痛點，那就是 協(xié)同。

通俗點說就是：兩個人同時編輯同一個文檔，就會有沖突，那么這個沖突應該怎么解決？

為了解決這個問題，市面上出現(xiàn)了兩種算法（不是本文重點）

• OT （Operational transformation）
• CRDT（Conflict-free Replicated Data Type）

這不是本文重點，如果不想看可以直接跳到下面的代碼實戰(zhàn)~

OT

實現(xiàn)協(xié)同文檔

接下來開始實現(xiàn)一個簡單的協(xié)同文檔！??！

裝庫

我們需要先安裝幾個庫

npm i yjs y-quill 
      quill quill-cursors 
      y-websocket

• yjs： 一個集成 CRDT 算法的同步庫，是此次協(xié)同文檔的核心
• quill： 一個富文本編輯器
• quill-cursors： 一個quill的插件，用于顯示多個光標，因為多個用戶共同編輯就會有多個光標
• y-quill： 可以理解為他能將yjs和quill融合起來，實現(xiàn)協(xié)同
• y-websocket： 一個yjs的庫，作用是將數(shù)據(jù)同步到多個客戶端

客戶端

<div id="app"></div>
import * as Y from 'yjs';
import { QuillBinding } from 'y-quill';
import Quill from 'quill';
import QuillCursors from 'quill-cursors';
import { WebsocketProvider } from 'y-websocket';
import 'quill/dist/quill.snow.css'; // 使用了 snow 主題色
// 使用 cursors 插件
Quill.register('modules/cursors', QuillCursors);
const quill = new Quill(document.querySelector('#app'), {
  modules: {
    cursors: true,
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
    ],
    history: {
      userOnly: true,
    },
  },
  placeholder: '林三心不學挖掘機...',
  theme: 'snow',
});
const ydoc = new Y.Doc(); // y 文檔對象，保存需要共享的數(shù)據(jù)
const ytext = ydoc.getText('quill'); // 創(chuàng)建名為 quill 的 Text 對象
// 連接到 websocket 服務端
const provider = new WebsocketProvider('ws://localhost:1234', 'quill-demo-room', ydoc);
// 數(shù)據(jù)模型綁定，再綁上光標對象
const binding = new QuillBinding(ytext, quill, provider.awareness);

服務端

只需要在終端里運行

HOST=localhost PORT=1234 npx y-websocket

效果

現(xiàn)在就可以實現(xiàn)協(xié)同文檔的效果啦?。。?/p>

?轉(zhuǎn)自https://juejin.cn/post/7297522590683168783