Создание маркеров в Draft.js

Вы можете превратить любой текстовый блок в маркированный список с RichUtils из draft-js. Вот как это сделать:

// button to turn text block to bullet points
<button onClick={this.toggleBulletPoints}>Bullet points</button>

toggleBulletPoints(){
    this.setState({
        editorState: RichUtils.toggleBlockType(
            this.state.editorState,
            'unordered-list-item'
        )
    })
}

Вот полный пример изменения встроенных стилей и типов блоков в draft-js редакторе: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html

Я бы просто оставил комментарий, но у меня не хватает кармы ...

В ответе, помеченном как правильный, я не уверен, как это сработает. Похоже, состояние выставлено неправильно. Если это не так:

<button onClick={this.toggleBulletPoints}>Bullet points</button>

toggleBulletPoints(){
    this.setState({
        editorState: RichUtils.toggleBlockType(
            this.state.editorState,
            'unordered-list-item'
        )
    })
}

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

Кроме того, поскольку это было обновлено год назад, вот более новое возможное решение:

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

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

toggleBlockType = () => {
  this.onChange(
    RichUtils.toggleBlockType(this.state.editorSection, 'unordered-list-item')
  );
};

render() {
  return (
    <div>
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
      />
    </div>
  )
}

Надеюсь, это кому-то поможет!