​嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

am-editor 是一个基于 JavaScript 的富文本编辑器，它没有使用原生的可编辑属性 contenteditable，而是采用自定义的渲染器。这样做可以更好地控制编辑器的行为，并实现更丰富的功能。

项目特点

• 🎁 开箱即用，提供几十种丰富的插件来满足大部分需求

• 🚀 高扩展性，除了mark inline block 类型基础插件外，我们还提供card组件结合React Vue等前端库渲染插件UI

• 🎨 丰富的多媒体支持，不仅支持图片和音视频，更支持插入嵌入式多媒体内容

• 📝 支持Markdown语法

• 🌍 支持国际化

• 💻 引擎纯JavaScript编写，不依赖任何前端库，插件可以使用React Vue等前端库渲染。复杂架构轻松应对

• 👥 内置协同编辑方案，轻量配置即可使用

• 📱 兼容大部分最新移动端浏览器

插件支持

AmEditor 提供丰富的插件，涵盖各种功能，例如：

• 工具栏： 提供工具栏组件，方便用户进行格式设置。

• 对齐方式： 支持文本对齐方式设置。

• 嵌入网址： 支持嵌入网页内容。

• 背景色： 支持设置文本背景色。

• 加粗： 支持加粗文本。

• 代码： 支持插入代码块和行内代码。

• 字体颜色： 支持设置字体颜色。

• 字体： 支持设置字体样式。

• 字体大小： 支持设置字体大小。

• 标题： 支持设置标题样式。

• 分割线： 支持插入分割线。

• 缩进： 支持文本缩进。

• 斜体： 支持斜体文本。

• 链接： 支持插入链接。

• 行高： 支持设置行高。

• 标记： 支持文本标记。

• 提及： 支持提及功能。

• 有序列表： 支持有序列表。

• 格式刷： 支持格式刷功能。

• 引用块： 支持插入引用块。

• 重做： 支持重做操作。

• 移除样式： 支持移除文本样式。

• 全选： 支持全选操作。

• 状态： 支持设置文本状态。

• 删除线： 支持删除线文本。

• 下标： 支持下标文本。

• 上标： 支持上标文本。

• 任务列表： 支持任务列表功能。

• 下划线： 支持下划线文本。

• 撤销： 支持撤销操作。

• 无序列表： 支持无序列表。

• 图片： 支持插入图片。

• 表格： 支持插入表格。

• 文件： 支持插入文件。

• 标记光标： 支持标记光标，例如批注功能。

• 数学公式： 支持插入数学公式。

• 视频： 支持插入视频。

快速上手

安装

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

使用

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],
});

卡片

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

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

协同编辑

am-editor 支持协同编辑，通过 Yjs 和 WebSocket 实现多用户实时协作。

交互模式

• 客户端：使用 @aomao/plugin-yjs-websocket 插件与服务器通信。

• 服务端：使用 Node.js 编写，并支持使用 MongoDB 和 LevelDB 存储数据。

项目图标

am-editor 的项目图标使用 Iconfont 制作，提供了丰富的图标资源。

项目预览

aomao-preview

同类项目

• CKEditor： 一个流行的开源富文本编辑器，提供了丰富的插件和定制功能。

• TinyMCE： 另一个流行的开源富文本编辑器，也提供了丰富的插件和定制功能。

• Quill： 一个轻量级的富文本编辑器，具有良好的性能和可定制性。

与这些同类项目相比，am-editor 的优势在于其丰富的插件和扩展功能，以及内置的协同编辑方案。

总结

am-editor 是一个功能强大的富文本编辑器，它提供了丰富的插件和扩展功能，支持协同编辑，并具有良好的移动端兼容性。如果你正在寻找一个功能丰富、易于使用的富文本编辑器，am-editor 是一个不错的选择。