slatejsxダウンロードslatejsxソースコードのダウンロード

slatejsx

その他のリソース

1.0.0

ダウンロード

導入

リッチテキストエディター全体は、SlateJSに基づいて開発されており、リッチテキスト、写真、テーブル（セルのマージと分割セルをサポート）、ビデオ、水平線などの一般的な機能を完全にサポートしています。
カスタム拡張コンポーネントをサポートしてください。詳細については、公式の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	関数	データが変更されたら、上記の例を参照してください
プラグイン	配列	追加のプラグインは、新しいエディター機能を追加する必要がある場合は、このパラメーターを介して渡すことができます。
読みます	ブール	読み取り専用、もし本当なら、ツールバーはなく、編集できません
パラメーション	{}	追加のパラメーター、パラメーターはuseslate（）のエンティティに書き込まれます