re editor

Reeditor ·

Редактор RACE RACE RICH TEXT OUT OUT

• Как использовать
  • Вне коробки - предоставьте панель инструментов в стиле ANTD
  • Custom - только представляет ядро редактора, настраивает панель инструментов
• Часто задаваемые вопросы
• Поддерживаемые функции

Функции

• Вне коробки, конфигурация не требуется
• Настраиваемое, вы можете разработать панели инструментов любого стиля и формы самостоятельно [API завершение]
• Настройки функции поддержки элемента, такие как изменение размера изображения
• Поддержка синтаксиса Markdown
• Увидеть больше

Как использовать

Чтобы адаптироваться к различным потребностям в разработке, редактор предоставляет следующие два метода использования.

Использовать из коробки

Reeditor-это инкапсулированный компонент, который можно использовать после установки. Он содержит @Reeditor/Core и @Reeditor/Toolbar-Antd. Панель инструментов по умолчанию использует стиль ANTD. Если вы хотите использовать другие панели инструментов, обратитесь к следующему пользовательскому документу

Зависимости установки

$ npm install re-editor

Представьте стили

Представлено в JS

 import 're-editor/lib/styles/index.css'

Он также может быть введен в CSS (требует поддержки предварительной обработки CSS)

 @import 're-editor/lib/styles/index.css'

Реквизит

свойство	иллюстрировать	тип
ценить	Ценность редактора	объект
Онхандж	Обратный вызов для редактора изменяет контент	(значение: значение) => void
заполнитель	Текст заполнителя	нить
Ридонли	Режим только для чтения	логический
onimageupload	Пользовательская кровать	(файл: файл) => Обещание <url: string>
инструменты	Установите отображение содержимого панели инструментов	Массив <массив

Установите панель инструментов для отображения контента

tools props поддержки формы массива, если это двухмерный массив, он будет отображаться в группах

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

имя	Функция
смелый	Смелый
Курсив	Курсив
подчеркнуть	Подчеркнуть
Удар	Удалить линию
Заказанный список	Заказанный список
Неупорядоченный список	Неупомянутый список
Заголовок	заголовок
выровнять	Выравнивание
изображение	картина
стол	лист
код	Код
отменить	Отменить
переделан	Переработка
полноэкранный	полноэкранный

Настраивать

Редактор разделен на две части, область редактирования контента и панель инструментов. Ниже описывается, как настроить панель инструментов

Установите ядро редактора

$ npm install @re-editor/core

Создайте панель инструментов

Вы можете создать панель инструментов редактора. Вам нужно передать экземпляр редактора на панель инструментов. Вы можете обратиться к реализации Reeditor и @Reeditor/Toolbar-Antd, чтобы просмотреть документацию API для получения подробной информации (эта часть документа еще не написана, будет ли она завершена в ближайшем будущем?)

Например, реализуйте смелую функцию:

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

Введение в пакеты

• Reeditor: инкапсулированный редактор с панелью инструментов
• @Reeditor/Core: Editor Core
• @Reeditor/Toolbar-Antd: панель инструментов на основе ANTD, по умолчанию
• @Reeditor/Примеры: демонстрационный проект

Часто задаваемые вопросы

В чем разница между сравнением со Slate или Draft-JS?

Slate или Draft не является чистым редактором, они больше похожи на рамку для строительства редакторов. Reeditor разрабатывается на основе Slate, поэтому вам не нужно обращать внимание на процесс构建编辑器.

Как изменить стиль

Стиль разделен на две части: узлы (жирный, H1, H2 и т. Д.) И панель инструментов. Все они могут переписать основной стиль через CSS, и панель инструментов также может полностью переписать стиль через CSS.

Что мне делать, если объем сэкономленных данных каждый раз слишком велик?

Используя инкрементное обновление, значение обратного вызова OnChange находится в неподвижном формате. Вы можете использовать Immutable-JS-DIFF и другие методы для получения содержания DIFF для постепенного обновления

Как указать сервер изображений загрузки

Изображение сохраняется как Base64 по умолчанию. Если вам нужно загрузить изображение на указанный сервер, вы можете использовать функцию onImageUpload , (файл: файл) => Ording <url: String> Пример кода

Функция

Текстовое украшение

粗体斜体下划线删除线下标удаления

Список

有序列表无序列表

Выравнивание

Выровненные выровненные выровненные居中对齐两端对齐左对齐右对齐

заголовок

h1 h2 h3 h4 h5 h6

другой

• 图片
  • Установите размер
  • Копировать из буфера обмена
  • Поддерживает пользовательскую загрузку адресов сервера изображений
• 表格
  • Добавить ряды
  • Добавить столбцы
  • Удалить ряды
  • Удалить столбцы
• 代码高亮
  • младший
  • CSS
  • HTML
• markdown
  • H1-H6: #
  • Цитата: >
  • Заказанный список: -
  • Неупорядоченный список: 1.
• Полное редактирование

Другие функции продолжают расти ...