react web editor Download react web editor 소스 코드 다운로드

반응-편집자

React 사용자를위한 간단한 wysiwyg 편집기

라이브러리를 사용하여 자신의 편집자를 만들 수 있습니다

웹 사이트에서 다양한 기능을 탐색 할 수 있습니다. 내 웹 사이트를 방문하십시오!

Codesandbox에서 시도 할 수도 있습니다. 코드 및 박스

React 웹 편집기 란 무엇입니까?
핵심 특성
시작하기
버전 업 로그
서류
- 블록 구성 요소
  - 스타일 편집기 블록
  - 텍스트 편집기 블록
  - 드래그 앤 드롭 테이블
- 후크
  - 중고 가능
  - useresize
  - useimage
  - usecolor
- 도우미 구성 요소
  - 편집 가능한 보드
  - editorBlockWrapper
  - RESIZEHANDLERWPRAPPER

? React 웹 편집기 란 무엇입니까?

React 웹 편집기는 UI를 동적으로 변경할 수있는 구성 요소의 블록 컴포넌트 및 고리를 제공하는 라이브러리입니다.

크기 조정, 드래그 가능 및 드래그 앤 드롭과 같은 기능을 지원하고 이미지를 동적으로 업로드하고 구성 요소의 색상 및 텍스트를 스타일링 할 수도 있습니다.

현재 구성 요소가 위치한 위치를 보여주는 좌표 태그와 현재 구성 요소가 중앙 집중화되어 있는지 알려주는 가이드 라인은 블록 유형 구성 요소에 내장되어 있습니다.

Ultimatly, 웹의 UI를 동적으로 변경할 수있는 편집기 페이지를 만들 수 있습니다.

? 핵심 특성

React-Web 편집자는 사용하기 쉽습니다. 사용자 친화적 인 설계되었습니다!
- 핵심 기능은 Hook를 사용하여 만들어졌지만 블록 구성 요소로 포장되어 최대한 간단하게 사용할 수 있습니다. 따라서 사용하려는 사용자는 단순히 블록 구성 요소를 가져 와서 코드를 넣을 수 있습니다.
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	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	다음을 해결하십시오. JS 글꼴 사라지는 버그가 사라집니다

?서류

블록 구성 요소

이 구성 요소는 사용자 친화적으로 설계되었습니다. 소품 이상을 사용하여 구성 요소를 쉽게 제어합니다.

스타일 편집기 블록

스타일 편집기 구성 요소 (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 >
    ) ;

텍스트 편집기 블록

텍스트 편집기 구성 요소 (TEC)는 블록 구성 요소입니다. 이 구성 요소에는 간단한 풍부한 텍스트 편집기 기능이 있습니다. TEC에는 두 가지 기능이 있습니다. 설정 창을 사용하여 스타일을 입력하고 변경할 수 있습니다. 구성 요소의 커서를 호버 할 때 화면에 두 개의 탭이 나타납니다. 구성 요소의 위치를 변경하는 데 도움이됩니다. 두 번째 탭은 설정 창 처리기입니다. 두 번째 탭을 클릭하면 창이 화면에 나타납니다.

소품

    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" }
      />
    ) ;

드래그 앤 드롭 테이블

DNDT (Drag and Drop Table) 구성 요소는 DNDT 영역 내에서 모든 어린이 구성 요소를 드래그 할 수있게합니다. 드래그 가능하고자하는 구성 요소를 감싸서 DNDT를 사용할 수 있습니다.

소품

    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 >
    ) ;

후크

우리의 도서관은 "후크"로 구성되었습니다. 후크에서 단일 기능이 필요하거나 사용자 정의 구성 요소를 만들 때 후크를 사용하십시오. React-web 편집자를 사용하면 편집기 페이지와 자신의 라이브러리를 생성 할 수 있습니다. 이들은 더 정확한 사용법이 필요합니다. 따라서 라이브러리의 기능을 간단히 사용하려면 블록 구성 요소를 사용하는 것이 좋습니다.

중고 가능

소품

  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 handler

이 구성 요소는 DraggableHandler 및 EditorBlockWrapper와 함께 사용할 수 있습니다.

useresize

크기 조정 핸들러를 반환합니다. 크기를 조정하는 도우미 구성 요소 인 "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

UseImage 후크는 화면에 이미지를 업로드하고 표시하는 데 도움이됩니다.

소품

 type UseImageProps {
  initialImage ?: string ;
}

용법

 import { useImage } from "react-web-editor" ;
...
const { imageSrc , handleImageChange } = useImage ( { initialImage } ) ;

보고

반품	용법
imagesrc	끈
handleFileChange	입력의 onchangehandler

usecolor

Usecolor Hook는 색상 변경 처리기를 반환합니다.

소품

 type UseColorProps {
  initialColor ?: string ;
}

용법

 import { useColor } from "react-web-editor" ;
...
const { color , handleColorChange } = useColor ( { initialColor } ) ;

보고

반품	용법
색상	끈
HandleColorChange	입력의 onchangehandler

도우미 구성 요소

이 구성 요소는 자신의 구성 요소를 사용자 정의하고 생성하는 데 도움이됩니다. 이 기능을 사용하여 자신의 라이브러리를 만들 수 있습니다. 후크 및 편집기 구성 요소를 쉽게 처리 할 수 있습니다.

편집 가능한 보드

편집 가능한 보드 구성 요소는 도우미 구성 요소입니다. 이 구성 요소의 어린이에게 블록 구성 요소 (StyleEditorBlock 또는 TexteditorBlock)를 넣고 ParentStyle을 정의하면 어린이 구성 요소가 편집 가능한 보드 영역에 묶여 있습니다.

소품

    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 >
    ) ;

editorBlockWrapper

편집기 블록 래퍼는 스타일 구성 요소입니다. 구성 요소의 크기와 위치는 소품으로 수신됩니다. 이 소품으로 스타일을 동적으로 변경합니다. useresize 및 usedRaggable과 함께 사용할 수 있습니다

소품

 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.
);

RESIZEHANDLERWPRAPPER

이 구성 요소는 Usesize Hook에 특화되어 있습니다. 구성 요소의 네 방향으로 정점을 생성합니다.

사용 예제

 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.
) ;