4.Draftjs 学习笔记-Decorators

最新推荐文章于 2024-08-07 09:56:24 发布

浪漫不属意

最新推荐文章于 2024-08-07 09:56:24 发布

阅读量2.8k

点赞数 2

分类专栏： draftjs 文章标签： facebook draft-js draftjs react 富文本编辑器

本文链接：https://blog.csdn.net/ohmyauthentic/article/details/53522086

版权

本文详细介绍了DraftJS的装饰器系统，包括CompositeDecorator用于复合装饰，Decorator Components用于文本渲染，以及如何动态修改和扩展Decorator。通过示例展示了如何在富文本编辑器中实现@提及和#标签的高亮显示。

摘要由CSDN通过智能技术生成

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

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