elm rte toolkit

Rich Text Editor Toolkit

Erstellen Sie reichhaltige Texteditoren in ELM.

Rich Texed Editor Toolkit ist ein Open -Source -Projekt, mit dem Cross -Plattform -Editoren im Web hergestellt werden. Dieses Paket behandelt zufriedenbar als E/A -Gerät und verwendet Browser -Ereignisse und Mutationsbeobachter, um Änderungen zu erkennen und sich selbst zu aktualisieren. Das Modell des Editors wird durch eine programmierbare Spezifikation definiert und validiert, mit der Sie einen benutzerdefinierten, maßgeschneiderten Editor erstellen können, der Ihren Anforderungen entspricht.

Dieses Paket wurde stark von anderen Rich Texteditor -Frameworks wie Prosemirror, Trix und DraftJs inspiriert.

Ressourcen

• ELM-Paket: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
• Demo-Seite: https://mweiss.github.io/elm-rte-toolkit (Quellcode befindet sich im Demo-Verzeichnis)
• Wiki: https://github.com/mweiss/elm-rte-toolkit/wiki

Erste Schritte

Dieses Paket erfordert einige Webcomponenten, um loszulegen.

Wenn Sie ES6 unterstützen können, können Sie JS/Elmeditor.js in Ihr Projekt einbeziehen und zusammen mit Ihrem bevorzugten Webcomponent -Polyfill importieren.

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

Die Demo in diesem Repository macht es so.

Wenn Sie jedoch einen Bundler und eine Polyfill verwenden möchten, können Sie Ihr Lieblings -Polyfill importieren und das NPM -Paket importieren, das das JS dieses Repositorys mit ES5 mit NPM, z. B. zusammengestellt hat, zusammengestellt wird:

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

Und in Ihrem JavaScript können Sie es so importieren:

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

CSS starten

Sie können alle gewünschten Stile für den Editor verwenden. Möglicherweise möchten Sie Folgendes als Ausgangspunkt verwenden. Am wichtigsten ist, dass Sie wahrscheinlich white-space: pre-wrap; Unterscheidung zwischen mehreren Räumen:

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

Beitragen

Dieses Paket ist eine Open-Source-Software, die unter den Bedingungen einer BSD-3-Klausel-Lizenz frei verteilt ist. Der Quellcode wird auf GitHub gehostet.

Beiträge in Form von Fehlerberichten, Zuganfragen oder nachdenklichen Diskussionen im GitHub -Issue -Tracker sind willkommen. Bitte beachten Sie den Verhaltenskodex für unser Versprechen an die Mitwirkenden.

Die Demo laufen

Die Demo wurde mit Create-ELM-App gestapft. In diesem Repository finden Sie Anweisungen zur Installation des elm-app Befehls.

Um die Demo lokal zu debuggen, führen Sie Folgendes aus dem Stammverzeichnis des Repositorys aus:

 cd demo
elm-app start

Führen Sie zum Erstellen der Demo Folgendes aus dem Stammverzeichnis des Repositorys aus:

 cd demo
./build.sh

Die Demo wird mit GH-Seiten gehostet. Um die Demo zu aktualisieren, aktualisieren Sie die GH-Pages-Filiale mit dem neuesten Build.

Auslauftests

Für den Moment, dass ich aufgrund mysteriöser Paketprobleme mit Elm-Test nicht debuggen möchte, befinden sich die Tests für das Paket im Demo-App-Ordner. Tests ausführen:

 cd demo
elm-test