elm rte toolkit

Rich Text Editor Toolkit

Créez des éditeurs de texte riches dans Elm.

Rich Text Editor Toolkit est un projet open source pour fabriquer des éditeurs multiplateformes sur le Web. Ce package traite le contenu comme un appareil d'E / S et utilise des événements de navigateur et des observateurs de mutation pour détecter les modifications et se mettre à jour. Le modèle de l'éditeur est défini et validé par une spécification programmable qui vous permet de créer un éditeur sur mesure qui correspond à vos besoins.

Ce package a été fortement inspiré par d'autres frameworks d'éditeurs de texte riche comme Prosmirror, Trix et DraftJS.

Ressources

• Package Elm: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
• Page de démonstration: https://mweiss.github.io/elm-rte-toolkit (le code source est dans le répertoire de démonstration)
• Wiki: https://github.com/mweiss/elm-rte-toolkit/wiki

Commencer

Ce package nécessite des composants Web pour commencer.

Si vous pouvez prendre en charge ES6, vous pouvez inclure JS / Elmeditor.js dans votre projet et l'importer avec votre polyfill WebComponent préféré.

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

La démo de ce référentiel le fait de cette façon.

Cependant, si vous souhaitez utiliser un bundler et un polyfill, vous pouvez importer votre polyfill préféré et importer le package NPM qui a JS de ce référentiel compilé sur ES5 avec NPM, par exemple:

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

Et dans votre javascript, vous pouvez l'importer comme tel:

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

Démarrer CSS

Vous pouvez utiliser les styles que vous souhaitez pour l'éditeur, mais vous voudrez peut-être utiliser ce qui suit comme point de départ. Plus important encore, vous voudrez probablement white-space: pre-wrap; pour distinguer plusieurs espaces:

. 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;
}

Contributif

Ce package est un logiciel open-source, librement distribuable en vertu des termes d'une licence de clause BSD-3. Le code source est hébergé sur GitHub.

Les contributions sous forme de rapports de bogues, de demandes de traction ou de discussions réfléchies dans le tracker du numéro GitHub sont les bienvenues. Veuillez consulter le code de conduite de notre engagement aux contributeurs.

Exécuter la démo

La démo a été amorcée par Create-Elm-App. Voir ce référentiel pour des instructions sur la façon d'installer la commande elm-app .

Pour déboguer la démo localement, exécutez ce qui suit à partir du répertoire racine du référentiel:

 cd demo
elm-app start

Pour construire la démo, exécutez ce qui suit à partir du répertoire racine du référentiel:

 cd demo
./build.sh

La démo est hébergée avec GH-Pages, donc pour mettre à jour la démo, veuillez mettre à jour la branche GH-Pages avec la dernière version.

Tests en cours d'exécution

Pour l'instant, en raison de problèmes de forfait mystérieux avec ELM-Test que je ne veux pas déboguer, les tests pour le package sont dans le dossier de l'application de démonstration. Pour exécuter des tests:

 cd demo
elm-test