@aligov/components-richtext-editor

2.0.0-beta.1 • Public • Published

富文本编辑器

@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

Readme

Keywords

Package Sidebar

Install

npm i @aligov/components-richtext-editor

Weekly Downloads

15

Version

2.0.0-beta.1

License

MIT

Unpacked Size

956 kB

Total Files

10

Last publish

Collaborators

  • jasoncapricorn
  • qingkaili
  • huguoxin
  • shenyu.wsy
  • liunian
  • tao1991123
  • itrip
  • xiazhiqiang
  • mo.zhou
  • guoliang.hgl
  • daip
  • baizhao