4.Draftjs 学习笔记-Decorators

本节重点就是策略与渲染组件

---

Inline and block styles aren’t the only kind of rich styling that we might want to add to our editor. The Facebook comment input, for example, provides blue background highlights for mentions and hashtags.

除了内联与块样式，还有更多丰富的需求，比如评论里面的提及@

To support flexibility for custom rich text, Draft provides a “decorator” system. The tweet example offers a live example of decorators in action.

为了实现自定义富文本的灵活性，Draft 提供了一种“装饰器”系统。

CompositeDecorator | 复合装饰器

The decorator concept is based on scanning the contents of a given ContentBlock for ranges of text that match a defined strategy, then rendering them with a specified React component.

装饰器的原理，先根据策略(strategy)扫描内容块(ContentBlock),然后使用指定的组件渲染。

You can use the CompositeDecorator class to define your desired decorator behavior. This class allows you to supply multiple DraftDecorator objects, and will search through a block of text with each strategy in turn.

你可以使用CompositeDecorator 类定义装饰器行为。这个类允许使用多个装饰器对象，依次使用这些策略搜索内容块。

Decorators are stored within the EditorState record. When creating a new EditorState object, e.g. via EditorState.createEmpty(), a decorator may optionally be provided.

装饰器存储在EditorState内。当使用EditorState.createEmpty(),实例化一个EditorState对象,装饰器可以作为初始化参数。

Under the hood | 高级选项
When contents change in a Draft editor, the resulting EditorState object will evaluate the new ContentState with its d