1.默认行内样式
draft-js中默认行内样式如下：
module.exports = { BOLD: { fontWeight: 'bold' }, CODE: { fontFamily: 'monospace', wordWrap: 'break-word' }, ITALIC: { fontStyle: 'italic' }, STRIKETHROUGH: { textDecoration: 'line-through' }, UNDERLINE: { textDecoration: 'underline' } };
其中：
-
BOLD代表粗体font-weight: bold; -
ITALIC代表斜体font-style: italic; -
CODE代码内容 -
STRIKETHROUGH代表删除线text-decoration: line-through; -
UNDERLINE代表下划线text-decoration: underline;
2.自定义行内样式
1.使用对象自定义样式
格式与默认行内样式格式相同
[
key:{
//相应的CSS样式
}
]
- 绑定自定义样式到
Editor组件:customStyleMap属性
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
customStyleMap={customStyle}
ref={'editor'}
/>
- 通过
RichUtils工具类中的toggleInlineStyle为选中内容添加/去除行内样式
this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, type))
//type为对应的key
