代码之家 › 专栏 › 技术社区 › Finglish

带草稿。js是否可以使用类名创建自定义块跨度

draftjs wysiwyg reactjs javascript

3

Finglish · 技术社区 · 8 年前

我希望能够添加一个自定义块选项,该选项将在编辑器中选定的内容周围应用带有自定义类(例如内容)的跨度。

这是否适用于草稿js自定义块?

有什么好例子吗?(谷歌搜索时什么也没找到)

1 回复 | 直到 8 年前

1

Mikhail Shabrikov 8 年前

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

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

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

将此对象传递给的属性 Editor

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

在本例中,我在单击适当的按钮后为所选文本应用样式,我调用 this.applyCustomSTyles 方法和传递样式名称作为第一个参数。在这种方法中,我生成了新的 editorState 具有 RichUtils.toggleInlineStyles :

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