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 | ترقية واجهة المستخدم ، إصلاح استخدام السنانير |
| 2.1.0 | ترقية ميزة السحب وإسقاط |
| 2.0.0 | إنشاء لوحة قابلة للتحرير ، تحديث الأخطاء البسيطة |
| 1.2.0 | ترقية محرر النصوص لتهيئة الخيارات |
| 1.1.0 | محرر الترقية لاستخدام وحدة مثل "REM" |
| ~ 1.0.5 | استخدم خوذة ، تحديث الخوذة إلى Async |
| ~ 1.0.2 | ترقية ميزة السحب والإفلات ، وحل علة واجهة المستخدم البسيطة |
| 1.0.0 | أضف محرر النص |
| 0.1.6 | ميزات تحرير نمط الترقية |
| ~ 0.1.5 | حل الخط التالي. |
تم تصميم هذه المكونات لتكون سهلة الاستخدام. تحكم بسهولة المكونات باستخدام أكثر من الدعائم.
مكون محرر النمط (SEC) هو مكون كتلة يمكن أن يغير حجم المكونات وموقعها. استخدام قوي آخر لـ SEC هو تحميل الصور على الشاشة أو تغيير لون خلفية المكون. من خلال لف مكونًا مع 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 | 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" ,
} ) ;| يعود | الاستخدام |
|---|---|
| بيده | onmousedown معالج |
يمكن استخدام هذا المكون مع ResizeHandlerWrapper و EditorBlockWrapper.
يساعد خطاف UseImage على تحميل وعرض الصور على الشاشة.
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| يعود | الاستخدام |
|---|---|
| الصور | خيط |
| HandleFileChange | onChangeHandler من InputElement |
يعيد الخطاف 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 >
) ;غلاف كتلة المحرر هو مكون نمط. يتم استلام حجم وموقع المكون في الدعائم. يتغير نمط ديناميكي مع هذه الدعائم. يمكن استخدامه مع المستخدم واستخدامه
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.
) ;
