rich text editor

Peringatan Breaking Change yang akan datang

Pada 18.10. Kami akan merilis versi utama baru (V8) dari Editor Teks Kaya, yang merupakan tulisan ulang basis kode lama. Peringatan ini tidak penting bagi pengguna paket NPM menggunakan versi, tetapi pengguna bundel UNPKG (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) akan melihat bahwa bundel kode terbaru tidak akan berfungsi seperti yang diharapkan lagi. Untuk menghindari perubahan dalam sistem Anda, Anda dapat mengatur versi paket UNPKG secara eksplisit ke versi stabil terakhir dari V7 sebagai berikut: http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js

Ini akan memberi Anda waktu untuk mengembangkan sistem Anda untuk mengakomodasi versi baru setelah dirilis.

Abitti.net

Penggunaan Kebijakan Merek Dagang Abitti

Editor Teks Kaya dengan Dukungan Matematika untuk Dewan Pemeriksaan Matrikulasi Finlandia. Demo langsung dapat ditemukan di https://math-demo.abitti.fi/

Karena v4.0.0, hanya kode ES2017 dengan modul ES disediakan (di direktori dist ). Jika Anda ingin menggunakan pustaka ini, bundler seperti webpack atau rollup mungkin diperlukan.

Penggunaan

Penggunaan dengan NPM

Instal Paket dengan npm install rich-text-editor . Editor teks kaya dapat digunakan sebagai

• Komponen React import RichTextEditor from 'rich-text-editor'
• atau sebagai fungsi dalam aplikasi yang tidak menggunakan react import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

Sebagian besar properti yang diteruskan ke fungsi komponen atau inisialisasi dijelaskan di bawah ini. Info lebih lanjut dapat ditemukan dalam jenis dan/atau kode sumber.

Penggunaan sebagai bundel CDN

Tambahkan tag skrip ke halaman html Anda yang sumbernya https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , misalnya <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> .

Ini akan menambahkan makeRichText ke Window, yang dapat digunakan untuk menginisialisasi editor.

Fungsi mengambil parameter berikut sebagai objek:

Kunci	Bawaan
wadah	Document.getElementById ('Rich-Text-Editor-Root'))
bahasa	'Fi'
baseurl	''
diizinkanfiletypes	['Image/png', 'Image/jpeg']
Onvaluechange	() => {}
TextAreArprops	{}

Contoh:

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextAreAprops diteruskan ke elemen div yang mendasari yang merupakan elemen editor yang terlihat, berikut adalah yang relevan untuk konfigurasi pengguna CDN:

Kunci	jenis	Tujuan
ariainvalid	Boolean	Tambahkan aria-valid
Arialabelledby	rangkaian	Tambahkan aria berlabel
EditorStyle	React.cssproperties	Properti CSS Langsung ke Elemen Editor
ClassName	rangkaian	Nama kelas tambahan ke elemen editor
pengenal	rangkaian	ID-Field ke Elemen Editor
Lang	rangkaian	Lang-Field to the Editor-Element for Accessibility

Tujuan (baca ini sebelum mengirimkan)

Editor Teks Kaya telah dikembangkan untuk memungkinkan kandidat pemeriksaan matrikulasi Finlandia untuk melampirkan tangkapan layar dan menulis persamaan sebagai bagian dari pengiriman mereka. Tujuan kami bukan untuk membuat penggantian drop-in tujuan umum untuk TextArea tetapi editor yang bekerja di Abitti dan browser tertanamnya.

Sementara kami merayakan setiap laporan bug, permintaan fitur dan permintaan tarik, kami dengan ramah meminta Anda untuk mengingat berikut:

• Sebagian besar masalah yang terkait dengan memasukkan formula dan rendering lateks disebabkan oleh perpustakaan Mathjax dan Mathquill. Kami tidak memiliki sumber daya untuk menulis permintaan tarik berdasarkan masalah yang diajukan kepada kami. Untuk alasan yang sama kami tidak akan meneruskan masalah hulu yang dilaporkan kepada kami.
• Kami tidak memperhatikan masalah atau menarik permintaan yang berada di luar misi kami - Abitti.

Kami harap Anda memahami keinginan kami untuk fokus pada tujuan kami yang ditentukan oleh hukum.

Dependensi

• Mathquill (https://github.com/digabi/mathquill)
• Mathjax-node
• JQuery
• Sanitasi-html

Memulai

1. Instal Node.js
2. Jalankan npm install .
3. Jalankan npm run dev .
4. Tes browser: http: // localhost: 5111/test/tests.html
5. Pengujian Manual: http: // localhost: 5111/test.html? Grep = manual

Menguji bundel secara lokal

1. Jalankan npm run build
2. Jalankan npm run dev-server
3. Jalankan server http sederhana di root proyek, misalnya python3 -m http.server 8080
4. Edit dev/index.html Tag skrip untuk menunjuk ke bundel: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (jangan berkomitmen ini).
5. Pergi ke http: // localhost: 8080/dev/index.html

Contoh Penggunaan Langsung

Demo: http://digabi.github.io/rich-text-editor/

Sumber: https://github.com/digabi/rich-text-editor/blob/master/index.html

Lisensi

https://opensource.org/licenses/mit