Как изменить размер шрифта при нажатии кнопки draftjs - PullRequest
Новая
       14

Как изменить размер шрифта при нажатии кнопки draftjs

0 голосов
/ 18 октября 2018

Как изменить размер шрифта при нажатии кнопки, кто-то может мне помочь?теперь я пробую эти 

constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};

this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => this.setState({editorState});

this.toggleFontSize = (fontSize) => this._toggleFontSize(fontSize);

} 

  _toggleFontSize(fontSize) {
this.onChange(
  RichUtils.toggleBlockType(
    this.state.editorState,
    fontSize
  )
);

} 

<button onClick={e => this.toggleFontSize('100px')}>100px</button>

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Изменение fontSize подобно управлению любым другим встроенным стилем в Draftjs немного сложнее, особенно если у вас так мало знаний о том, как работает неизменяемая модель в ContentState и EditorState.Самый простой способ настроить любой встроенный стиль - использовать модуль draft-js-custom-styles .

Вот как вы можете переключать fontSize для выделения текста: 

import createStyles from "draft-js-custom-styles";
const customStylesToManage = ["font-size", "color"];
const { styles, customStyleFn, exporter } = createStyles(customStylesToManage, "CUSTOM_")
//CUSTOM_ is going to be used as a prefix for you inline styles

Теперь вам нужно использовать customStyleFn в главном редакторе Draftjs для применения стилей при переключении 

<Editor customStyleFn={customStyleFn} ... />

Для применения определенного стиля к выделенному тексту вы просто вызываете переключение по стилю 

const newEditorState = styles.fontSize.toggle(editorState, "27px");

И обязательно обновите editorState для применения встроенного стиля 

updateEditorState(newEditorState);

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

const currentFontSizeForSelectedText = styles.fontSize.current;

Проверьте Документы модуля для получения более подробной информации.

0 голосов
/ 19 октября 2018

Функция обработчика событий должна быть объявлена, как показано ниже, и когда вы вызываете кнопку onClick, вы будете использовать this.toggleFontSize.

Просто сделайте это 

  toggleFontSize = fontSize => {
       const { editorState } = this.state;
       RichUtils.toggleBlockType( editorState, fontSize  );
  }

  <button onClick={e => this.toggleFontSize('100px')}>100px</button>
...