Draft-js 行内样式总结

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样式
}
]

2. 绑定自定义样式到Editor组件:customStyleMap属性

3. 通过RichUtils工具类中的toggleInlineStyle为选中内容添加/去除行内样式

this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, type))
//type为对应的key