react native zss rich text editor

Bereaksi Editor Teks Kaya Asli

Editor teks kaya yang berfungsi penuh untuk Android dan iOS, berdasarkan proyek ZssrichTextEditor.

Instalasi

 npm i --save react-native-zss-rich-text-editor

Di Android, tambahkan yang berikut ini ke akhir android/app/build.gradle Anda

project . afterEvaluate {
    apply from : ' ../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle ' ;
    copyEditorHtmlToAppAssets(file( ' ../../node_modules/react-native-zss-rich-text-editor ' ))
}

Juga, ikuti instruksi di sini untuk menambahkan ketergantungan asli react-native-webview-bridge-updated .

Penggunaan

react-native-zss-rich-text-editor mengekspor dua komponen dan satu kamus const:

RichTextEditor

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

RichTextEditor mengambil alat peraga opsional berikut:

• initialTitleHTML

  HTML yang akan diterjemahkan di bagian judul segera setelah komponen memuat.

• initialContentHTML

  HTML yang akan diterjemahkan di bagian konten tentang beban.

• titlePlaceholder

  Teks yang akan digunakan sebagai placeholder ketika tidak ada teks yang ada di bagian judul.

• contentPlaceholder

  Teks yang akan digunakan sebagai placeholder ketika tidak ada teks yang ada di bagian konten.

• customCSS

  Setiap gaya CSS khusus yang ingin Anda suntikkan ke editor.

• editorInitializedCallback

  Fungsi yang akan dipanggil ketika editor telah diinisialisasi.

RichTextEditor juga memiliki metode yang dapat digunakan pada ref untuk mengatur gaya pada pilihan saat ini atau posisi kursor:

• setBold()
• setItalic()
• setUnderline()
• heading1()
• heading2()
• heading3()
• heading4()
• heading5()
• heading6()
• setParagraph()
• removeFormat()
• alignLeft()
• alignCenter()
• alignRight()
• alignFull()
• insertBulletsList()
• insertOrderedList()
• insertLink(url, title)
• updateLink(url, title)
• insertImage(attributes)
• setSubscript()
• setSuperscript()
• setStrikethrough()
• setHR()
• setIndent()
• setOutdent()
• setBackgroundColor(color)
• setTextColor(color)

Metode ini menunjukkan dialog untuk mengatur judul tautan dan URL, yang akan dimasukkan di lokasi kursor saat ini.

• showLinkDialog(optionalTitle = '', optionalUrl = '')

Untuk menyesuaikan konten, placeholder atau CSS, gunakan metode ini

• setTitlePlaceholder(placeholder)
• setContentPlaceholder(placeholder)
• setCustomCSS(css)
• setTitleHTML(html)
• setContentHTML(html)

Metode -metode ini digunakan saat menambahkan konten seperti gambar atau tautan yang akan intervere dengan posisi kursor. prepareInsert Menyimpan pilihan saat ini, dan restoreSelection akan menggantikannya setelah penyisipan selesai. Ini disebut secara implisit dengan insertImage dan insertLink sehingga mereka mungkin tidak boleh dipanggil secara langsung.

• prepareInsert()
• restoreSelection()

Untuk mendapatkan konten atau judul html, gunakan metode asinkron ini.

• async getTitleHtml()
• async getTitleText()
• async getContentHtml()
• async getSelectedText()

Untuk memfokuskan atau mengaburkan bagian, gunakan metode ini

• focusTitle()
• focusContent()
• blurTitleEditor()
• blurContentEditor()

Untuk mengetahui kapan judul atau konten fokus, gunakan metode berikut.

• setTitleFocusHandler(callbackHandler)
• setContentFocusHandler(callbackHandler)

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

• registerToolbar(listener)

Contoh Penggunaan:

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

RichTextToolbar

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

RichTextToolbar memiliki satu properti yang diperlukan:

• getEditor()

Yang harus menyediakan fungsi yang mengembalikan ref ke komponen RichTextEditor .

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 RichTextToolbar 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

• onPressAddLink

• onPressAddImage

  Fungsi dipanggil ketika tindakan addLink atau addImage disadap.

• selectedButtonStyle

• iconTint

• selectedIconTint

• unselectedButtonStyle

  Ini memberikan opsi untuk tombol aksi gaya.

• 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:

 < RichTextToolbar
	getEditor = { ( ) => this . richtext }
/> 

actions

Ini adalah seperangkat const dari semua tindakan yang didukung. Ini akan diteruskan dalam array ke semua panggilan balik yang terdaftar dengan editor menggunakan metode registerToolbar() .

 {
	setTitleHtml: 'SET_TITLE_HTML',
  	setContentHtml: 'SET_CONTENT_HTML',
  	getTitleHtml: 'GET_TITLE_HTML',
  	getTitleText: 'GET_TITLE_TEXT',
 	getContentHtml: 'GET_CONTENT_HTML',
  	getSelectedText: 'GET_SELECTED_TEXT',
  	blurTitleEditor: 'BLUR_TITLE_EDITOR',
  	blurContentEditor: 'BLUR_CONTENT_EDITOR',
  	focusTitle: 'FOCUS_TITLE',
  	focusContent: 'FOCUS_CONTENT',
	
  	setBold: 'bold',
  	setItalic: 'italic',
  	setUnderline: 'underline',
  	heading1: 'h1',
  	heading2: 'h2',
  	heading3: 'h3',
  	heading4: 'h4',
  	heading5: 'h5',
  	heading6: 'h6',
  	setParagraph: 'SET_PARAGRAPH',
  	removeFormat: 'REMOVE_FORMAT',
  	alignLeft: 'justifyLeft',
  	alignCenter: 'justifyCenter',
  	alignRight: 'justifyRight',
  	alignFull: 'justifyFull',
  	insertBulletsList: 'unorderedList',
  	insertOrderedList: 'orderedList',
  	insertLink: 'INST_LINK',
  	updateLink: 'UPDATE_LINK',
  	insertImage: 'INST_IMAGE',
  	setSubscript: 'subscript',
  	setSuperscript: 'superscript',
  	setStrikethrough: 'strikeThrough',
  	setHR: 'horizontalRule',
  	setIndent: 'indent',
  	setOutdent: 'outdent',
  	setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
  	setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
  	setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
  	setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
  	prepareInsert: 'PREPARE_INSERT',
  	restoreSelection: 'RESTORE_SELECTION',
  	setCustomCSS: 'SET_CUSTOM_CSS',
  	setTextColor: 'SET_TEXT_COLOR',
  	setBackgroundColor: 'SET_BACKGROUND_COLOR',
}

Atribusi

react-native-zss-rich-text-editor adalah pembungkus di sekitar proyek ZssrichTextEditor yang menakjubkan. Ini juga berkomunikasi dengan editor menggunakan (garpu kecil) dari proyek Bridge-Bridge-Webview-Bridge yang mengagumkan.