参考文件 https://draftjs.org/docs/advanced-topics-block-components.html#content
步骤:
1.定义各一个自己的react 组件
2.Editor 上添加一个 属性 blockRendererFn={myBlockRenderer} ,
3.在自定义 myBlockRenderer 函数中,编写业务逻辑,确认什么样的实体或者块需要用自定义的组件绘制(可以通过props 属性 ,想组件传递自定义属性.组件内部通过 this.props.blockProps.xxxx 这种方式获得这些属性)
this.myBlockRenderer = (block) => {
// 使用自定义组件的判断条件
if (block.getType() === 'atomic') {
return {
// 自定义组件
component: TeXBlock,
editable: false,
props: {
// 传递给自定义组件的属性
aaa:"bbb"
},
};
}
return null;
};