draftjs-utils全部介绍
时间: 2023-09-01 10:08:11 浏览: 202
Draftjs-utils 是一个基于 Draft.js 的工具库,提供了许多常用的 Draft.js 操作方法,包括内容处理、块处理、实体处理、样式处理等。下面是全部的方法介绍:
## 内容处理
- `convertToRaw(editorState: EditorState): Object`: 将 EditorState 对象转化为原始的 JSON 数据,以便进行存储和传输。
- `convertFromRaw(rawState: Object): EditorState`: 将原始的 JSON 数据转换为 EditorState 对象,以便进行编辑和渲染。
- `createLinkAtSelection(editorState: EditorState, url: string): EditorState`: 在当前选中的文本上创建一个链接,并返回新的 EditorState 对象。
- `createMention(editorState: EditorState, mention: Object): EditorState`: 在当前光标位置插入一个提及实体,并返回新的 EditorState 对象。
- `createHashtag(editorState: EditorState, hashtag: Object): EditorState`: 在当前光标位置插入一个标签实体,并返回新的 EditorState 对象。
## 块处理
- `getBlockBefore(editorState: EditorState, blockKey: string): ContentBlock`: 获取指定块的前一个块。
- `getBlockAfter(editorState: EditorState, blockKey: string): ContentBlock`: 获取指定块的后一个块。
- `getBlockForKey(editorState: EditorState, blockKey: string): ContentBlock`: 获取指定块的块数据。
- `getBlockMapForType(editorState: EditorState, blockType: string): Map<string, ContentBlock>`: 获取指定类型的块数据。
- `getBlockStyle(editorState: EditorState, block: ContentBlock): string`: 获取指定块的样式。
- `getCurrentBlock(editorState: EditorState): ContentBlock`: 获取当前光标所在的块数据。
- `getBlockCount(editorState: EditorState): number`: 获取编辑器中块的数量。
- `getSelectedBlocksMap(editorState: EditorState): Map<string, ContentBlock>`: 获取当前选中块的 Map 数据结构。
## 实体处理
- `getEntityAtCursor(editorState: EditorState): ?string`: 获取光标所在位置的实体 key。
- `getEntityRange(editorState: EditorState, key: string): ?SelectionState`: 获取指定实体的 SelectionState。
- `getEntitySelection(editorState: EditorState, entityKey: string): Array<SelectionState>`: 获取指定实体的所有 SelectionState。
- `getSelectedEntity(editorState: EditorState): ?string`: 获取当前选中的实体 key。
- `insertEntity(editorState: EditorState, type: string, data: Object, mutability?: string): EditorState`: 在当前光标位置插入一个实体,并返回新的 EditorState 对象。
- `removeEntity(editorState: EditorState, key: string): EditorState`: 从编辑器中移除指定的实体,并返回新的 EditorState 对象。
- `setEntityData(editorState: EditorState, key: string, data: Object): EditorState`: 更新指定实体的 data,并返回新的 EditorState 对象。
## 样式处理
- `getCurrentInlineStyle(editorState: EditorState): DraftInlineStyle`: 获取当前光标所在位置的样式。
- `getSelectionInlineStyle(editorState: EditorState): DraftInlineStyle`: 获取当前选中文本的样式。
- `toggleInlineStyle(editorState: EditorState, inlineStyle: string): EditorState`: 在当前光标位置切换样式,并返回新的 EditorState 对象。
- `toggleCustomInlineStyle(editorState: EditorState, styleFn: Function): EditorState`: 在当前光标位置切换自定义样式,并返回新的 EditorState 对象。
- `toggleBlockType(editorState: EditorState, blockType: string): EditorState`: 在当前光标位置切换块类型,并返回新的 EditorState 对象。
- `setBlockData(editorState: EditorState, block: ContentBlock, data: Object): EditorState`: 更新指定块的 data,并返回新的 EditorState 对象。
- `setBlockStyle(editorState: EditorState, block: ContentBlock, style: string): EditorState`: 更新指定块的样式,并返回新的 EditorState 对象。
- `removeBlockStyle(editorState: EditorState, block: ContentBlock, style: string): EditorState`: 移除指定块的样式,并返回新的 EditorState 对象。
## 其他方法
- `createFromText(text: string, delimiter?: string): EditorState`: 根据给定的文本字符串创建一个新的 EditorState 对象。
- `describeTextSelection(editorState: EditorState): Object`: 获取当前选中文本的信息。
- `insertAtomicBlock(editorState: EditorState, entityKey: string, character?: string): EditorState`: 在当前光标位置插入一个原子块,并返回新的 EditorState 对象。
- `insertText(editorState: EditorState, text: string): EditorState`: 在当前光标位置插入文本,并返回新的 EditorState 对象。
- `removeBlock(editorState: EditorState, blockKey: string): EditorState`: 从编辑器中移除指定的块,并返回新的 EditorState 对象。
- `handleNewLine(editorState: EditorState, event: SyntheticEvent): EditorState`: 在按下回车键时,处理换行,并返回新的 EditorState 对象。
这些方法是 draftjs-utils 中的全部方法,涵盖了 Draft.js 的各个方面,可以帮助我们更方便地使用 Draft.js 进行开发。
阅读全文
相关推荐

















