react web editor
1.0.0
React-Web-Editor ใช้งานง่าย ได้รับการออกแบบให้ใช้งานง่าย!
React-Web-Editor นั้นเบาและเรียบง่าย
React-Web-Editor เป็นมิตรกับปฏิกิริยา คุณสามารถใช้ตะขอสำหรับส่วนประกอบของคุณเอง
React-Web-Editor มีเครื่องมือสำหรับการปรับแต่ง
มันถูกสร้างขึ้นโดยใช้ webpack เพื่อให้คุณสามารถควบคุมการจัดการการกำหนดค่าและส่วนขยายโครงการด้วยการตั้งค่าที่กำหนดเอง
npm - i react - web - editor import { StyleEditorBlock , TextEditorBlock , ... } from "react-web-editor;หรือคุณสามารถนำเข้าด้านล่าง
import ReactWebEditor from "react-web-editor" ; | รุ่น | บันทึก |
|---|---|
| 2.2.0 | อัพเกรด UI แก้ไขการใช้งาน hooks |
| 2.1.0 | อัพเกรดคุณสมบัติการลากและวาง |
| 2.0.0 | สร้างบอร์ดที่แก้ไขได้การอัปเดตข้อผิดพลาดเล็กน้อย |
| 1.2.0 | อัพเกรดตัวแก้ไขข้อความเพื่อเริ่มต้นตัวเลือก |
| 1.1.0 | อัปเกรดตัวแก้ไขเพื่อใช้หน่วยเช่น "REM" |
| ~ 1.0.5 | ใช้หมวกกันน็อกอัปเดตหมวกกันน็อกเป็น async |
| ~ 1.0.2 | อัพเกรดคุณลักษณะการลากและวางแก้บั๊ก UI เล็กน้อย |
| 1.0.0 | เพิ่มตัวแก้ไขข้อความ |
| 0.1.6 | อัพเกรดคุณสมบัติตัวแก้ไขสไตล์ |
| ~ 0.1.5 | แก้ไขข้อผิดพลาดของ JS Next.js หายไป |
ส่วนประกอบเหล่านี้ได้รับการออกแบบให้เป็นมิตรกับผู้ใช้ ควบคุมส่วนประกอบได้อย่างง่ายดายโดยใช้ไม่เกินอุปกรณ์ประกอบฉาก
องค์ประกอบตัวแก้ไขสไตล์ (วินาที) เป็นองค์ประกอบบล็อกซึ่งสามารถเปลี่ยนขนาดและตำแหน่งของส่วนประกอบ การใช้งานที่ทรงพลังอีกครั้งของ SEC คือการอัปโหลดรูปภาพบนหน้าจอหรือเปลี่ยนสีพื้นหลังของส่วนประกอบ โดยการห่อส่วนประกอบด้วย ก.ล.ต. และตั้งค่าตำแหน่งของส่วนประกอบ 'สัมบูรณ์' ส่วนประกอบจะสามารถแก้ไขได้บนเว็บไซต์ ส่วนประกอบนี้สามารถใช้งานได้โดยไม่ต้องใช้ส่วนประกอบของคุณเอง
สองแท็บจะปรากฏบนหน้าจอเมื่อคุณวางเคอร์เซอร์บนส่วนประกอบ แท็บแรกคือแท็บรูปภาพอัพโหลดซึ่งช่วยคุณเพิ่มรูปภาพ แท็บที่สองคือตัวจัดการสี มันเปลี่ยนสีพื้นหลังขององค์ประกอบ
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" ,
} ) ;| กลับ | การใช้งาน |
|---|---|
| HandledRagStart | Handler Onmousedown |
| HandleDragend | ตัวจัดการ OnMouseUp |
ส่วนประกอบนี้สามารถใช้กับ DraggableHandler และ EditorBlockWrapper
มันกลับมาปรับขนาดตัวจัดการ มันสามารถใช้กับ "resizeHandlerWrapper" ซึ่งเป็นองค์ประกอบของผู้ช่วยในการปรับขนาด
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" ,
} ) ;| กลับ | การใช้งาน |
|---|---|
| handlemousedown | Handler Onmousedown |
ส่วนประกอบนี้สามารถใช้กับ ResizeHandlerWrapper และ EditorBlockWrapper
Hook UseMage ช่วยอัปโหลดและแสดงภาพบนหน้าจอ
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| กลับ | การใช้งาน |
|---|---|
| ภาพ | สาย |
| มือจับ | onchangeHandler ของ inputelement |
Hook Usecolor ส่งคืนตัวจัดการเปลี่ยนสี
type UseColorProps {
initialColor ?: string ;
} import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;| กลับ | การใช้งาน |
|---|---|
| สี | สาย |
| Handlecolorchange | onchangeHandler ของ inputelement |
ส่วนประกอบเหล่านี้ช่วยคุณปรับแต่งและสร้างส่วนประกอบของคุณเอง คุณสามารถสร้างห้องสมุดของคุณเองโดยใช้คุณสมบัตินี้ ช่วยให้คุณจัดการกับส่วนประกอบตะขอและตัวแก้ไขได้อย่างง่ายดาย
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 >
) ;ตัวแก้ไขบล็อก wrapper เป็นองค์ประกอบสไตล์ ขนาดและตำแหน่งของส่วนประกอบได้รับในอุปกรณ์ประกอบฉาก มันเปลี่ยนสไตล์แบบไดนามิกด้วยอุปกรณ์ประกอบฉากเหล่านี้ สามารถใช้กับผู้ใช้งานและใช้งานได้ง่าย
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.
);ส่วนประกอบนี้มีความเชี่ยวชาญเฉพาะสำหรับเบ็ดที่ใช้งานได้ มันสร้างจุดยอดในสี่ทิศทางของส่วนประกอบ
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.
) ;
