slatejsx 다운로드 slatejsx 소스 코드 다운로드

slatejsx

기타 리소스

1.0.0

다운로드

소개

전체 풍부한 텍스트 편집기는 SlateJS를 기반으로 개발되며 풍부한 텍스트, 그림, 테이블 (병합 및 분할 셀 지원), 비디오, 수평선 등과 같은 일반적인 기능을 완전히 지원합니다.
Custom Extension 구성 요소를 지원합니다. 자세한 내용은 공식 SLATEJS 문서를 참조하십시오.
상자 밖으로 작동하기 쉽습니다. JSON은 풍부한 텍스트를 저장합니다. 사용, 좋아하고 제출하는 데 오신 것을 환영합니다

설치하다

npm install slatejsx

데모 온라인 예제

http://seditor.open.heyphp.com

용법

 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 ;

소품 매개 변수 설명

매개 변수	유형	설명
값	정렬	공식 SlateJS 문서를 참조하십시오. 예제의 구조를 초기화 할 수 있습니다.
onchange	기능	콜백 데이터가 변경되면 위의 예를 참조하십시오.
플러그인	정렬	추가 플러그인, 새로운 편집기 기능을 추가 해야하는 경우이 매개 변수를 통해 전달할 수 있습니다.
준비 적	부울	읽기 전용, 사실이라면 도구 모음이 없으며 편집 할 수 없습니다.
파라	{}	추가 매개 변수, 매개 변수는 uselate ()의 엔티티에 기록됩니다.