Skip to content

Latest commit

 

History

History
333 lines (237 loc) · 9.26 KB

README.md

File metadata and controls

333 lines (237 loc) · 9.26 KB
Raw

wiz-editor 多人实时编辑器使用说明

wiz-editor是一个支持多人实时协同编辑的网页富文本编辑。

  1. 官网：https://wiz-editor.com/
  2. 在线演示：https://api.wiz-editor.com/demo.html

视频演示

live-editor-video.mp4

编辑器主要特性

  1. 支持多人实时协同编辑，单一文档可以支持多达1000人同时编辑器。
  2. 支持扩展各种业务模块。可以自定义行内/行间模块。
  3. 可以接入业务用户系统及权限，文档权限完全由业务控制。
  4. 纯h5原生开发，可以直接嵌入各种web应用中
  5. 允许脱离服务端直接使用（此时无多人实时协作能力，可作为传统网页编辑器使用）
  6. 支持word文件导入，office文件预览
  7. 支持markdown语法
  8. 完整的二次开发支持。所有接口均有typescript定义。

适用场景

开发企业在线文档/wiki等应用。

wiz-editor专门为在线文档而开发，已为多家企业提供集成服务。wiz-editor提供了强大的扩展能力，可以将企业的业务集成到文档里面。 例如，常规的提醒，任务，日历等整合，可以和企业内部的IM，任务系统进行整合。同时利用模版能力，可以快速的生成各种文档，例如合同， 周报等。

同时，wiz-editor可以无缝的和企业内部的用户和权限进行整合，无需用户多次登录。

利用wiz-editor多人实时协同编辑的特点，企业内共享的文档，无需担心版本冲突的问题，让文档永远保持最新版本。

作为富文本编辑器使用

wiz-editor可以替换传统的网页编辑器，例如各种博客的编辑器等。即使不需要多人实时协同编辑， 也可以单独使用wiz-editor客户端（无需依赖服务端）。这样可以充分利用wiz-editor强大的编辑功能。

作为markdown编辑器使用

wiz-editor提供了完整的markdown功能，可以利用markdown语法直接编写文档。同时支持markdown导入/导出功能。

编辑器详细功能

文字样式

  • 标题（1-5）
  • 有序/无需列表
  • 任务清单 （可以在任务清单中设置截止日期，@相关成员）
  • 文字引用
  • 文字颜色/背景色
  • 粗体，斜体，下划线，删除线等
  • 任意的css样式

行内对象

  • 链接
  • latex公式
  • 提醒
  • 评论
  • 其它自定义行内样式

块对象

  • 文字（普通文字，标题，列表，任务清单）
  • 图像，视频，音频
  • 表格
  • 网页（例如各种视频网站的视频，地图等）
  • mermaid图形（Flowchart, Sequence Diagram, Class Diagram等）
  • UML图表等（drawio）
  • 各种复杂布局
  • 图表（chart.js）
  • office, pdf文件（支持office, pdf文件预览）
  • 代码，支持语法高亮

块对象状态

  • 锁定状态。可以锁定某些块，则这些块元素无法被删除和编辑
  • 手写标记（可通过手写工具标注某些文字并保留记录）

编辑器功能

  • 支持markdown语法
  • 支持markdown only模式（仅支持markdown功能，此时可以作为一个markdown编辑器使用，并且保存数据为markdown）
  • 支持离线模式（无需编辑服务，仅作为一个纯前端编辑器，可直接替换业务中原有的编辑器）
  • 支持导入/导出markdown
  • 支持导出html
  • 支持导入docx文件
  • 支持focus模式，支持打字机模式
  • 支持将列表作为思维导图显示
  • 支持theme，支持夜间模式（可自动切换，可禁用）

1

2

运行demo

包含编辑器服务端，可以直接在本机测试运行。

直接从git clone或者下载代码，解压缩到磁盘。

注意：需要nodejs 14或者更高的版本

运行原生js例子

  1. 安装和运行
cd h5
npm install
npm start
  1. 打开浏览器
localhost:9000

更多demo

cd h5
# 完整的自定义扩展例子，包含外部工具栏，各种自定义组件等
npm run custom
# 极简编辑器，无外部UI
npm run simple
# 各种自定义box
npm run calendar
npm run date
npm run mention
npm run label

在自己的项目中使用wiz-editor

通过npm安装wiz-editor

npm i wiz-editor

在项目中使用wiz-editor

import {
  createEditor,
  Editor,
} from 'wiz-editor/client';

