am editor
@aomao
Здесь у нас есть новый богатый текстовый редактор под названием Editable, который не использует собственную собственность из редактируемого.
доволен, но вместо этого использует пользовательский рендер. Этот подход позволяет нам лучше контролировать поведение редактора.
Богатый текстовый редактор, который поддерживает совместное редактирование, вы можете свободно использовать React, Vue и другие общие библиотеки Front-End для расширения и определения плагинов.
Предварительный просмотр · Документ · Плагины
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| Упаковка | Версия | Размер | описание |
|---|---|---|---|
@aomao/toolbar | Панель инструментов, подходящая для React | ||
@aomao/toolbar-vue | Панель инструментов, подходит для Vue3 | ||
am-editor-toolbar-vue2 | Панель инструментов, подходит для Vue2 | ||
@aomao/plugin-alignment | Выравнивание | ||
@aomao/plugin-embed | Встроенный URL | ||
@aomao/plugin-backcolor | Цвет фона | ||
@aomao/plugin-bold | Смелый | ||
@aomao/plugin-code | Встроенный код | ||
@aomao/plugin-codeblock | Codeblock, подходит для React | ||
@aomao/plugin-codeblock-vue | Codeblock, подходит для Vue3 | ||
am-editor-codeblock-vue2 | CodeBlock, подходит для Vue2 | ||
@aomao/plugin-fontcolor | Цвет шрифта | ||
@aomao/plugin-fontfamily | Семья шрифтов | ||
@aomao/plugin-fontsize | Размер шрифта | ||
@aomao/plugin-heading | Заголовок | ||
@aomao/plugin-hr | Горизонтальное правило | ||
@aomao/plugin-indent | Отступление | ||
@aomao/plugin-italic | Курсив | ||
@aomao/plugin-link | Ссылка, подходящая для React | ||
@aomao/plugin-link-vue | Ссылка, подходит для Vue3 | ||
am-editor-link-vue2 | Ссылка, подходит для Vue2 | ||
@aomao/plugin-line-height | Высота линии | ||
@aomao/plugin-mark | Отметка | ||
@aomao/plugin-mention | Упомянуть | ||
@aomao/plugin-orderedlist | Заказанный список | ||
@aomao/plugin-paintformat | Формат художник | ||
@aomao/plugin-quote | Блок -Quoquote | ||
@aomao/plugin-redo | Переделан | ||
@aomao/plugin-removeformat | Удалить формат | ||
@aomao/plugin-selectall | Выберите все | ||
@aomao/plugin-status | Статус | ||
@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-table | Стол | ||
@aomao/plugin-file | Файл | ||
@aomao/plugin-mark-range | Отметный диапазон | ||
@aomao/plugin-math | Математическая формула | ||
@aomao/plugin-video | Видео |
Редактор состоит из engine , toolbar и plugins . engine предоставляет нам возможность редактирования ядра.
Используйте npm или yarn для установки пакета двигателя.
$ npm install @aomao/engine
# or
$ yarn add @aomao/engineМы начнем с того, что выведем «Привет, мир!» Сообщение как обычно.
import React , { useEffect , useRef , useState } from 'react' ;
import Engine , { EngineInterface } from '@aomao/engine' ;
const EngineDemo = ( ) => {
//Editor container
const ref = useRef < HTMLDivElement | null > ( null ) ;
//Engine instance
const [ engine , setEngine ] = useState < EngineInterface > ( ) ;
//Editor content
const [ content , setContent ] = useState < string > ( '<p>Hello world!</p>' ) ;
useEffect ( ( ) => {
if ( ! ref . current ) return ;
//Instantiate the engine
const engine = new Engine ( ref . current ) ;
//Set the editor value
engine . setValue ( content ) ;
//Listen to the editor value change event
engine . on ( 'change' , ( ) => {
const value = engine . getValue ( ) ;
setContent ( value ) ;
console . log ( `value: ${ value } ` ) ;
} ) ;
//Set the engine instance
setEngine ( engine ) ;
} , [ ] ) ;
return < div ref = { ref } /> ;
} ;
export default EngineDemo ; Импортируйте плагин @aomao/plugin-bold Bold.
import Bold from '@aomao/plugin-bold' ; Добавьте Bold плагин в двигатель.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; Карта-это отдельно определенная область в редакторе, с его пользовательским интерфейсом и логикой для рендеринга пользовательского контента внутри карты, используя React , Vue или другие библиотеки фронт-эндов, прежде чем быть установленным в редакторе.
Представьте @aomao/plugin-codeblock , плагин кодового блока с выпаданием языка, который отображается с использованием ReAct, который отличает его от VUE3 с помощью @aomao/plugin-codeblock-vue .
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; Добавьте плагин CodeBlock и компонент карты CodeBlockComponent в двигатель.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; Плагин CodeBlock поддерживает markdown по умолчанию. Вы можете запустить его, набрав синтаксис блока кода в начале строки в редакторе, за которым следует пространство и имя языка, такое как `` javascript.
Чтобы более удобно управлять узлами и уменьшить сложность, редактор абстрагирует свойства узла и функциональность и определяет четыре типа узлов: mark , inline , block и card . Они состоят из различных атрибутов, стилей или HTML -структур и равномерно ограничены с использованием схемы.
Простая schema выглядит так:
{
name : 'p' , // node name
type : 'block' // node type
}Кроме того, свойства, стили и т. Д. Также могут быть описаны, например:
{
name : 'span' , // node name
type : 'mark' , // node type
attributes : {
// The node has a style attribute
style : {
// Must contain a color style
color : {
required : true , // must contain
value : '@color' // The value is a color value that conforms to the css specification. @color is the color validation defined in the editor. Here, methods and regular expressions can also be used to determine whether the required rules are met
}
} ,
// Optional include a test attribute, its value can be arbitrary, but it is not required
test : '*'
}
}Следующие типы узлов соответствуют вышеуказанным правилам:
< 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 > Но за исключением того, что цвет и тест были определены в schema , другие атрибуты (фоновый цвет, тест1) будут отфильтрованы редактором во время обработки.
Узлы в редактируемой области имеют четыре типа комбинированных узлов mark , inline , блока , and карты through the rule. They are composed of different attributes, styles or структур HTML`. Определенные ограничения налагаются на гнездование.
Импортируйте панель инструментов @aomao/toolbar . Из-за сложного взаимодействия панель инструментов в основном отображается с использованием компонентов React + Antd UI, в то время как Vue3 использует @aomao/toolbar-vue
За исключением взаимодействия пользовательского интерфейса, большая часть работы панели инструментов состоит в том, чтобы просто вызовать двигатель, чтобы выполнить соответствующие команды плагина после запуска различных событий кнопок. В случае сложных требований или необходимости повторного употребления пользовательского интерфейса легче изменить после вилки.
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; Добавьте к двигателю плагин ToolbarPlugin и компонента инструментов и компонент карты ToolbarComponent , который позволяет нам использовать клавишу сочетания / в редакторе, чтобы разбудить панель инструментов карты
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;Панель инструментов рендеринга, панель инструментов была настроена со всеми плагинами, здесь нам нужно только передать в имени плагина
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)Для получения более сложной конфигурации панели инструментов, пожалуйста, проверьте документ https://editor.aomao.com/config/toolbar
Эта библиотека с открытым исходным кодом прислушивается к изменениям в структуре HTML в области редактирования (довольного корневого узла), использует MutationObserver для обратного инженера структуры данных, а также соединяется и взаимодействует с YJS через WebSocket для достижения многопользовательского совместного редактирования.
Каждый редактор, как клиент, общается и взаимодействует с сервером через функцию 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
Перед использованием этой библиотеки с открытым исходным кодом необходимо установить зависимости в корневом каталоге проекта.
yarn install
lerna bootstrap
После установки зависимостей вам нужно только выполнить следующую команду в корневом каталоге, чтобы запустить проект:
yarn start
Структура каталога разработки этой библиотеки с открытым исходным кодом следующей:
packages содержит код, связанный с двигателем и панели инструментовplugins содержит все плагиныapi предоставляет доступ к API, требуемый некоторыми плагинами, и использует https://editor.aomao.com в качестве службы API по умолчанию.yjs-server содержит совместный код сервера, который может быть запущен yarn dev .Am-Editor Vue Пример
Спасибо довольным 、 eLena211314 、 ZB201307 、 Чел за пожертвование
https://paypal.me/aomaocom
