使用 draft.js 是否可以使用类名创建自定义块跨度

Question

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

我希望能够添加一个自定义块选项，该选项将在编辑器中的选定内容周围应用具有自定义 class（例如内容）的跨度。

对于 draft-js 自定义块这可能吗？

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

Answer 1

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

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

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

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

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

在此示例中，我在单击相应按钮后为所选文本应用样式，我调用 this.applyCustomSTyles 方法并将样式名称作为第一个参数传递。在这种方法中，我用 RichUtils.toggleInlineStyles:

生成新的 editorState

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

使用 draft.js 是否可以使用类名创建自定义块跨度

with draft.js is it possible to create a custom block span with classname

javascript

wysiwyg

reactjs

draftjs