// 定义AppID，AppSecret, AppDomain。在自带的测试服务器中，下面三个key不要更改
const AppId = '_LC1xOdRp';
const AppSecret = '714351167e39568ba734339cc6b997b960ed537153b68c1f7d52b1e87c3be24a';
const AppDomain = 'wiz.cn';

// 初始化服务器地址
const WsServerUrl = window.location.protocol !== 'https:'
  ? `ws://${window.location.host}`
  : `wss://${window.location.host}`;

// 定义一个用户。该用户应该是由应用服务器自动获取当前用户身份
// 编辑服务需要提供用户id以及用户的显示名。
const user = {
  userId: `${new Date().valueOf()}`,
  displayName: 'test user',
  avatarUrl: 'xxx',
};

// 设置编辑器选项
const options = {
  serverUrl: WsServerUrl,
};

// 从应用服务器获取一个AccessToken。应用服务器需要负责验证用户对文档的访问权限。
// accessToken采用jwt规范，里面应该包含用户的userId，文档的docId，以及编辑应用的AppId。
// 下面是一个演示例子。在正常情况下，AccessToken应该通过用户自己的应用服务器生成。
// 因为在前端使用JWT加密规范的时候，必须在https协议下面的网页才可以使用。为了演示，
// 我们自带的测试服务器会提供一个虚拟的token生成功能。（启动服务的时候，需要指定--enable-fake-token-api 参数）
// 请勿在正式服务器上面，启用这个参数。

async function fakeGetAccessTokenFromServer(userId: string, docId: string): Promise<string> {
  //
  const data = {
    userId,
    docId,
    appId: AppId,
  };

  const fromHexString = (hexString: string) => {
    const parts = hexString.match(/.{1,2}/g);
    assert(parts);
    const arr = parts.map((byte) => parseInt(byte, 16));
    return new Uint8Array(arr);
  };
  //
  const key = fromHexString(AppSecret);

  try {
    const accessToken = await new EncryptJWT(data)
      .setProtectedHeader({ alg: 'dir', enc: 'A256GCM' })
      .setIssuedAt()
      .setIssuer(AppDomain)
      .setExpirationTime('120s')
      .encrypt(key);

    return accessToken;
  } catch (err) {
    const res = await fetch(`http://${window.location.host}/token/${AppId}/${docId}/${userId}`);
    const ret = await res.json();
    return ret.token;
  }
}

// 文档id
const docId = 'my-test-doc-id';

(async function loadDocument() {
  // 验证身份，获取accessToken
  const token = await fakeGetAccessTokenFromServer(user.userId, docId);

  // 生成编辑服务需要的认证信息
  const auth = {
    appId: AppId,
    userId: user.userId,
    displayName: 'name'
    avatarUrl: 'xxx',
    docId,
    token,
    permission: 'w',
  };

  // 创建编辑器并加载文档
  const editor = createEditor(document.getElementById('editor') as HTMLElement, options, auth);
})();

通过上面的代码，就可以在自己的应用中，创建一个多人实时协同编辑器。 上面的代码，可以通过在h5例子下面，运行npm run simple来查看效果。

查看源码

react 组件

wiz-editor-react

直接在浏览器里面使用（无需npm）

<script src='https://cdn.jsdelivr.net/npm/[email protected]/client/src/index.js' charset="utf-8"></script>

<script>
const {
  Editor,
  createEditorPromise,
  assert,
  BlockElement,
  blockUtils,
  containerUtils,
  CommandItemData,
  MenuItem,
  domUtils,
  getEditor,
  AuthMessage,
  OnProgress,
  EditorOptions,
  SelectionDetail,
  EditorDoc,
} = window.WizEditor;
</script>

扩展编辑器功能

编辑器结构

自定义@xxx提醒用户功能

增加插入提醒功能

响应评论消息

响应评论消息

自定义inline的模块（box）

自定义box说明

自定义block按钮/菜单

自定义block按钮/菜单

自定义文字样式

自定义文字样式

自定义模版

自定义文档模版

自定义block

编辑器结构

自定义Embed类型block

自定义Complex类型block

服务端

wiz-editor 服务端适配

wiz-editor 服务端架构介绍

完全作为本地编辑器使用，无需依赖服务端

local demo

通过cdn使用编辑器代码

CDN demo

自定义UI

自定义浮动工具栏

响应编辑器事件

响应编辑器事件

给在线用户发送自定义消息

发送自定义消息