嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
am-editor 是一个基于 JavaScript 的富文本编辑器，它没有使用原生的可编辑属性
contenteditable，而是采用自定义的渲染器。这样做可以更好地控制编辑器的行为，并实现更丰富的功能。
项目特点
- 🎁 开箱即用，提供几十种丰富的插件来满足大部分需求
- 🚀 高扩展性，除了
markinlineblock类型基础插件外，我们还提供card组件结合ReactVue等前端库渲染插件UI - 🎨 丰富的多媒体支持，不仅支持图片和音视频，更支持插入嵌入式多媒体内容
- 📝 支持
Markdown语法 - 🌍 支持国际化
- 💻 引擎纯
JavaScript编写，不依赖任何前端库，插件可以使用ReactVue等前端库渲染。复杂架构轻松应对 - 👥 内置协同编辑方案，轻量配置即可使用
- 📱 兼容大部分最新移动端浏览器
插件支持
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 是一个不错的选择。
项目地址
https://github.com/red-axe/am-editor
