react web editor

React-Web-Editor

Editor Wysiwyg sederhana untuk pengguna React

Anda dapat membuat editor Anda sendiri menggunakan perpustakaan kami

Anda dapat menjelajahi berbagai fitur di situs web. Kunjungi situs web saya!

Anda juga dapat mencoba pada kode dan kotak. Kode dan kotak

Daftar isi

1. Apa itu Editor Web React
2. Karakteristik inti
3. Memulai
4. Versi Up Log
5. Dokumen
   • Komponen blok
     • Blok editor gaya
     • Blok Editor Teks
     • Tabel Seret dan Jatuhkan
   • Kait
     • Usedraggable
     • penggunaan
     • UseImage
     • Usecolor
   • Komponen Pembantu
     • Papan yang dapat diedit
     • EditorBlockWrapper
     • REVERSIZANDLERWRAPPER

---

? Apa itu Editor Web React

• React Web Editor adalah perpustakaan yang menyediakan komponen blok dan kait komponen yang secara dinamis dapat mengubah UI.

• Ini mendukung fitur -fitur seperti mengubah ukuran, diseret, dan seret dan drop, Anda juga dapat mengunggah gambar secara dinamis, dan warna dan teks komponen styling.

• Tag koordinat, yang menunjukkan di mana komponen saat ini berada, dan garis panduan, yang memberi tahu Anda jika komponen saat ini terpusat, dibangun ke dalam komponen tipe blok.

• Ultimatly, Anda dapat membuat halaman editor yang dapat mengubah UI Web secara dinamis.

Karakteristik inti

• React-web-editor mudah digunakan. Itu dirancang ramah pengguna!

  • Fitur inti dibuat menggunakan Hook, tetapi dibungkus dengan komponen blok untuk memudahkan digunakan sesederhana mungkin. Oleh karena itu, pengguna yang ingin menggunakan hanya dapat mengimpor komponen blok dan meletakkan kode Anda.

• React-Web-editor ringan dan sederhana.

  • Tujuannya adalah untuk membuat reaksi-web-editor sederhana dan ringan. Oleh karena itu, ia memiliki ketergantungan minimal kecuali untuk perpustakaan penting.

• React-Web-editor ramah reaksi. Anda dapat menggunakan kait untuk komponen Anda sendiri.

• React-Web-Editor memiliki alat untuk disesuaikan.

  • Komponen gaya didukung. Itu membuat Anda mudah memperluas fitur baru.

• Itu dibangun menggunakan webpack sehingga Anda dapat sepenuhnya mengontrol manajemen konfigurasi dan ekstensi proyek dengan pengaturan khusus.

? Memulai

menginstal

 npm - i react - web - editor

impor

 import { StyleEditorBlock , TextEditorBlock , ... } from "react-web-editor;

atau Anda dapat mengimpor seperti di bawah ini

 import ReactWebEditor from "react-web-editor" ; 

Versi Up Log

Versi	Log
2.2.0	Tingkatkan UI, perbaiki penggunaan kait
2.1.0	Tingkatkan fitur seret dan lepas
2.0.0	Buat papan yang dapat diedit, pembaruan bug minor
1.2.0	Tingkatkan Editor Teks untuk menginisialisasi opsi
1.1.0	Upgrade Editor untuk menggunakan unit seperti "REM"
~ 1.0.5	Gunakan helm, perbarui helm ke async
~ 1.0.2	Tingkatkan fitur seret dan lepas, selesaikan bug UI minor
1.0.0	Tambahkan Editor Teks
0.1.6	Tingkatkan Fitur Editor Gaya
~ 0.1.5	Selesaikan bug menghilang selanjutnya.js

---

Dokumen

Komponen blok

Komponen -komponen ini dirancang agar ramah pengguna. Komponen Kontrol dengan Mudah Menggunakan Tidak Lebih Dari Props.

Blok editor gaya

Style Editor Component (SEC) adalah komponen blok yang dapat mengubah ukuran dan lokasi komponen. Penggunaan lain yang kuat dari SEC mengunggah gambar di layar atau mengubah warna latar belakang komponen. Dengan membungkus komponen dengan SEC dan mengatur posisi komponen 'absolute', komponen dapat diedit di situs web. Komponen ini juga dapat digunakan tanpa komponen Anda sendiri.

Dua tab akan muncul di layar saat Anda mengarahkan kursor pada komponen. Tab pertama adalah tab gambar pengunggahan, yang membantu Anda menambahkan gambar. Tab kedua adalah penangan warna. Itu mengubah warna latar belakang komponen.

• Alat peraga

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

