Слияние кода завершено, страница обновится автоматически
Здесь представлен новый редактор с богатым текстовым форматированием, названный Editable, который не использует встроенное свойство
contenteditable, а вместо этого применяет кастомный рендерер. Такой подход позволяет нам лучше контролировать поведение редактора.
Разработанный редактор с богатым текстовым форматированием, поддерживающий совместное редактирование, вы можете свободно использовать React, Vue и другие популярные библиотеки фронтенд-разработки для расширения и определения плагинов.
Просмотреть · Документация · Плагины
Vue 2 Nuxt Demo## Возможности
com/@aomao/plugin-hr/dist/index.js?compression=gzip&label= )(<https://unpkg.com/@aomao/plugin-hr/dist/index.js>) | Горизонтальная черта
| [`@aomao/plugin-indent`](./plugins/indent) | (./plugins/indent/package.json) | (https://unpkg.com/@aomao/plugin-indent/dist/index.js) | Отступ
| [`@aomao/plugin-indent`](./plugins/indent) | (./plugins/indent/package.json) | (https://unpkg.com/@aomao/plugin-indent/dist/index.js) | Отступ
| [`@aomao/plugin-italic`](./plugins/italic) | (./plugins/italic/package.json) | (https://unpkg.com/@aomao/plugin-italic/dist/index.js) | Курсив
| [`@aomao/plugin-link`](./plugins/link) | (./plugins/link/package.json) | (https://unpkg.com/@aomao/plugin-link/dist/index.js) | Ссылка, подходящая для `React`
| [`@aomao/plugin-link-vue`](./plugins/link-vue) | (./plugins/link-vue/package.json)
```/plugins/link-vue/package.json) | [](https://unpkg.com/@aomao/plugin-link-vue/dist/index.js) | Ссылка, предназначенная для `Vue3` |
| [`am-editor-link-vue2`](https://github.com/zb201307/am-editor-vue2/tree/main/packages/link) | [](https://github.com/zb201307/am-editor-vue2/tree/main/packages/link/package.json) | [](https://unpkg.com/am-editor-link-vue2/dist/index.js) | Ссылка, предназначенная для `Vue2` |
| [`@aomao/plugin-line-height`](./plugins/line-height) | [](./plugins/line-height/package.json) || [`@aomao/plugin-line-height`](./plugins/line-height) | [](./plugins/line-height/package.json) | [](https://unpkg.com/@aomao/plugin-line-height/dist/index.js) | Высота строки |
| [`@aomao/plugin-mark`](./plugins/mark) | [](./plugins/mark/package.json) | [](https://unpkg.com/@aomao/plugin-mark/dist/index.js) | Зачёркивание |
| [`@aomao/plugin-mention`](./plugins/mention) | [](./plugins/mention/package.json) | [](https://unpkg.com/@aomao/plugin-mention/dist/index.js) | Упоминание |
| [`@aomao/plugin-orderedlist`](./plugins/orderedlist) | [](./plugins/orderedlist/package.json) | [!```
[](/http://img.shields.io/https://unpkg.com/%40aomao/plugin-orderedlist/dist/index.js?compression=gzip&label=)/](https://unpkg.com/%40aomao/plugin-orderedlist/dist/index.js) | Нумерованный список |
| [`@aomao/plugin-paintformat`](./plugins/paintformat) |  | /](https://unpkg.com/%40aomao/plugin-paintformat/dist/index.js) | Форматирование кистью |
| [`@aomao/plugin-quote`](./plugins/quote) |  /](https://unpkg.com/%40aomao/plugin-quote/dist/index.js) | Цитата |
| [`@aomao/plugin-redo`](./plugins/redo) |  /](https://unpkg.com/%40aomao/plugin-redo/dist/index.js) | Отменить удаление |
| [`@aomao/plugin-removeformat`](./plugins/removeformat) |  /](https://unpkg.com/%40aomao/plugin-removeformat/dist/index.js) | Удалить формат |
| [`@aomao/plugin-selectall`](./plugins/selectall) | 
```| [`@aomao/plugin-selectall`](./plugins/selectall) | [](./plugins/selectall/package.json) | [](https://unpkg.com/@aomao/plugin-selectall/dist/index.js) | Выбор всего |
| [`@aomao/plugin-status`](./plugins/status) | [](./plugins/status/package.json) | [](https://unpkg.com/@aomao/plugin-status/dist/index.js) | Статус |
| [`@aomao/plugin-strikethrough`](./plugins/strikethrough) | [](./plugins/strikethrough/package.json) | [](https://unpkg.com/@aomao/plugin-strikethrough/dist/index.js) | Зачёркивание |
| [`@aomao/plugin-sub`](./plugins/sub) | [](./plugins/sub/package.json) | [](https://unpkg.com/@aomao/plugin-sub/dist/index.js) | Подстрочный текст |
| [`@aomao/plugin-sup`](./plugins/sup) | [](./plugins/sup/package.json) | [](https://unpkg.com/@aomao/plugin-sup/dist/index.js) | Надстрочный текст |```markdown
| [`@aomao/plugin-sup`](. /plugins/sup) | Надстрочный текст |
| [`@aomao/plugin-tasklist`](. /plugins/tasklist) | Список задач |
| [`@aomao/plugin-underline`](. /plugins/underline) | Подчеркивание |
| [`@aomao/plugin-undo`](. /plugins/undo) | Отмена |
| [`@aomao/plugin-unorderedlist`](. /plugins/unorderedlist) | Несắpированный список |
| [`@aomao/plugin-image`](. /plugins/image) | Изображение |
| [`@aomao/plugin-table`](. /plugins/table) | Таблица |
| [`@aomao/plugin-file`](. /plugins/file) | Файл |
```
Полностью:
```markdown
| [`@aomao/plugin-sup`](. /plugins/sup) | Надстрочный текст |
| [`@aomao/plugin-tasklist`](. /plugins/tasklist) | Список задач |
| [`@aomao/plugin-underline`](. /plugins/underline) | Подчеркивание |
| [`@aomao/plugin-undo`](. /plugins/undo) | Отмена |
| [`@aomao/plugin-unorderedlist`](. /plugins/unorderedlist) | Несắpированный список |
| [`@aomao/plugin-image`](. /plugins/image) | Изображение |
| [`@aomao/plugin-table`](. /plugins/table) | Таблица |
| [`@aomao/plugin-file`](. /plugins/file) | Файл |
```| [`@aomao/plugin-file`](. /plugins/file/package.json) | [](. /plugins/file/package.json) | [](https://unpkg.com/@aomao/plugin-file/dist/index.js) | Файл |
| [`@aomao/plugin-mark-range`](. /plugins/mark-range) | [](. /plugins/mark-range/package.json) | [](https://unpkg.com/@aomao/plugin-mark-range/dist/index.js) | Выделенный диапазон |
| [`@aomao/plugin-math`](. /plugins/math) | [](. /plugins/math/package.json) | [](https://unpkg.com/@aomao/plugin-math/dist/index.js) | Математическая формула |
| [`@aomao/plugin-video`](. /plugins/video) | [](. /plugins/video/package.json) | [](https://unpkg.com/@aomao/plugin-video/dist/index.js) | Видео |
## Начало работы### Установка
Редактор состоит из `engine`, `toolbar` и `plugins`. `engine` предоставляет основные возможности редактирования.
Используйте `npm` или `yarn` для установки пакета engine.
```bash
$ npm install @aomao/engine
# или
$ yarn add @aomao/engine
```
### Использование
Начнем с вывода сообщения "Hello world!" как обычно.
```tsx
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;
```
### Плагины
Импортируйте плагин жирного начертания `@aomao/plugin-bold`.
```tsx
import Bold from '@aomao/plugin-bold';
```
Добавьте плагин `Bold` в движок.
```tsx
//Инициализация движка
const engine = new Engine(ref.current, {
plugins: [Bold],
});
```
### Карты
Карта — это отдельно определенная область внутри редактора со своим пользовательским интерфейсом и логикой отображения пользовательского контента внутри карты с использованием `React`, `Vue` или других библиотек фронтенд-разработки перед монтированием на редактор.Приведите пример использования плагина `@aomao/plugin-codeblock`, который представляет собой плагин для блока кода с выпадающим списком языков, отрисованного с помощью React, что отличает его от Vue3 с использованием `@aomao/plugin-codeblock-vue`.
```tsx
import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock';
```
Добавьте плагин `CodeBlock` и компонент карты `CodeBlockComponent` в движок.
```tsx
// Инициализация движка
const engine = new Engine(ref.current, {
plugins: [CodeBlock],
cards: [CodeBlockComponent],
});
```
Плагин `CodeBlock` поддерживает `markdown` по умолчанию. Вы можете активировать его, набрав синтаксис блока кода в начале строки в редакторе, за которым следует пробел и имя языка, например ```javascript.
## Ограничения узлов
Для удобного управления узлами и снижения сложности редактор абстрагирует свойства узлов и их функциональность, а также определяет четыре типа узлов: `mark`, `inline`, `block` и `card`. Они состоят из различных атрибутов, стилей или структур `HTML` и унифицировано ограничиваются с помощью схемы.
Простая схема выглядит следующим образом:
```ts
{
name: 'p', // имя узла
type: 'block' // тип узла
}
```
Кроме того, могут быть указаны свойства, стили и т.д., например:```ts
{
name: 'span', // имя узла
type: 'mark', // тип узла
attributes: {
// Узел имеет атрибут стиля
style: {
// Должен содержать стиль цвета
color: {
required: true, // обязательно
value: '@color' // Значение должно соответствовать спецификациям CSS. @color — это валидация цвета, определенная в редакторе. Здесь можно использовать методы и регулярные выражения для проверки выполнения требуемых правил
}
},
// Включает опциональный атрибут test, значение которого может быть произвольным, но он не является обязательным
test: '*'
}
}
```Следующие типы узлов соответствуют вышеописанным правилам:
```html
<span style="color:#fff"></span>
<span style="color:#fff" test="test123" test1="test1"></span>
<span style="color:#fff;background-color:#000;"></span>
<span style="color:#fff;background-color:#000;" test="test123"></span>
```
Однако, кроме цвета и теста, определённых в схеме, остальные атрибуты (background-color, test1) будут отсеиваться редактором при обработке.
Узлы в редактируемой области имеют четыре типа объединённых узлов `mark`, `inline`, `block` и `card` через правило `schema`. Они состоят из различных атрибутов, стилей или структур `HTML`. Некоторым ограничениям накладывается условие на вложенность.
### Панель инструментов
Импортируйте панель инструментов `@aomao/toolbar`. Из-за сложной взаимодействия панель инструментов основана на рендере с использованием `React` + компонентов UI `Antd`, в то время как `Vue3` использует `@aomao/toolbar-vue`.
Помимо взаимодействия с пользовательским интерфейсом, большую часть работы панели инструментов составляет вызов движка для выполнения команд плагинов после активации событий кнопок. При сложных требованиях или необходимости переопределения пользовательского интерфейса проще сделать изменения после форка.```tsx
import Toolbar, { ToolbarPlugin, ToolbarComponent } from '@aomao/toolbar';
```
Добавьте плагин `ToolbarPlugin` и компонент карточки `ToolbarComponent` в движок, что позволяет использовать сочетание клавиш `/` в редакторе для активации панели инструментов карточек.```tsx
// Создайте экземпляр движка
const engine = new Engine(ref.current, {
plugins: [ToolbarPlugin],
cards: [ToolbarComponent],
});
```
Отображение панели инструментов, где все плагины уже настроены, здесь нам нужно передать только имя плагина.
```tsx
return (
...
{
engine && (
<Toolbar
engine={engine}
items={[
['collapse'],
[
'bold',
],
]}
/>
)
}
...
)
```
Для более сложной конфигурации панели инструментов, пожалуйста, проверьте документацию [https://editor.aomao.com/config/toolbar](https://editor.aomao.com/config/toolbar).
### Коллаборативное редактирование
Эта открытая библиотека прослушивает изменения в структуре `HTML` области редактирования (корневой узел contenteditable), использует `MutationObserver` для восстановления структуры данных, а затем связывается и взаимодействует с [Yjs](https://github.com/yjs/yjs) через `WebSocket`, чтобы обеспечить многопользовательское коллаборативное редактирование.
#### Интерактивный режим
Каждый редактор, как [клиент](https://github.com/red-axe/am-editor/blob/master/examples/react/components/editor/index.tsx#L250), общается и взаимодействует с [сервером](https://github.com/big-camel/am-editor/tree/master/yjs-server) через функцию `WebSocket` в плагине `@aomao/plugin-yjs-websocket`.
- `@aomao/yjs` реализует преобразование данных редактора и `Yjs`.
- `@aomao/plugin-yjs-websocket` предоставляет функцию клиентского `WebSocket` для редактора и `Yjs`.
- `@aomao/plugin-yjs-websocket/server` предоставляет серверный `WebSocket` для `Yjs`, написанный на Node.js, и поддерживающий хранение данных с использованием `MongoDB` и `LevelDB`.
```### Проектная иконка
[Iconfont](https://at.alicdn.com/t/project/1456030/0cbd04d3-3ca1-4898-b345-e0a9150fcc80.html?spm=a313x.7781069.1998910419.35)
## Разработка
### React
Перед использованием этой открытой библиотеки вам потребуется установить зависимости в корневом каталоге проекта.
```base
yarn install
```
Учиться использовать Bootstrap
После установки зависимостей вам нужно выполнить следующую команду в корневой директории для запуска проекта:
```bash
yarn start
```
Структура разработки открытой библиотеки выглядит следующим образом:
- `packages` содержит код движка и связанный с панелью инструментов
- `plugins` содержит все плагины
- `api` предоставляет доступ к API, необходимый некоторым плагинам, и использует https://editor.aomao.com как основной сервис API
- `yjs-server` содержит код сервера для совместной работы, который можно запустить через `yarn dev`.
### Vue
[пример am-editor vue](https://github.com/red-axe/am-editor-vue3-demo)
## Вклад
Благодарность [pleasedmi](https://github.com/pleasedmi)、[Elena211314](https://github.com/Elena211314)、[zb201307](https://github.com/zb201307)、[cheon](https://github.com/number317) за пожертвования
### AliPay
### WeChat Pay
### PayPal
[https://paypal.me/aomaocom](https://paypal.me/aomaocom)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )