react web editor
1.0.0
Der React-Web-Eduitor ist einfach zu bedienen. Es ist benutzerfreundlich!
Der React-Web-Eduitor ist leicht und einfach.
Der React-Web-Editor ist reagentfreundlich. Sie können Hooks für Ihre eigene Komponente verwenden.
Der React-Web-Eduitor verfügt über Werkzeuge zum Anpassen.
Es wurde mit WebPack erstellt, damit Sie die Konfigurationsverwaltung und die Projekterweiterung mit benutzerdefinierten Einstellungen vollständig steuern können.
npm - i react - web - editor import { StyleEditorBlock , TextEditorBlock , ... } from "react-web-editor;oder Sie können wie unten importieren
import ReactWebEditor from "react-web-editor" ; | Version | Protokoll |
|---|---|
| 2.2.0 | Upgrade UI, reparieren Sie die Verwendung von Haken |
| 2.1.0 | Upgrade -Drag & Drop -Funktion aufbauen |
| 2.0.0 | Erstellen Sie eine editable Board, Minor -Bug -Update |
| 1.2.0 | Aktualisieren Sie den Texteditor, um Optionen zu initialisieren |
| 1.1.0 | Upgrade -Editor für die Verwendung von Einheiten wie "Rem" verwenden |
| ~ 1.0.5 | Verwenden Sie den Helm, aktualisieren Sie Helm auf Async |
| ~ 1.0.2 | Upgrade Drag & Drop -Funktion, lösen Sie Minor UI -Fehler |
| 1.0.0 | Texteditor hinzufügen |
| 0,1,6 | Upgrade -Style -Editor -Funktionen |
| ~ 0,1,5 | Lösen Sie Next.js Schriftart verschwinden |
Diese Komponenten sind so konzipiert, dass sie benutzerfreundlich sind. Steuern Sie die Komponenten einfach mithilfe von nicht mehr als Requisiten.
Die Style Editor -Komponente (SEC) ist eine Blockkomponente, die die Größe und den Standort von Komponenten ändern kann. Eine weitere leistungsstarke Verwendung der SEC ist das Hochladen von Bildern auf dem Bildschirm oder das Ändern der Hintergrundfarbe einer Komponente. Durch das Einwickeln einer Komponente mit der SEC und der Festlegung der Position der Komponente 'Absolute' wird die Komponente auf einer Website bearbeitet. Diese Komponente kann auch ohne Ihre eigene Komponente verwendet werden.
Auf dem Bildschirm werden zwei Registerkarten angezeigt, wenn Sie einen Cursor auf der Komponente bewegen. Die erste Registerkarte ist eine Registerkarte "Uploading Image", das Ihnen hilft, ein Bild hinzuzufügen. Die zweite Registerkarte ist ein Farbhandler. Es ändert die Hintergrundfarbe der Komponente.
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" ,
} ) ;| zurückkehren | Verwendung |
|---|---|
| HandledRagstart | OnmouseDown -Handler |
| HandledRagend | Onmouseup -Handler |
Diese Komponente kann mit DraggableHandler und EditorBlockWrapper verwendet werden.
Es kehrt die Größe der Größe der Handler zurück. Es kann mit "GrößenHandlerwrapper" verwendet werden, der Helferkomponente zur Größe der Größe.
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" ,
} ) ;| zurückkehren | Verwendung |
|---|---|
| Handlemousedown | OnmouseDown -Handler |
Diese Komponente kann mit ReiseHandlerWrapper und EditorBlockWrapper verwendet werden.
Der Anwendungs -Haken hilft beim Hochladen und Anzeigen von Bildern auf dem Bildschirm.
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| zurückkehren | Verwendung |
|---|---|
| ImagesRC | Saite |
| Handlinge | OnchangeHandler der InputElement |
Der UseColor -Hook gibt Farbwechsel -Handler zurück.
type UseColorProps {
initialColor ?: string ;
} import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;| zurückkehren | Verwendung |
|---|---|
| Farbe | Saite |
| Handlecolorchange | OnchangeHandler der InputElement |
Diese Komponenten helfen Ihnen dabei, Ihre eigene Komponente anzupassen und zu generieren. Sie können Ihre eigene Bibliothek mit dieser Funktion erstellen. Sie können problemlos Haken und Editor -Komponenten behandeln.
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 >
) ;Der Editor Block Wrapper ist eine Stilkomponente. Die Größe und der Ort der Komponente werden in Requisiten empfangen. Es ändert sich dynamisch mit diesen Requisiten. Es kann mit benutzerfreundlichem und usedRaggable verwendet werden
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.
);Diese Komponente ist für den ugiersize Haken spezialisiert. Es erzeugt Eckpunkte in den vier Richtungen der Komponente.
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.
) ;
