react web editor
1.0.0
L'éditeur React-Web est facile à utiliser. Il est conçu convivial!
L'éditeur React-Web est léger et simple.
L'éditeur React-Web est convivial. Vous pouvez utiliser des crochets pour votre propre composant.
L'éditeur React-Web a des outils de personnalisation.
Il a été construit à l'aide de WebPack afin que vous puissiez contrôler entièrement la gestion de la configuration et l'extension du projet avec des paramètres personnalisés.
npm - i react - web - editor import { StyleEditorBlock , TextEditorBlock , ... } from "react-web-editor;ou vous pouvez importer comme ci-dessous
import ReactWebEditor from "react-web-editor" ; | Version | Enregistrer |
|---|---|
| 2.2.0 | Mettre à niveau l'interface utilisateur, réparer l'utilisation des crochets |
| 2.1.0 | Mise à niveau de la fonction de glisser-déposer |
| 2.0.0 | Créer une carte modifiable, une mise à jour du bogue mineur |
| 1.2.0 | Mettre à niveau l'éditeur de texte pour initialiser les options |
| 1.1.0 | Mettre à niveau l'éditeur pour utiliser l'unité comme "REM" |
| ~ 1.0.5 | Utilisez le casque, mettez à jour le casque en asynchronisation |
| ~ 1.0.2 | Mettre à niveau la fonction de glisser-déposer, résoudre un bogue d'interface utilisateur mineur |
| 1.0.0 | Ajouter l'éditeur de texte |
| 0.1.6 | Fonctionnalités de l'éditeur de style de mise à niveau |
| ~ 0,1,5 | Résoudre le bug de la police suivante. |
Ces composants sont conçus pour être conviviaux. Contrôler facilement les composants en utilisant rien de plus que des accessoires.
Le composant de l'éditeur de style (SEC) est un composant de bloc qui peut modifier la taille et l'emplacement des composants. Une autre utilisation puissante de la SEC consiste à télécharger des images à l'écran ou à modifier la couleur d'arrière-plan d'un composant. En emballant un composant avec la SEC et en définissant la position du composant «absolu», le composant devient modifiable sur un site Web. Ce composant peut également être utilisé sans votre propre composant.
Deux onglets apparaîtront à l'écran lorsque vous planez un curseur sur le composant. Le premier onglet est un onglet d'image de téléchargement, qui vous aide à ajouter une image. Le deuxième onglet est un gestionnaire de couleurs. Il modifie la couleur d'arrière-plan du composant.
type StyledEditorBlockProps {
width: number ;
height: number ;
top: number ;
left: number ;
parentStyle ?: ParentStyle ; // It defines area where component can't escape. If you don't define it, then your component can move in all screen.
unit: string ;
initialColor ?: string ; // default: transparent
initialImage ?: string ; // default: none
}
type ParentStyle {
width: number ;
height: number ;
} import { StyleEditorBlock } from "react-web-editor"
...
return (
< StyleEditorBlock
width = { 200 }
height = { 300 }
left = { left }
top = { top }
parentStyle = { { width : 600 , height : 800 } }
unit = { "px" }
>
< YourOwnComponent color = { color } /> // It is just a option.
</ StyleEditorBlock >
) ; type TextEditorBlockProps {
width: number ;
height: number ;
top: number ;
left: number ;
parentStyle ?: ParentStyle ; // It defines area where component can't escape. If you don't define it, then your component can move in all screen.
unit: string ;
// Initial- props are options just for first rendering.
initialFontSize ?: number ; // default: 0.22
initialFontColor ?: string ; // default: "black"
initialFontStyle ?: InitialFontStyle ; // default: ""
initialText ?: string ; // default: ""
initialFontName ?: string ; // default: ""
}
type ParentStyle {
width: number ;
height: number ;
}
type InitialFontStyle = "twin-color-text" | "box-text" | "down-side-text" | "out-line-text" | "bubble-shadow-text" ;
type InitialFontName = "andada-pro" | "bebas-nenu" | "montecarlo" | "roboto" | "stix-two-text" | "style-script" ; import { TextEditorBlock } from "react-web-editor"
...
return (
< TextEditorBlock
width = { 200 }
height = { 300 }
left = { left }
top = { top }
parentStyle = { { width : 600 , height : 800 } }
unit = { "px" }
/>
) ; type DragAndDropTableProps {
color ?: string ;
isVertical: boolean ;
} import { DragAndDropTable } from "react-web-editor"
...
return (
< DragAndDropTable
color = { "pink" }
isVertical = { true }
>
< YourOwnComponent src = { cat } />
< YourOwnComponent src = { flower } />
< YourOwnComponent src = { bee } />
// These components can drag and drop in the DragAndDropTable component.
</ DragAndDropTable >
) ; type useDraggableProps {
left: number ;
top: number ;
width: number ;
height: number ;
dragBoardOption ?: DragBoardOption ;
unit: string ;
onDrag: Dispatcher < ComponentStyle > ; // It is a setState. Its state is Componentstyle.
}
type Dispatcher < S > = React . Dispatch < React . SetStateAction < S >> ;
type ComponentStyle {
left : number ;
top: number ;
width: number ;
height: number ;
}
type DragBoardOption {
width: number ;
height: number ;
}
// It's like a parentStyle. import { useState } from "react" ;
import { useDraggable } from "react-web-editor" ;
const [ componentStyle , setComponentStyle ] = useState ( {
width : 20 ,
height : 40 ,
top : 40 ,
left : 40 ,
} ) ;
// this state can be used for your own component.
const {
handleDragEnd , // onMouseUp handler
handleDragStart , // onMouseDown handler
} = useDraggable ( {
... componentStyle ,
onDrag : setComponentStyle ,
unit : "px" ,
} ) ;| retour | usage |
|---|---|
| manège | Handleur OnMoudown |
| manipuler | manageur onMouseup |
Ce composant peut être utilisé avec DraggableHandler et EditorBlockWrapper.
Il renvoie les gestionnaires de redimensionnement. Il peut être utilisé avec "ResizeHandlerWrapper", le composant d'aide à redimensionner.
type useResizeProps {
left: number ;
top: number ;
width: number ;
height: number ;
resizeBoardOption ?: ResizeBoardOption ;
unit: string ;
onResize: Dispatcher < ComponentStyle > ; // It is a setState. Its state is Componentstyle.
}
type Dispatcher < S > = React . Dispatch < React . SetStateAction < S >> ;
type ComponentStyle {
left : number ;
top: number ;
width: number ;
height: number ;
}
type ResizeBoardOption {
width: number ;
height: number ;
}
// It's like a parentStyle. import { useState } from "react" ;
import { useResize , ResizeHandlerWrapper } from "react-web-editor" ;
const [ componentStyle , setComponentStyle ] = useState ( {
width : 20 ,
height : 40 ,
top : 40 ,
left : 40 ,
} ) ;
const { handleMouseDown } = useDraggable ( {
... componentStyle ,
onResize : setComponentStyle ,
unit : "px" ,
} ) ;| retour | usage |
|---|---|
| mannequin | Handleur OnMoudown |
Ce composant peut être utilisé avec ResizeHandlerWrapper et EditorBlockWrapper.
Le crochet UseImage aide à télécharger et à afficher des images à l'écran.
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| retour | usage |
|---|---|
| imagesrc | chaîne |
| handleFileChange | OnchangeHandler de InputElement |
Le manage Usecolor Hook Renvoie des changements de couleur.
type UseColorProps {
initialColor ?: string ;
} import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;| retour | usage |
|---|---|
| couleur | chaîne |
| handlecolorchange | OnchangeHandler de InputElement |
Ces composants vous aident à personnaliser et à générer votre propre composant. Vous pouvez créer votre propre bibliothèque en utilisant cette fonctionnalité. Il vous permet de gérer facilement les crochets et les composants de l'éditeur.
type EditableBoardProps {
width: number ;
height: number ;
backgroundColor: string ;
left ?: number ;
top ?: number ;
unit: string ;
} import { EditableBoard , StyleEditorBlock } from "react-web-editor"
...
const boardWidth = 500 ;
const boardHeight = 500 ;
const boardStyleUnit = "px" ;
return (
< EditableBoard
width = { boardWidth }
height = { boardHeight }
backgroundColor = { boardStyleUnit }
color = { "pink" }
left = { 20 }
top = { 20 }
>
< StyleEditorBlock
. . .
parentStyle = { {
width : boardWidth ,
height : boardHeight ,
} }
unit = { "px" }
/>
</ EditableBoard >
) ;L'éditeur Block Wrapper est un composant de style. La taille et l'emplacement du composant sont reçues dans les accessoires. Il change de style dynamiquement avec ces accessoires. Il peut être utilisé avec l'utilisateur et utilisé
type EditorBlockWrapperProps {
width: number ;
height: number ;
left: number ;
top: number ;
} import { useState } from "react" ;
import { EditorBlockWrapper , useDraggable } from "react-web-editor" ;
const [ componentStyle , setComponentStyle ] = useState ( {
width : 20 ,
height : 40 ,
top : 40 ,
left : 40 ,
} ) ;
// this state can be used for your own component.
const {
handleDragEnd , // onMouseUp handler
handleDragStart , // onMouseDown handler
} = useDraggable ( {
... componentStyle ,
onDrag : setComponentStyle ,
unit : "px" ,
} ) ;
return (
< EditorBlockWrapper
width = { componentStyle . width }
height = { componentStyle . height }
top = { componentStyle . top }
left = { componentStyle . left }
onMouseDown = { handleDragStart }
onMouseUp = { handleDragEnd }
>
< YourOwnComponent style = { { position : "absolute" } } >
</ EditorBlcokWrapper > // Now, This component dynamically change location.
);Ce composant est spécialisé pour le crochet utilisateur. Il génère des sommets dans les quatre directions du composant.
import { useState } from "react" ;
import { EditorBlockWrapper , ResizeHandlerWrapper , useResize } from "react-web-editor" ;
const [ componentStyle , setComponentStyle ] = useState ( {
width : 20 ,
height : 40 ,
top : 40 ,
left : 40 ,
} ) ;
// this state can be used for your own component.
const { handleMouseDown } = useDraggable ( {
... componentStyle ,
onResize : setComponentStyle ,
unit : "px" ,
} ) ;
return (
< EditorBlockWrapper
width = { componentStyle . width }
height = { componentStyle . height }
top = { componentStyle . top }
left = { componentStyle . left }
>
< ResizeHandlersWrapper >
{ DIRECTIIONS . map ( ( item ) => (
< div key = { item } className = { item } onMouseDown = { handleMouseDown } />
) ) }
</ ResizeHandlersWrapper >
</ EditorBlcokWrapper > // Now, This component can change size.
) ;
