@aligov/components-richtext-editor

富文本编辑器

@aligov/components-richtext-editor

富文本编辑器

基于https://github.com/margox/braft-editor 简单封装, braft 又是基于 draft

EditorState

draftjs 的原生 EditorState 对象 https://draftjs.org/docs/api-reference-editor-state.html

HTML/JSON 与 EditorState 互转

HTML/JSON 与 EditorState 互转为耗时操作, 尽量在有需要的时候在操作,以避免性能问题。

HTML/JSON -> EditorState

import Editor, { createEditorState } from "@aligov/components-richtext-editor";
const htmlString = "<p>Hellp World</p>";
const defaultValue = createEditorState(htmlString);
const App1 = <Editor defaultValue={defaultValue} />;

const rawString = `{"blocks":[{"key":"cl5he","text":"Hello World","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":6,"length":5,"style":"ITALIC"}],"entityRanges":[],"data":{"nodeAttributes":{}}}],"entityMap":{}}`;
const defaultValue = createEditorState(rawString);
const App2 = <Editor defaultValue={defaultValue} />;

EditorState -> HTML

const onChange = editorState => console.log(editorState.toHTML());
const App = <Editor defaultValue={defaultValue} onChange={onChange} />;

EditorState -> JSON

const onChange = editorState => {
  const rawObject = editorState.toRAW(true);
  const jsonString = JSON.stringify(rawObject);
  console.log(jsonString);
};
const App = <Editor defaultValue={defaultValue} onChange={onChange} />;

注意事项

性能

https://www.yuque.com/braft-editor/be/lzwpnr#1bbbb204

美化输出 HTML

https://www.yuque.com/braft-editor/be/lzwpnr#b79b9e83

持久化存储

html 字符串也可以用于持久化存储，但是对于比较复杂的富文本内容，在反复编辑的过程中，可能会存在格式丢失的情况，比较标准的做法是在数据库中同时存储 raw 字符串和 html 字符串，分别用于再次编辑和前台展示。

API

参数名	说明	必填	类型	默认值	备注
value	值	否	EditorState 对象		受控模式使用
defaultValue	默认值	否	EditorState 对象		非控模式使用
onChange	状态变化函数	否	Function(value: EditorState ) : void		默认会开启 debounce
controls	需要展示的控件	否	Array	见源码	一般不填,使默认值 样例见: 见 https://www.yuque.com/braft-editor/be/gz44tn#bo49ph
contentStyle	编辑区域的样式 ,	否	Object	见源码	样例见: https://braft.margox.cn/demos/custom