react web editor
1.0.0
Редактор React-Web проста в использовании. Он разработан удобен для пользователя!
Редактор React-Web легкий и простой.
Редактор React-Web подходит для реагирования. Вы можете использовать крючки для своего собственного компонента.
Редактор React-Web имеет инструменты для настройки.
Он был построен с помощью 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 | Решите следующую ошибку Font. |
Эти компоненты предназначены для удобства для пользователя. Легко управлять компонентами, используя не более, чем реквизит.
Компонент редактора стиля (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" ,
} ) ;| возвращаться | Использование |
|---|---|
| обработка | Онмуседаун |
| обработка | 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 | Онмуседаун |
Этот компонент может использоваться с ResizeHandlerWrapper и EditorBlockWrapper.
Подключение UseImage помогает загружать и отображать изображения на экране.
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| возвращаться | Использование |
|---|---|
| Imagesrc | нить |
| Руководство | Onchangehandler of InputElement |
USECOLOR Hook возвращает обработчик изменения цвета.
type UseColorProps {
initialColor ?: string ;
} import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;| возвращаться | Использование |
|---|---|
| цвет | нить |
| HandleCorchange | Onchangehandler of 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 >
) ;Редактор Block 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.
);Этот компонент специализируется для Hook UserSize. Он генерирует вершины в четырех направлениях компонента.
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.
) ;
