Question

我正在使用draft.js，除了一件事，我有我需要的一切工作。

我希望能够添加一个自定义块选项，该选项将在编辑器中围绕所选内容应用包含自定义类（例如内容）的范围。

这是否可以使用draft-js自定义块？

有什么好的例子吗？（谷歌搜索时没有找到任何东西）

Answer 1

您可以在不使用自定义类将文本包装到元素的情况下执行此操作。您可以使用方法RichUtils.toggleInlineStyle设置所选文本的样式。更多细节描述here。看看这个工作示例 - https://jsfiddle.net/x2gsp6ju/2/

定义customStyleMap个对象。此对象的键应该是自定义样式和值的唯一名称 - 具有适当样式的对象。

const customStyleMap = {
  redBackground: {
    backgroundColor: 'red'
  },
  underlined: {
    textDecoration: 'underline',
    fontSize: 26
  },
};

将此对象传递给customStyleMap组件的Editor属性：

<Editor
  placeholder="Type away :)"
  editorState={this.state.editorState}
  onChange={this._handleChange}
  customStyleMap={customStyleMap}
/>

在此示例中，我在单击适当的按钮后应用所选文本的样式，我调用this.applyCustomSTyles方法并将style-name作为第一个参数传递。在此方法中，我使用editorState生成新的RichUtils.toggleInlineStyles：

applyCustomStyles = (nameOfCustomStyle) => {
  this._handleChange(
    RichUtils.toggleInlineStyle(
      this.state.editorState,
      nameOfCustomStyle
    )
  );
}

使用draft.js可以使用classname创建自定义块跨度

1 个答案: