react web editor下载 - react web editor源代码下载

React-Web-editor

一个简单的Wysiwyg React用户编辑器

您可以使用我们的图书馆制作自己的编辑器

您可以探索网站上的各种功能。访问我的网站！

您也可以尝试使用codesandbox。 codesandbox

什么是React Web编辑器

React Web编辑器是一个库，可提供可以动态更改UI的组件的块和挂钩。

它支持调整大小，拖放和拖放的功能，您还可以动态上传图像，以及造型组件的颜色和文本。

坐标标签显示了当前组件的位置，并且指导线（告诉您当前的组件是否集中）内置在块类型组件中。

最终，您可以制作一个可以动态更改Web的编辑页面。

核心特征

React-Web-编辑器易于使用。它设计为用户友好！
- 核心功能是使用钩子创建的，但它与块组件包装，以使其易于使用尽可能简单。因此，想要使用的用户可以简单地导入块组件并放置您的代码。
React-Web-编辑器很简单。
- 目的是使React-Web-编辑器简单明亮。因此，除基本库外，它具有最小的依赖性。
React-Web-editor反应友好。您可以将钩子用于自己的组件。
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	solve next.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）组件使所有儿童组件都可以在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" ,
  } ) ;

返回	用法
wandledragstart	OnMousedown处理程序
处理	Mouseup处理程序

该组件可以与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	OnMousedown处理程序

该组件可以与ResizeHandlerWrapper和EditorBlockWrapper一起使用。

使用图

使用图像挂钩有助于上传和显示图像在屏幕上。

道具

 type UseImageProps {
  initialImage ?: string ;
}

用法

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

返回	用法
Imagesrc	细绳
handerfilechange	输入的OnChangeHandler

usecolor

用户钩返回颜色更换处理程序。

道具

 type UseColorProps {
  initialColor ?: string ;
}

用法

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

返回	用法
颜色	细绳
HandleColorChange	输入的OnChangeHandler

辅助组件

这些组件可帮助您自定义和生成自己的组件。您可以使用此功能制作自己的库。它使您可以轻松处理挂钩和编辑器组件。

可编辑的董事会

可编辑的板组件是辅助组件。如果将块组件（例如StyleDitorBlock或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

编辑器块包装器是样式组件。组件的大小和位置在道具中收到。通过这些道具，它动态地改变了样式。它可以与用户化和用户使用

道具

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

resizehandlerWrapper

该组件专门用于用户式挂钩。它在组件的四个方向上生成顶点。

用法示例

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