react native rich editor

Bereaksi Editor Teks Kaya Asli

---

Editor teks kaya yang berfungsi penuh untuk Android dan iOS (MacOS dan Windows)?

Jika Anda ingin menggunakan flutter , Anda dapat memeriksa di sini untuk menambahkan flutter_rich_editor

 yarn add react-native-pell-rich-editor
or
npm i react-native-pell-rich-editor

Juga, ikuti instruksi di sini untuk menambahkan ketergantungan Native react-native-webview .

• Pratinjau Online （Beberapa Fungsi）
• Contoh kait menulis ulang

---

Masalah gulir

### usecontainer = {true} perlu ditempatkan di scrolview dan menambahkan metode panggilan balik oncursorPosition untuk menangani posisi batang gulir, lihat contoh this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

---

RichEditor

Komponen editor. Cukup tempatkan komponen ini dalam hierarki tampilan Anda untuk menerima editor teks kaya yang berfungsi penuh.

RichEditor mengambil alat peraga opsional berikut:

• html

  Menerima HTML khusus, memungkinkan Anda untuk membuat kustomisasi sendiri

• placeholder

  Bungkus placeholder konten editor

• initialContentHTML

  HTML yang akan diterjemahkan di bagian konten tentang beban.

• initialFocus

• Nilai Boolean ke Fokus Permintaan Konten Awal. Nilai defaultnya false .

• disabled

• Nilai boolean untuk menonaktifkan editor. Nilai defaultnya false .

• enterKeyHint

• Nilai String Untuk Mengatur Jenis Kunci Return - ReturnKeyType

• editorInitializedCallback

  Fungsi yang akan dipanggil ketika editor telah diinisialisasi.

• editorStyle

  Styling untuk wadah atau untuk editor kaya lebih banyak pengaturan gelap atau terang. Objek yang berisi opsi berikut:

  • backgroundColor : Warna Latar Belakang Editor
  • color : Warna Teks Editor
  • Warna kursor/seleksi caretColor
  • placeholderColor : Editor Placeholder Text Color
  • contentCSSText : Konten Editor Teks CSS （Awal Valid）
  • cssText : Editor Teks CSS Global （Awal Valid）
  • initialCSSText : Menyuntikkan CSS di awal stylesheet inline. Berguna untuk menggabungkan font khusus (lihat di bawah).

• onChange Callback Setelah Modifikasi Data Editor

• panggilan balik onHeightChange setelah perubahan tinggi

• Callback onMessage di luar pemrosesan jenis internal postmessage

   < img src ="" onclick =" _.sendEvent('ImgClick') " contenteditable =" false " />

• command Eksekusi JS di Editor

   // $ = document
   this . richText . current ?. commandDOM ( '$.execCommand(' insertHTML ', false, "<br/>")' ) ;

• commandDOM memanipulasi dom di editor

   // $ = document.querySelector
   this . richText . current ?. commandDOM ( `$('#title').style.color=' ${ color } '` ) ;

• useContainer Nilai boolean yang menentukan apakah wadah tampilan dililitkan di sekitar webview. Nilai standarnya benar. Jika Anda menggunakan tampilan Anda sendiri untuk membungkus perpustakaan ini, atur nilai ini menjadi false.

• styleWithCSS ketika atribut gaya tag dimodifikasi. Jika tidak, tag khusus dibuat. Nilai defaultnya salah

• initialHeight Usecontainer false dengan tampilan inline dari ketinggian awal

• pasteAsPlainText nilai boolean (false sebagai default) yang menentukan apakah pasta clipboard akan mempertahankan formatnya atau akan dilakukan sebagai teks biasa

• useCharacter Pilihan untuk menonaktifkan karakter Cina memungkinkan Anda mendukung karakter bahasa Inggris tanpa kesalahan pada Android. Setel ke true secara default untuk kompatibilitas mundur.

• defaultHttps nilai boolean (benar sebagai default) yang ada di persiapan https: // ke awal tautan

• onPaste pasta clipboard callback onpaste

• Acara Keyup Panggilan Balik onKeyUp (Android 229 Bug)

• Acara Keydown Panggilan Back onKeyDown (Android 229 Bug)

• Nilai input panggilan balik onInput

• tautan panggilan balik onLink klik

• onFocus Callback Editor Focus

• onBlur Callback Editor Blur

• Callback onCursorPosition Masukkan posisi kursor this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

RichEditor juga memiliki metode yang dapat digunakan pada ref untuk mengatur:

• setContentHTML(html: string)
• insertImage(url: string, style?: string)
• insertLink(title: string, url: string)
• insertText(text: string)
• insertHTML(html: string)
• insertVideo(url: string, style?: string)
• setContentFocusHandler(handler: Function)
• blurContentEditor()
• focusContentEditor()

Metode ini mendaftarkan fungsi yang akan dipanggil ketika perubahan posisi kursor atau perubahan dilakukan pada gaya editor pada posisi kursor., Callback akan dipanggil dengan serangkaian actions yang aktif pada posisi cusor, memungkinkan bilah alat untuk menanggapi perubahan.

• registerToolbar(listener: Function)

Contoh Penggunaan:

 < RichEditor
  ref = { ( r ) => this . richtext = r }
  initialContentHTML = { 'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>' }
  editorInitializedCallback = { ( ) => this . onEditorInitialized ( ) }
/>

Menggunakan font khusus

Untuk menggunakan font khusus, Anda perlu menggunakan initialCSSText dari editorStyle Prop.

