（翻译） draft.js Decorators 装饰器

Decorators帮助实现编辑器中非常复杂的样式，对一些元素进行封装

CompositeDecorator复合装饰器
针对内容文本的装饰器，当找到匹配的文本时，使用组件对其进行包装绘制

创建Decorators 需要制定两个属性，一是如何找到（strategy） 二是找到后用什么组件渲染（component）
const decorator = new CompositeDecorator([
{
strategy: findLinkEntities,
component: Link,
},
]);

Decorator 作为EditorState 的参数传入
EditorState.createEmpty(decorator)

demo 输入的第一个abc 会变红色

import React from 'react';
import ReactDOM from 'react-dom';
import{
    convertToRaw,
    CompositeDecorator,
    ContentState,
    Editor,
    EditorState,
    Entity,
    RichUtils
}
    from 'draft-js';
class ABCEditor extends React.Component {
    constructor() {
        super();
        const compositeDecorator = new CompositeDecorator([
            {
                strategy: findFirstABC,
                component: ABCSpan,
            }
        ]);

        this.state = {
            editorState: EditorState.createEmpty(compositeDecorator),
        };
        this.onChange = (editorState) => this.setState({editorState});
    }

    render() {
        return (
            <div style={{border:'1px solid #ddd'}}>
                <Editor
                    editorState={this.state.editorState}
                    onChange={this.onChange}
                    ref="editor"
                    spellCheck={true}
                    />
            </div>
        );
    }
}


// 文本中的第一个ABC
function findFirstABC(contentBlock, callback) {
    const text = contentBlock.getText();
    if (text.indexOf("abc") > 0) {
        callback(text.indexOf("abc"), text.indexOf("abc") + 3);
    }


}
// 标红色
const ABCSpan = (props) => {
    return <span style={{color:"red"}}>{props.children}</span>;
};
ReactDOM.render(
    <ABCEditor />,
    document.getElementById('container')
);