与draft.js是否有可能创建一个自定义块跨度类名

问题描述：

我使用draft.js，我有我需要的一切，除了一件事工作。与draft.js是否有可能创建一个自定义块跨度类名

我希望能够补充说，将适用于跨度自定义类（例如内容）在编辑器中选择的内容围绕一个自定义块选项。

这可能与定制草案-JS块？

任何很好的例子在那里？（谷歌搜索时，并没有发现什么）

你想换所选的文字，'span'与应用自定义样式，这个类的自定义类？如果为true，则可以在不使用draft-js自定义块的情况下解决该问题。 –

@MikhailShabrikov没错，这就是我的目标。如果没有自定义块可以完成，那么更好。 – Finglish

我的解决方案适合您的问题吗？ –

答

你可以不用文本换行的元素与自定义类。您可以使用方法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方法，并传递样式名称第一个论点。在这种方法我产生新的editorState与RichUtils.toggleInlineStyles：

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

与draft.js是否有可能创建一个自定义块跨度类名

相关推荐