1. Unggah file font Anda ke https://transfonter.org dan periksa opsi 'base64'. Saat Anda mengunduh file zip, akan ada file stylesheet.css di sana.
2. Ambil file stylesheet.css Anda dan buat file stylesheet.js .
3. Buat ekspor dan tempel isi file CSS di sana. misalnya:

 const FontFamilyStylesheet = `
@font-face {
    font-family: 'Your Font Family';
    src: url('data:font/ttf;charset=utf-8;base64,...............'); // You can also use a web url here
    font-weight: normal;
}
` ;

export default FontFamilyStylesheet ;

4. Di mana Anda telah memasukkan komponen RichEditor Anda, impor file dan gunakan.

 import FontFamilyStylesheet from 'stylesheet.js' ;

const fontFamily = 'Your_Font_Family' ;
const initialCSSText = { initialCSSText : ` ${ FontFamilyStylesheet } ` , contentCSSText : `font-family: ${ fontFamily } ` }
< RichEditor editorStyle = { initialCSSText } / >

5. Muat Ulang Aplikasi. Anda sekarang harus melihat konten editor kaya Anda di wajah font khusus Anda!

Untuk info lebih lanjut tentang cara kerja initialCSSText , lihat PR di sini. Juga, kredit untuk komentar masalah ini dan garpu yang menjelaskan cara menggunakan file font yang dikodekan base64.

RichToolbar

Ini adalah komponen yang menyediakan bilah alat untuk dengan mudah mengendalikan editor. Ini dirancang untuk digunakan bersama dengan komponen RichEditor .

RichToolbar memiliki satu properti yang diperlukan:

• getEditor()

Yang harus menyediakan fungsi yang mengembalikan ref ke komponen RichEditor .

Ini karena ref tidak dibuat sampai setelah render pertama, sebelum bilah alat yang diberikan. Ini berarti bahwa setiap ref yang disahkan secara langsung pasti akan disahkan sebagai undefined .

Alat peraga lain yang didukung oleh komponen RichToolbar adalah:

• actions

  array actions yang disediakan oleh bilah alat ini. Tindakan defaultnya adalah:

  • actions.insertImage
  • actions.setBold
  • actions.setItalic
  • actions.insertBulletsList
  • actions.insertOrderedList
  • actions.insertLink
  • actions.keyboard
  • actions.setStrikethrough
  • actions.setUnderline
  • actions.removeFormat
  • actions.insertVideo
  • actions.checkboxList
  • actions.undo
  • actions.redo

• Fungsi onPressAddImage Disebut ketika tindakan addImage disadap.

• Logika onInsertLink untuk apa yang terjadi ketika Anda menekan tombol Tambah Tautan Sisipkan

• disabled

• Nilai boolean untuk menonaktifkan editor. Nilai defaultnya false .

• iconTint

• unselectedButtonStyle

• selectedIconTint

• selectedButtonStyle

• disabledIconTint

• disabledButtonStyle

  Ini memberikan opsi untuk tombol aksi gaya.

• iconSize

  Mendefinisikan ukuran ikon dalam piksel. Default adalah 50.

• renderAction

  Altenatif, Anda dapat memberikan fungsi render yang akan digunakan sebagai pengganti default, sehingga Anda dapat sepenuhnya mengontrol desain Tollbar.

• iconMap

  RichTextToolbar hadir dengan ikon default untuk tindakan default yang ditimbulkannya. Untuk mengesampingkan itu, atau menambahkan ikon untuk tindakan non-default, menyediakannya dalam kamus untuk prop ini.

Contoh Penggunaan:

 const richText = React . createRef ( ) || useRef ( ) ;
< RichToolbar editor = { that . richText } /> 

Dengan tindakan khusus:

Untuk menentukan tindakan kustom Anda sendiri:

• Kirim nama tindakan Anda sebagai string di array actions .
• Sertakan ikon untuk itu dengan iconMap
• Tambahkan fungsi prop dengan nama tindakan yang sama untuk dipanggil pada tap

 < RichToolbar
    editor = { that . richText }
	actions = { [
		actions . setBold ,
		actions . setItalic ,
		actions . insertBulletsList ,
		actions . insertOrderedList ,
		actions . insertImage ,
		'customAction' ,
	] }
	iconMap = { {
		customAction : customIcon ,
	} }
	customAction = { this . handleCustomAction }
/> 

Contoh lengkap menggunakan komponen fungsional

 import React from "react" ;
import { Text , Platform , KeyboardAvoidingView , SafeAreaView , ScrollView } from "react-native" ;
import { actions , RichEditor , RichToolbar } from "react-native-pell-rich-editor" ;


const handleHead = ( { tintColor } ) => < Text style = { { color : tintColor } } > H1 </ Text >
const TempScreen = ( ) => {
	const richText = React . useRef ( ) ;
	return (
    < SafeAreaView >
      < ScrollView >
        < KeyboardAvoidingView behavior = { Platform . OS === "ios" ? "padding" : "height" }	style = { { flex : 1 } } >
          < Text > Description: </ Text >
          < RichEditor
              ref = { richText }
              onChange = { descriptionText => {
                  console . log ( "descriptionText:" , descriptionText ) ;
              } }
          />
        </ KeyboardAvoidingView >
      </ ScrollView >

      < RichToolbar
        editor = { richText }
        actions = { [ actions . setBold , actions . setItalic , actions . setUnderline , actions . heading1 ] }
        iconMap = { { [ actions . heading1 ] : handleHead } }
      />
    </ SafeAreaView >
  ) ;
} ;

export default TempScreen ;

---

Terima kasih banyak atas dukungan dari JetBrains