slatejsx

簡介

• 整個富文本編輯器在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 參數說明

參數	類型	說明
value	array	參考slatejs官方文檔，初始化可以使用示例中的結構體
onChange	function	數據變化時候的回調，可以參考上文示例
plugins	array	額外的插件，如果需要新增新的編輯器功能，可以通過這個參數傳入
readOnly	boolean	只讀，如果為true，則沒有工具欄且不可編輯
param	{}	額外參數，參數會寫入到useSlate()的實體上

相關鏈接

使用依賴

• 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