react web editor
1.0.0
React-Web-Editorは使いやすいです。それはユーザーフレンドリーに設計されています！
React-Web-Editorは軽くてシンプルです。
React-Web-EditorはReactフレンドリーです。独自のコンポーネントにフックを使用できます。
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をアップグレードし、フックの使用を修正します |
| 2.1.0 | ドラッグアンドドロップ機能をアップグレードします |
| 2.0.0 | 編集可能なボード、マイナーバグアップデートを作成します |
| 1.2.0 | テキストエディターをアップグレードして、オプションを初期化します |
| 1.1.0 | 「REM」のようなユニットを使用するためにエディターをアップグレードする |
| 〜1.0.5 | ヘルメットを使用して、ヘルメットを非難に更新します |
| 〜1.0.2 | ドラッグアンドドロップ機能をアップグレードし、マイナーUIバグを解きます |
| 1.0.0 | テキストエディターを追加します |
| 0.1.6 | アップグレードスタイルエディター機能 |
| 〜0.1.5 | next.jsフォント消失バグを解く |
これらのコンポーネントは、ユーザーフレンドリーになるように設計されています。小道具以外のコンポーネントを簡単に制御できます。
スタイルエディターコンポーネント（SEC）は、コンポーネントのサイズと場所を変更できるブロックコンポーネントです。 SECのもう1つの強力な使用法は、画面に画像をアップロードするか、コンポーネントの背景色を変更することです。コンポーネントをSECでラップし、コンポーネントの位置を「絶対」に設定することにより、コンポーネントはWebサイトで編集可能になります。このコンポーネントは、独自のコンポーネントなしでも使用できます。
コンポーネントにカーソルをホバリングすると、2つのタブが画面に表示されます。最初のタブはアップロード画像タブです。これは、画像を追加するのに役立ちます。 2番目のタブはカラーハンドラーです。コンポーネントの背景色を変更します。
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 | 居住者のハンドラー |
| 処理済み | オンマウスハンドラー |
このコンポーネントは、DraggableHandlerとEditorBlockWrapperで使用できます。
サイズのハンドラーを返します。サイズを変更するヘルパーコンポーネントである「seizeHandlerWrapper」で使用できます。
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" ,
} ) ;| 戻る | 使用法 |
|---|---|
| ハンドルマウスダウン | 居住者のハンドラー |
このコンポーネントは、resizeHandlerWrapperおよびEditorBlockWrapperで使用できます。
UseImageフックは、画面に画像をアップロードおよび表示するのに役立ちます。
type UseImageProps {
initialImage ?: string ;
} import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;| 戻る | 使用法 |
|---|---|
| ImagesRc | 弦 |
| handlefilechange | 入力のonchangehandler |
UseColorフックは、色の変更ハンドラーを返します。
type UseColorProps {
initialColor ?: string ;
} import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;| 戻る | 使用法 |
|---|---|
| 色 | 弦 |
| handlecolorchange | 入力のonchangehandler |
これらのコンポーネントは、独自のコンポーネントをカスタマイズおよび生成するのに役立ちます。この機能を使用して独自のライブラリを作成できます。フックとエディターのコンポーネントを簡単に処理できます。
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 >
) ;エディターブロックラッパーは、スタイルコンポーネントです。コンポーネントのサイズと場所は小道具で受信されます。これらの小道具で動的にスタイルを変えます。 UserEsizeで使用して使用できます
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.
);このコンポーネントは、useresizeフックに特化しています。コンポーネントの4つの方向に頂点を生成します。
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.
) ;
