Как установить семейство шрифтов по умолчанию и размер в draft.js

Question

Я изучаю редактор draft.js и не могу найти, как настроить размер шрифта и размер шрифта по умолчанию.

Я попробовал этот путь:

let editorState = EditorState.createEmpty(); 

let newState = RichUtils.toggleBlockType(
    editorState, 
    'aligncenter' 
); 

newState = RichUtils.toggleInlineStyle(
    newState, 
    'FONT_SIZE_36' 
); 
newState = RichUtils.toggleInlineStyle(
    newState, 
    'TIMES_NEW_ROMAN' 
); 

Что странно, AlignCenter стиль прекрасно работает, но размер шрифта и семья исчезает, когда компонент получает фокус.

Можете ли вы предложить правильный способ, как это сделать?

Answer 1

Использование RichUtils.toggleInlineStyle() предназначено для изменения выбранного диапазона текста (или установки встроенного стиля текста, который будет введен в текущей позиции курсора). Невозможно использовать это, чтобы установить встроенные стили по умолчанию для всего документа (и это не рекомендуется).

Чтобы получить стили по умолчанию, вы должны использовать CSS и задать стили для всего редактора. Затем вы должны переопределить эти стили для определенных диапазонов текста, используя toggleInlineStyle, когда пользователь хочет нестандартный стиль (например, выбирая размер шрифта из раскрывающегося списка).

Вот улов. В настоящее время вы можете предварительно определить эти встроенные стили, используя styleMap, но вы не можете создавать их на лету, поскольку пользователь выбирает произвольное семейство шрифтов (или размер или цвет).

Я боролся с этим, пытаясь реализовать набор цветов для react-rte.org.

(Технически, вы можете добавить стили на лету, но это не будет вызывать повторно вынести, так что это на самом деле не годны к употреблению.)

Существует открытая проблема для этого здесь: https://github.com/facebook/draft-js/issues/52

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