re editor

Re-editor ·

Editor teks yang bereaksi kaya di luar kotak

• Cara menggunakan
  • Di luar kotak - berikan bilah alat Antd gaya
  • Kustom - Hanya memperkenalkan inti editor, menyesuaikan toolbar
• Pertanyaan yang sering diajukan
• Fitur yang didukung

Fitur

• Di luar kotak, tidak diperlukan konfigurasi
• Disesuaikan, Anda dapat mengembangkan bilah alat dari gaya apa pun dan membentuk sendiri [penyelesaian API]
• Pengaturan fungsi elemen dukungan, seperti mengubah ukuran gambar
• Dukung sintaks markdown
• Lihat lebih banyak

Cara menggunakan

Untuk beradaptasi dengan kebutuhan pengembangan yang berbeda, editor menyediakan dua metode penggunaan berikut.

Gunakan di luar kotak

Re-editor adalah komponen yang dienkapsulasi yang dapat digunakan setelah pemasangan. Ini berisi @editor/core dan @editor/toolbar-antd. Toolbar menggunakan gaya ANTD secara default. Jika Anda ingin menggunakan toolbar lain, silakan merujuk ke dokumen khusus berikut

Ketergantungan Instalasi

$ npm install re-editor

Memperkenalkan gaya

Diperkenalkan dalam JS

 import 're-editor/lib/styles/index.css'

Ini juga dapat diperkenalkan di CSS (membutuhkan dukungan preprocessing CSS)

 @import 're-editor/lib/styles/index.css'

Alat peraga

milik	menjelaskan	jenis
nilai	Nilai editor	obyek
Onchange	Panggilan balik untuk editor mengubah konten	(nilai: value) => void
placeholder	Teks placeholder	rangkaian
readonly	Mode baca saja	Boolean
OnimageUpload	Tempat tidur gambar khusus	(file: file) => janji <url: string>
peralatan	Atur konten tampilan toolbar	Array <array

Atur toolbar untuk menampilkan konten

tools props Formulir Support Array Dukungan Alat, jika itu adalah array dua dimensi, itu akan ditampilkan dalam grup

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

nama	Fungsi
berani	Berani
Miring	Miring
menggarisbawahi	Menggarisbawahi
Strikethrough	Hapus baris
orderedlist	Daftar yang dipesan
Daftar yang tidak dipesan	Daftar yang tidak dipesan
Menuju	judul
meluruskan	Penyelarasan
gambar	gambar
meja	lembaran
kode	Kode
membuka	Menarik kembali
mengulangi	Mengolah lagi
layar penuh	layar penuh

Menyesuaikan

Editor dibagi menjadi dua bagian, area pengeditan konten dan bilah alat. Berikut ini menjelaskan cara menyesuaikan bilah alat

Instal Editor Core

$ npm install @re-editor/core

Buat bilah alat

Anda dapat membuat toolbar editor dengan cara apa pun. Anda perlu meneruskan instance editor ke bilah alat. Anda dapat merujuk pada implementasi re-editor dan @editor/toolbar-antd untuk melihat dokumentasi API untuk perincian (bagian dokumen ini belum ditulis, apakah akan diselesaikan dalam waktu dekat?)

Misalnya, terapkan fungsi yang berani:

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

Pengantar paket

• Editor Re-Editor: Editor yang dienkapsulasi dengan Toolbar
• @Re-editor/Core: Editor Core
• @re-editor/toolbar-antd: toolbar berdasarkan ANTD, default
• @Re-editor/Contoh: Proyek Demo

FAQ

Apa perbedaan antara perbandingan dengan Slate atau Draft-Js?

Slate atau Draft bukan editor murni, mereka lebih seperti kerangka kerja untuk membangun editor. Re-editor dikembangkan berdasarkan batu tulis, jadi Anda tidak perlu memperhatikan proses构建编辑器.

Cara memodifikasi gayanya

Gaya ini dibagi menjadi dua bagian, simpul (BOLD, H1, H2, dll.) Dan bilah alat. Mereka semua dapat menulis ulang gaya dasar melalui CSS, dan toolbar juga dapat sepenuhnya menulis ulang gaya melalui CSS.

Apa yang harus saya lakukan jika jumlah data yang disimpan terlalu besar setiap kali?

Menggunakan pembaruan tambahan, nilai panggilan balik Onchange berada dalam format yang tidak dapat diubah. Anda dapat menggunakan Metode Immutable-JS-Diff dan lain untuk mendapatkan konten diff untuk pembaruan tambahan

Cara menentukan server gambar unggah

Gambar disimpan sebagai base64 secara default. Jika Anda perlu mengunggah gambar ke server yang ditentukan, Anda dapat menggunakan fungsi onImageUpload , (file: file) => janji <url: string> kode sampel>

Fungsi

Dekorasi teks

斜体下划线粗体hapus下标删除线

Daftar

有序列表无序列表

Penyelarasan

Sejajarkan居中对齐左对齐右对齐dengan两端对齐

judul

h1 h2 h3 h4 h5 h6

lainnya

• 图片
  • Atur ukurannya
  • Salin dari clipboard
  • Mendukung pengunggahan alamat server gambar kustom
• 表格
  • Tambahkan baris
  • Tambahkan kolom
  • Hapus baris
  • Hapus kolom
• 代码高亮
  • JS
  • CSS
  • html
• markdown
  • H1-H6: #
  • Kutipan: >
  • Daftar yang dipesan: -
  • DAFTAR YANG TIDAK PERINTAH: 1.
• Pengeditan layar penuh

Fungsi lain terus meningkat ...