Далее я поделюсь с вами продуктом, созданнымfacebookОткрытый исходный код и мощный Редактор форматированного текста——Lexical。В настоящее время вgithubУже включено 17.7k star。

githubадрес：https://github.com/facebook/lexical

Базовое введение в лексику

Lexical является расширяемым JavaScript Платформа текстового редактора, ориентированная на надежность, доступность и производительность. Создан для того, чтобы обеспечить лучшие в своем классе возможности для разработчиков, чтобы мы могли с легкостью документировать проектирование и создавать функциональные возможности.

В сочетании с высокомасштабируемой архитектурой,Lexical Позвольте разработчикам создавать уникальные возможности редактирования текста, а функции можно расширить дважды, например, поддержка совместной работы нескольких человек, настраиваемые текстовые плагины и т. д.

демо демо

Мы можем использовать это для достижения чего-то вроде Nocode/WEP Опыт редактирования документов в движке.

Мы можем легко выбрать текст, чтобы установить стили текста:

Вы также можете прокомментировать текстовое содержимое:

Конечно, также поддерживается вставка блоков, таких как таблицы и коды:

Далее я поделюсь с вами ее дизайнерскими идеями.

Дизайнерское мышление

Lexical Ядро представляет собой текст без зависимостей Редакторрамка,Позволяет разработчикам создавать мощные、простой и сложный Редакторповерхность。Lexical Есть несколько концепций, которые стоит изучить:

• Экземпляр редактора：Экземпляр редактора — это ядро, которое соединяет все воедино. Мы можем преобразовать contentEditable DOM Элемент, прикрепленный к Экземпляру редактора и регистрируйте прослушиватели и команды. Самое главное, Редактор позволяет обновлять свои Редактор Стат. мы можем использовать createEditor() API создавать Экземпляр редактора,Но при использовании привязки рамки (например, @lexical/react),Обычно не о чем беспокоиться,Потому что это автоматически обрабатывается за нас.
• Статус редактора：Статус редактора значит быть в DOM Базовая модель данных для того, что показано выше. Статус редактора Содержит две части：
  • Лексическое дерево узлов
  • Объект лексического выбора
  • Статус однажды созданный редактор является неизменяемым, чтобы его обновить, нам нужно передать editor.update(() => {...}) завершить. Однако также можно «подключиться» к существующим обновлениям с помощью преобразований узлов или обработчиков команд. - Эти обработчики вызываются как часть существующего рабочего процесса обновления, чтобы предотвратить каскадирование обновлений. Мы также можем использовать editor.getEditorState() Получить текущий статус редактора。
  • Статус редактора также вполне возможна в виде сериализации JSON и может быть использован editor.parseEditorState() Легко назовите это сериализацией как Редактор.
• Читать и обновлять Статус редактора：Когда вы хотите читать и/或更新 Лексическое дерево узлов, когда нам нужно пройти editor.update(() => {...}) завершить. Вы также можете пройти editor.getEditorState().read(() => {...}) 对Статус редактора выполняет операции только для чтения.

Lexicalиздизайн Модель следующая：

Здесь, чтобы каждый мог более интуитивно понять его использование, я делюсь относительно полным примером кода:

import {$getRoot, $getSelection, $createParagraphNode, $createTextNode, createEditor} from 'lexical';

// Первым шагом является создание Экземпляра. редактора
const config = {
  namespace: 'MyEditor',
  theme: {
    ...
  },
  onError: console.error
};

const editor = createEditor(config);

// Второй шаг — обновить контент Редактор.
editor.update(() => {
  const root = $getRoot();

  const selection = $getSelection();

  // Создать узел абзаца
  const paragraphNode = $createParagraphNode();

  // Создать текстовый узел
  const textNode = $createTextNode('Hello world');

  // Добавляйте текстовые узлы в абзацы
  paragraphNode.append(textNode);

  // вставить элемент
  root.append(paragraphNode);
});

С помощью двух вышеуказанных шагов мы добились создания и обновления текстового редактора. Не правда ли, очень просто?

Если вас заинтересовал этот редактор, вы можете узнать, как его использовать на github, а также обменяться со мной отзывами в области сообщений.

githubадрес：https://github.com/facebook/lexical