am-editor

am-editor，一个基于ShareDBWeb 多人协同富文本编辑器，适用于React、Vue框架，与主流的现代浏览器兼容。

查看在线文档及演示

技术交流 QQ 群：907664876

特性

• 📦 开箱即用，提供几十种丰富的插件
• 📋 丰富的多媒体支持，不仅支持图片和音视频，更支持插入嵌入式多媒体内容
• 🏷 引擎基于原生 JavaScript 开发，插件 UI 支持 React、Vue 等框架渲染
• 📡 内置协同编辑方案，轻量配置即可使用

所有插件

• @aomao/plugin-alignment 对齐方式
• @aomao/plugin-backcolor 背景色
• @aomao/plugin-bold 加粗
• @aomao/plugin-code 行内代码
• @aomao/plugin-codelock 块级代码
• @aomao/plugin-fontcolor 前景色
• @aomao/plugin-fontsize 字体大小
• @aomao/plugin-heading 标题
• @aomao/plugin-hr 分割线
• @aomao/plugin-indent 缩进
• @aomao/plugin-italic 斜体
• @aomao/plugin-link 链接
• @aomao/plugin-mark 标记
• @aomao/plugin-orderedlist 有序列表
• @aomao/plugin-paintformat 格式刷
• @aomao/plugin-quote 引用
• @aomao/plugin-redo 重做历史
• @aomao/plugin-removeformat 移除格式
• @aomao/plugin-selectall 全选
• @aomao/plugin-strikethrough 删除线
• @aomao/plugin-sub 下标
• @aomao/plugin-sup 上标
• @aomao/plugin-tasklist 任务列表
• @aomao/plugin-underline 下划线
• @aomao/plugin-undo 撤销历史
• @aomao/plugin-unorderedlist 无序列表
• @aomao/plugin-image 图片
• @aomao/plugin-video 视频
• @aomao/plugin-table 表格

快速上手

安装

am-editor 中引擎、工具栏、每个插件都是单独的包。其中引擎是最核心的包，其它包都将依赖它

使用 npm 或者 yarn 安装引擎包

$ npm install @aomao/engine
# or
$ yarn add @aomao/engine

Vue 使用者请看 https://github.com/itellyou-com/am-editor/tree/master/demo-vue

使用

我们按照惯例先输出一个Hello word!

import React, { useEffect, useRef, useState } from 'react';
import Engine, { EngineInterface } from '@aomao/engine';

const EngineDemo = () => {
	//编辑器容器
	const ref = useRef<HTMLDivElement | null>(null);
	//引擎实例
	const [engine, setEngine] = useState<EngineInterface>();
	//编辑器内容
	const [content, setContent] = useState<string>('Hello word!');

	useEffect(() => {
		if (!ref.current) return;
		//实例化引擎
		const engine = new Engine(ref.current);
		//初始化本地协作，用作记录历史
		engine.ot.initLockMode();
		//设置编辑器值
		engine.setValue(content);
		//监听编辑器值改变事件
		engine.on('change', value => {
			setContent(value);
			console.log(`value:${value}`);
		});
		//设置引擎实例
		setEngine(engine);
	}, []);

	return <div ref={ref} />;
};
export default EngineDemo;

插件

现在我们在上诉代码基础上，引入@aomao/plugin-bold加粗插件

import Bold from '@aomao/plugin-bold';

然后将Bold插件加入引擎

//实例化引擎
const engine = new Engine(ref.current, {
	plugin: [Bold],
});

卡片

卡片是编辑器中单独划分的一个区域，其 UI 以及逻辑在卡片内部可以使用 React、Vue 或其它框架自定义渲染内容，最后再挂载到编辑器上。

引入@aomao/plugin-codeblock代码块插件，这个插件部分 UI 使用框架渲染，所以有区分。 vue开发者使用 @aomao/plugin-codeblock-vue

import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock';

将CodeBlock插件和CodeBlockComponent卡片组件加入引擎

//实例化引擎
const engine = new Engine(ref.current, {
	plugins: [CodeBlock],
	cards: [CodeBlockComponent],
});

CodeBlock插件默认支持markdown，在编辑器一行开头位置输入代码块语法```javascript回车后，看看效果吧

工具栏

引入@aomao/toolbar工具栏，工具栏基本上都是使用框架渲染，vue开发者使用 @aomao/toolbar-vue

import Toolbar, { ToolbarPlugin, ToolbarComponent } from '@aomao/toolbar';

将ToolbarPlugin插件和ToolbarComponent卡片组件加入引擎，它将让我们在编辑器中可以使用快捷键/唤醒出工具栏

//实例化引擎
const engine = new Engine(ref.current, {
	plugins: [ToolbarPlugin],
	cards: [ToolbarComponent],
});

渲染工具栏，工具栏已配置好所有插件，这里我们只需要传入插件名称即可

return (
    ...
    {
        engine && (
            <Toolbar
                engine={engine}
                items={[
                    ['collapse'],
                    [
                        'bold',
                    ],
                ]}
            />
        )
    }
    ...
)

协同编辑

协同编辑基于ShareDB实现。每位编辑者作为客户端通过WebSocket与服务端通信交换数据。编辑器处理数据、渲染数据。

我们将 客户端 和 服务端 搭建好后 开启协同编辑。查看完整示例

//实例化协作编辑客户端，传入当前编辑器引擎实例
const otClient = new OTClient(engine);
//连接到协作服务端，`demo` 与服务端文档ID相同
otClient.connect(
	`ws://127.0.0.1:8080${currentMember ? '?uid=' + currentMember.id : ''}`,
	'demo',
);