Slatejsx Save

简介

• 整个富文本编辑器在slatejs基础上开发，完全支持富文本、图片、表格(支持合并、拆分单元格)、视频、横线等常用功能
• 支持自定义扩展组件，详细可以参考slatejs官方文档
• 开箱即用，操作简单。json存储富文本。欢迎使用、点赞、提交分支

install 安装

npm install slatejsx

demo 在线示例

http://seditor.open.heyphp.com

usage 用法

import SEditor from 'slatejsx';
import 'slatejsx/dist/index.css';
import { useState } from 'react';

const config = [
  {
   "type": "paragraph",
   "title": "h1",
   "children": [
    {
     "text": ""
    }
   ]
  }
]

const [value, setValue] = useState(config)

// 上传图片的回调，示例中将图片转为base64写入json，如果需要存到云存储可以改写此方法
const onUploadImage = (file, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => {
      const url = reader.result;
      callback(url)
  });

  reader.readAsDataURL(file);
}

function App() {
  return (
    <SEditor
      value={value}
      plugins={[]}
      readOnly={false}
      param={{ onUploadImage }}
      onChange={v=>setValue(v)}
    />
  );
}

export default App; 

props 参数说明

相关链接

使用依赖

• slatejs https://github.com/ianstormtaylor/slate
• antd https://ant.design/components/overview-cn

作者

• 小猪猴
  • github: https://github.com/zhangjiajiacjq
  • 博客: http://blog.heyphp.com
• amwyygyuge
  • github: https://github.com/amwyygyuge