banyudu / kedao

React 编辑器,从 braft-editor 修改而来,基于 draft-js 实现
https://kedao.vercel.app
MIT License
7 stars 2 forks source link
braft-editor draft-js editor kedao react react-editor typescript

Kedao(刻刀) 编辑器

kedao 是一个基于 braft-editor 修改而来的前端编辑器,底层基于 draft-js

在 Braft-Editor 的基础之上,kedao 做了一些改进工作,如:

  1. 重构了 braft-editor 的多个工程,合并成一个大工程,并修改构建产物,从原来的 webpack 打包后的 bundle,改成源码打包。
  2. 升级了依赖包和工具链的版本。
  3. 改成 Typescript 语言,添加类型定义,方便使用。

安装

npm i kedao

使用

import React, { useState } from "react";
import Editor, {
  EditorState,
  convertRawToEditorState,
  convertEditorStateToRaw,
} from "kedao";
import { useLocalStorage } from "react-use";

function App() {
  const [value, setValue] = useLocalStorage(
    "kedao-state",
    convertEditorStateToRaw(EditorState.createEmpty())
  );

  const [editorState, setEditorState] = useState(
    convertRawToEditorState(value)
  );

  const handleChange = (newEditorState: EditorState) => {
    setEditorState(newEditorState);
    setValue(convertEditorStateToRaw(newEditorState));
  };

  return (
    <div className="App">
      <Editor value={editorState} onChange={handleChange} />
    </div>
  );
}

export default App;

更多示例参见 examples

贡献

欢迎任何方式的贡献,issue、文档、翻译等。

贡献指南

文档

更多文档见组件官网:https://kedao.vercel.app