slatejsx Téléchargement - slatejsx Téléchargement du code source

slatejsx

Autres ressources

1.0.0

Télécharger

Introduction

L'ensemble de l'éditeur de texte riche est développé sur la base de Slatejs et prend en charge entièrement des fonctions communes telles que le texte riche, les images, les tables (prend en charge la fusion et les cellules de division), les vidéos, les lignes horizontales, etc.
Prend en charge les composants d'extension personnalisés, veuillez vous référer à la documentation officielle de SlateJS pour plus de détails
Hors de la boîte, facile à utiliser. JSON stocke du texte riche. Bienvenue à utiliser, comme et soumettre des succursales

installer

npm install slatejsx

Exemple de démonstration en ligne

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 ;

Description des paramètres d'accessoires

paramètre	taper	illustrer
valeur	tableau	Reportez-vous à la documentation officielle SlateJS, vous pouvez initialiser la structure dans l'exemple.
floconneux	fonction	Rappels Lorsque les données changent, veuillez vous référer à l'exemple ci-dessus
plugins	tableau	Plug-in supplémentaire, si vous avez besoin d'ajouter de nouvelles fonctions d'éditeur, vous pouvez la transmettre via ce paramètre.
lire en lecture	booléen	En lecture seule, si elle est vraie, il n'y a pas de barre d'outils et ne peut pas être modifiée
paramot	{}	Paramètres supplémentaires, les paramètres seront écrits à l'entité d'usageLate ()