DraftJs - обновить состояние редактора новым состоянием содержимого, используя Modifier.removeInlineStyle () - PullRequest
Новая
       9

DraftJs - обновить состояние редактора новым состоянием содержимого, используя Modifier.removeInlineStyle ()

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

У меня есть функция для установки размера шрифта встроенного стиля.Это работает в основном, за исключением того, что после циклического перебора нескольких размеров шрифта мне приходится дважды нажимать кнопку.Поэтому, чтобы попытаться решить эту проблему, я хочу просмотреть текущее состояние содержимого выбранной коллекции, удалить все текущие стили размера шрифта и затем переключить новый стиль.Это то, что я имею до сих пор, за исключением того, что Modifier.removeInlineStyle(), кажется, не применяется, и я все еще остаюсь с моей первоначальной проблемой.

состояние установлено: 

constructor(props: RichTextEditorComponentProps) {
    super(props);
    this.state = this.propsToState(props);
}

propsToState(props: RichTextEditorComponentProps) {
    return {
        editorState: props.content ? EditorState.createWithContent(
            ContentState.createFromBlockArray(
                convertFromHTML(props.content).contentBlocks,
                convertFromHTML(props.content).entityMap
            )
        ) : EditorState.createEmpty()
    };
}

метод вкласс: 

onFontSizeStyleClick(fontStyle: string) {
    const contentState = this.state.editorState.getCurrentContent();
    const styles = this.state.editorState.getCurrentInlineStyle();
    const selection = this.state.editorState.getSelection();
    Object.keys(FontStyleMap).forEach(style => {
        if (styles.has(style)) {
            Modifier.removeInlineStyle(contentState, selection, style);
        }
    });
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, fontStyle));
}

и затем вызывается из: 

<button
    type="button"
    className="style-button"
    onClick={() => this.onFontSizeStyleClick('fontSizeXS')}>
    SM
</button>
<button
    type="button"
    className="style-button"
    onClick={() => this.onFontSizeStyleClick('fontSizeNormal')}>
    N
</button>
<button
    type="button"
    className="style-button"
    onClick={() => this.onFontSizeStyleClick('fontSizeL')}>
    L
</button>
<button
    type="button"
    className="style-button"
    onClick={() => this.onFontSizeStyleClick('fontSizeXL')}>
    XL
</button>

1 Ответ

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

Мне нужно было вызвать мой метод onChange с EditorState.push в качестве аргумента: 

onFontSizeStyleClick(fontStyle: string) {
    let contentState = this.state.editorState.getCurrentContent();
    const styles = this.state.editorState.getCurrentInlineStyle();
    const selection = this.state.editorState.getSelection();
    Object.keys(FontStyleMap).forEach(style => {
        if (styles.has(style)) {
            contentState = Modifier.removeInlineStyle(contentState, selection, style);
        }
    });
    contentState = Modifier.applyInlineStyle(contentState, selection, fontStyle);
    this.onChange(EditorState.push(this.state.editorState, contentState, 'change-inline-style'));
}
...