• Penggunaan

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

Blok Editor Teks

Komponen Editor Teks (TEC) adalah komponen blok. Komponen ini memiliki fitur editor teks kaya sederhana. TEC memiliki dua fungsi. Ini memungkinkan Anda untuk mengetik dan mengubah gaya menggunakan jendela pengaturan. Dua tab akan muncul di layar saat Anda mengarahkan kursor pada komponen. Ini membantu Anda mengubah lokasi komponen. Tab kedua adalah penangan jendela Pengaturan. Jendela akan muncul di layar saat Anda mengklik tab kedua.

• Alat peraga

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

• Penggunaan

    import { TextEditorBlock } from "react-web-editor"

    ...

    return (
      < TextEditorBlock
        width = { 200 }
        height = { 300 }
        left = { left }
        top = { top }
        parentStyle = { { width : 600 , height : 800 } }
        unit = { "px" }
      />
    ) ;

Tabel Seret dan Jatuhkan

Komponen drag and drop tabel (DNDT) membuat semua komponen anak dapat diseret di dalam area DNDT. Anda dapat menggunakan DNDT dengan membungkus komponen Anda yang Anda inginkan untuk diseret.

• Alat peraga

    type DragAndDropTableProps {
      color ?: string ;
      isVertical: boolean ;
    }

• Penggunaan

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

Kait

Perpustakaan kami terstruktur dengan "kait" ramah. Gunakan kait saat Anda membutuhkan satu fitur dari kait atau saat Anda ingin membuat komponen khusus. Dengan react-web-editor Anda dapat menghasilkan halaman editor dan perpustakaan Anda sendiri. Ini membutuhkan penggunaan yang lebih tepat. Jadi, jika Anda ingin menggunakan fitur perpustakaan kami secara sederhana, kami sarankan menggunakan komponen blok.

Usedraggable

• alat peraga

  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.

• penggunaan

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

• kembali

kembali	penggunaan
HandledragStart	Penangan Onmousedown
Handledragend	Onmouseup Handler

---

Komponen ini dapat digunakan dengan DraggableHandler, dan EditorBlockWrapper.

penggunaan

Ini mengembalikan ubah ukuran penangan. Ini dapat digunakan dengan "ReSizhandlerWrapper", komponen helper untuk mengubah ukuran.

• alat peraga

  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.

• penggunaan

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

• kembali

kembali	penggunaan
edown handlem	Penangan Onmousedown

---

Komponen ini dapat digunakan dengan REVEICEHandlerWrapper dan EditorBlockWrapper.

UseImage

UseImage Hook membantu mengunggah dan menampilkan gambar di layar.

• alat peraga

 type UseImageProps {
  initialImage ?: string ;
}

• penggunaan

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

• kembali

kembali	penggunaan
gambar	rangkaian
handlefilechange	Onchangehandler dari InputElement

---

Usecolor

Hook usecolor mengembalikan penangan perubahan warna.

• alat peraga

 type UseColorProps {
  initialColor ?: string ;
}

• penggunaan

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

• kembali

kembali	penggunaan
warna	rangkaian
Handlecolorchange	Onchangehandler dari InputElement

---

Komponen Pembantu

Komponen -komponen ini membantu Anda menyesuaikan dan menghasilkan komponen Anda sendiri. Anda dapat membuat perpustakaan sendiri menggunakan fitur ini. Ini memungkinkan Anda dengan mudah menangani kait dan komponen editor.

Papan yang dapat diedit

Komponen papan yang dapat diedit adalah komponen pembantu. Jika Anda meletakkan komponen blok (seperti StyleEditorBlock, atau TextEditorBlock) kepada anak -anak komponen ini dan mendefinisikan ParentStyle, komponen anak -anak akan terikat di area papan yang dapat diedit.

• Alat peraga

    type EditableBoardProps {
      width: number ;
      height: number ;
      backgroundColor: string ;
      left ?: number ;
      top ?: number ;
      unit: string ;
    }

• Penggunaan

    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

Pembungkus blok editor adalah komponen gaya. Ukuran dan lokasi komponen diterima dalam alat peraga. Itu berubah secara dinamis dengan alat peraga ini. Itu dapat digunakan dengan menggunakan dan digunakan

• alat peraga

 type EditorBlockWrapperProps {
  width: number ;
  height: number ;
  left: number ;
  top: number ;
}

• Contoh Penggunaan

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

REVERSIZANDLERWRAPPER

Komponen ini berspesialisasi untuk pengait yang menggunakannya. Ini menghasilkan simpul dalam empat arah komponen.

• Contoh Penggunaan

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