Draftjs программно применяет встроенный стиль к тексту

У меня есть следующая функция

 buttonToSelection(){
  const editorState = this.state.editorState;
  var selectionState = editorState.getSelection();
  const newSelection = selectionState.merge({
        anchorOffset: 1,
        focusOffset: 10
  })
  const newEditorState = EditorState.forceSelection(editorState, newSelection);
  this.editorChangeState(RichUtils.toggleInlineStyle(newEditorState,'STRIKEOUT'));
}

Чего я пытаюсь добиться, так это при нажатии кнопки стиль текста в диапазоне от 1 до 10 с помощью STRIKEOUT. Функция делает это в данный момент, но также сохраняет выделение текста. Я просто хочу изменить стиль текста.


draftjs
person Ando    schedule 09.05.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы делаете это почти правильно. Но поскольку вы предоставили Draft новый выбор (который подходит для добавления стилей с помощью RichUtils), он попытается отобразить этот выбор. Поэтому перед вызовом editorChangeState вам нужно снова сбросить выбор до его предыдущего значения. Вот как это могло бы выглядеть (с некоторыми чрезмерно описательными переменными):

buttonToSelection = () => {
  const editorState = this.state.editorState;
  const selectionState = editorState.getSelection();
  const newSelection = selectionState.merge({
    anchorOffset: 1,
    focusOffset: 10
  })
  const editorStateWithNewSelection = EditorState.forceSelection(editorState, newSelection);
  const editorStateWithStyles = RichUtils.toggleInlineStyle(editorStateWithNewSelection,'STRIKEOUT')
  const editorStateWithStylesAndPreviousSelection = EditorState.forceSelection(
    editorStateWithStyles,
    selectionState
  )
  this.editorChangeState(editorStateWithStylesAndPreviousSelection);
}

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

person tobiasandersen    schedule 10.05.2017