slatejsx Download - slatejsx Source code download

slatejsx

Other resources

1.0.0

Download

Introduction

The entire rich text editor is developed based on slatejs and fully supports common functions such as rich text, pictures, tables (supports merging and splitting cells), videos, horizontal lines, etc.
Supports custom extension components, please refer to the official slatejs documentation for details
Out of the box, easy to operate. json stores rich text. Welcome to use, like, and submit branches

install

npm install slatejsx

demo online example

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 parameter description

parameter	type	illustrate
value	array	Refer to the official slatejs documentation, you can initialize the structure in the example.
onChange	function	Callbacks when data changes, please refer to the above example
plugins	array	Additional plug-in, if you need to add new editor functions, you can pass it in through this parameter.
readOnly	boolean	Read-only, if true, there is no toolbar and cannot be edited
param	{}	Extra parameters, parameters will be written to the entity of useSlate()