AM Editor 开源项目教程

1. 项目介绍

AM Editor 是一个支持协同编辑的富文本编辑器，可以自由地使用 React、Vue 等前端常用库扩展定义插件。它提供了丰富的功能，包括多媒体支持、Markdown 语法支持、国际化支持等。AM Editor 的核心编辑能力由引擎提供，用户可以通过安装引擎包来使用编辑器。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm（或 yarn）。然后，在项目根目录下执行以下命令来安装依赖：

npm install @aomao/engine
# 或者使用 yarn
yarn add @aomao/engine

使用示例

以下是一个简单的 React 示例，展示如何使用 AM Editor：

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>('<p>Hello world</p>');

  useEffect(() => {
    if (!ref.current) return;
    // 实例化引擎
    const engine = new Engine(ref.current);
    // 设置编辑器值
    engine.setValue(content);
    // 监听编辑器值变化事件
    engine.on('change', () => {
      const value = engine.getValue();
      setContent(value);
      console.log(`value:${value}`);
    });
    // 设置引擎实例
    setEngine(engine);
  }, []);

  return <div ref={ref} />;
};

export default EngineDemo;

添加插件

你可以通过引入插件来扩展编辑器的功能。例如，引入一个加粗插件：

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

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

3. 应用案例和最佳实践

应用案例

AM Editor 可以广泛应用于各种需要富文本编辑的场景，例如博客平台、内容管理系统（CMS）、在线文档编辑等。其协同编辑功能特别适合团队协作的场景，如在线协作文档、实时编辑会议记录等。

最佳实践

1. 插件扩展：根据项目需求，自由选择和扩展插件，以满足特定的编辑需求。
2. 国际化支持：利用 AM Editor 的国际化功能，为不同语言的用户提供友好的编辑体验。
3. 性能优化：在处理大量文本和多媒体内容时，注意优化编辑器的性能，避免卡顿。

4. 典型生态项目

相关项目

• @aomao/toolbar：提供一个适用于 React 的工具栏，方便用户快速操作编辑器。
• @aomao/toolbar-vue：适用于 Vue3 的工具栏插件。
• @aomao/plugin-yjs-websocket：提供 WebSocket 客户端功能，支持协同编辑。

生态系统

AM Editor 的生态系统还包括一系列插件和工具，帮助开发者快速构建功能丰富的富文本编辑器。通过这些插件，开发者可以轻松实现多媒体嵌入、代码块编辑、表格处理等功能。

---

通过以上步骤，你可以快速上手并使用 AM Editor 构建强大的富文本编辑器。希望这篇教程对你有所帮助！