react web editor
1.0.0
El editor react-Web es fácil de usar. ¡Está diseñado para el usuario!
El editor react-Web es ligero y simple.
El editor react-Web es amigable con la reacción. Puede usar ganchos para su propio componente.
El editor react-Web tiene una herramienta para personalizar.
Se creó con WebPack para que pueda controlar completamente la administración de configuración y la extensión del proyecto con configuraciones personalizadas.
npm - i react - web - editor import { StyleEditorBlock , TextEditorBlock , ... } from "react-web-editor;O puede importar como se muestra a continuación
import ReactWebEditor from "react-web-editor" ; | Versión | Registro |
|---|---|
| 2.2.0 | Actualizar la interfaz de usuario, arreglar el uso de ganchos |
| 2.1.0 | Actualizar la función de arrastrar y soltar |
| 2.0.0 | Crear tablero editable, actualización de errores menores |
| 1.2.0 | Actualizar el editor de texto para inicializar las opciones |
| 1.1.0 | Actualizar editor para usar una unidad como "REM" |
| ~ 1.0.5 | Use el casco, actualice el casco para async |
| ~ 1.0.2 | Actualizar la función de arrastrar y soltar, resolver un error de interfaz de usuario menor |
| 1.0.0 | Agregar editor de texto |
| 0.1.6 | Funciones de editor de estilo de actualización |
| ~ 0.1.5 | Resolver siguiente.js Font desaparece Bug |
Estos componentes están diseñados para ser fáciles de usar. Controle fácilmente los componentes que no usan más que accesorios.
El componente del editor de estilo (SEC) es un componente de bloque que puede cambiar el tamaño y la ubicación de los componentes. Otro poderoso uso de la SEC es cargar imágenes en la pantalla o cambiar el color de fondo de un componente. Al envolver un componente con la SEC y establecer la posición del componente 'Absoluto', el componente se vuelve editable en un sitio web. Este componente también se puede usar sin su propio componente.
Aparecerán dos pestañas en la pantalla cuando pase un cursor en el componente. La primera pestaña es una pestaña de imagen de carga, que es ayudarlo a agregar una imagen. La segunda pestaña es un manejador de color. Cambia el color de fondo del componente.
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" ,
} ) ;| devolver | uso |
|---|---|
| handalgstart | manejador |
| manejandogend | manejador |
Este componente se puede usar con DraggableHandler y EditorBlockWrapper.
Devuelve cambiar el tamaño de los manejadores. Se puede usar con "resizeHandlerWrapper", el componente de ayuda para cambiar el tamaño.
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" ,
} ) ;| devolver | uso |
|---|---|
| manual | manejador |
Este componente se puede usar con resizeHandlerWrapper y EditorBlockWrapper.
La gancho de UseImage ayuda a cargar y mostrar imágenes en la pantalla.
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| devolver | uso |
|---|---|
| Imagesrc | cadena |
| manifilateado | OnchangeHandler de Inputelement |
USEColor Hook devuelve el controlador de cambio de color.
type UseColorProps {
initialColor ?: string ;
} import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;| devolver | uso |
|---|---|
| color | cadena |
| cambio manual | OnchangeHandler de Inputelement |
Estos componentes lo ayudan a personalizar y generar su propio componente. Puede hacer su propia biblioteca usando esta función. Le permite manejar fácilmente ganchos y componentes del editor.
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 >
) ;El envoltorio de bloques del editor es un componente de estilo. El tamaño y la ubicación del componente se reciben en los accesorios. Cambia el estilo dinámicamente con estos accesorios. Se puede usar con UserSize y UsedRageable
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.
);Este componente está especializado para el gancho de usuarios. Genera vértices en las cuatro direcciones del componente.
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.
) ;
