elm rte toolkit

Toolkit Editor Teks Kaya

Buat editor teks kaya di Elm.

Rich Text Editor Toolkit adalah proyek open source untuk membuat editor lintas platform di web. Paket ini memperlakukan yang dapat diedit sebagai perangkat I/O, dan menggunakan peristiwa browser dan pengamat mutasi untuk mendeteksi perubahan dan memperbarui dirinya sendiri. Model editor didefinisikan dan divalidasi oleh spesifikasi yang dapat diprogram yang memungkinkan Anda membuat editor yang disesuaikan dengan kebutuhan Anda.

Paket ini sangat terinspirasi oleh kerangka kerja editor teks kaya lainnya seperti Prosemirror, Trix, dan DraftJS.

Sumber daya

• Paket Elm: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
• Halaman demo: https://mweiss.github.io/elm-rte-toolkit (kode sumber ada di direktori demo)
• Wiki: https://github.com/mweiss/elm-rte-toolkit/wiki

Memulai

Paket ini membutuhkan beberapa komponen web untuk memulai.

Jika Anda dapat mendukung ES6, Anda dapat menyertakan JS/Elmeditor.js dalam proyek Anda dan mengimpornya bersama dengan webcomponent Polyfill favorit Anda.

 import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import 'elmEditor.js'

Demo dalam repositori ini melakukannya dengan cara itu.

Namun, jika Anda ingin menggunakan bundler dan polyfill, Anda dapat mengimpor Polyfill favorit Anda dan mengimpor paket NPM yang memiliki JS repositori ini dikompilasi ke ES5 dengan NPM, misalnya:

npm install --save @webcomponents/webcomponentsjs
npm install --save elm-rte-toolkit

Dan di JavaScript Anda, Anda dapat mengimpornya seperti itu:

 import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
import 'elm-rte-toolkit' ;

Memulai CSS

Anda dapat menggunakan gaya apa pun yang Anda inginkan untuk editor, tetapi Anda mungkin ingin menggunakan yang berikut sebagai titik lompat. Yang terpenting, Anda mungkin ingin white-space: pre-wrap; untuk membedakan antara beberapa ruang:

. rte-main {
    text-align : left;
    outline : none;
    user-select : text;
    -webkit-user-select : text;
    white-space : pre-wrap;
    word-wrap : break-word;
}

. rte-hide-caret {
    caret-color : transparent;
}

Berkontribusi

Paket ini adalah perangkat lunak open-source, didistribusikan secara bebas berdasarkan ketentuan lisensi BSD-3-Clause. Kode sumber di -host di GitHub.

Kontribusi dalam bentuk laporan bug, permintaan tarik, atau diskusi yang bijaksana dalam pelacak edisi GitHub dipersilakan. Silakan lihat kode etik untuk janji kami kepada kontributor.

Menjalankan demo

Demo itu bootstrap dengan Create-Els-App. Lihat repositori itu untuk instruksi cara menginstal perintah elm-app .

Untuk men -debug demo secara lokal, jalankan yang berikut dari direktori root repositori:

 cd demo
elm-app start

Untuk membangun demo, jalankan yang berikut dari direktori root repositori:

 cd demo
./build.sh

Demo ini di-host dengan halaman GH, jadi untuk memperbarui demo, harap perbarui cabang GH-halaman dengan build terbaru.

Menjalankan tes

Untuk saat ini, karena masalah paket misterius dengan tes elm saya tidak ingin men-debug, tes untuk paket ada di folder aplikasi demo. Untuk menjalankan tes:

 cd demo
elm-test