elm rte toolkit
1.0.0
エルムで豊富なテキストエディターを作成します。
Rich Text Editor Toolkitは、Web上のクロスプラットフォームエディターを作成するためのオープンソースプロジェクトです。このパッケージは、ContentedableをI/Oデバイスとして扱い、ブラウザイベントと突然変異オブザーバーを使用して変更を検出し、自体を更新します。編集者のモデルは、ニーズに合ったカスタマイズされたテーラードエディターを作成できるプログラム可能な仕様によって定義および検証されます。
このパッケージは、Prosemirror、Trix、DraftJSなどの他の豊富なテキストエディターフレームワークに大きく触発されました。
このパッケージでは、開始するにはいくつかのウェブコンポーネントが必要です。
ES6をサポートできる場合は、プロジェクトにJS/Elmeditor.jsを含めて、お気に入りのWebComponent PolyFillとともにインポートできます。
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import 'elmEditor.js'このリポジトリのデモはそのようにします。
ただし、バンドラーとポリフィルを使用する場合は、お気に入りのポリフィルをインポートし、このリポジトリのJSがNPMでES5にコンパイルされたNPMパッケージをインポートできます。
npm install --save @webcomponents/webcomponentsjs
npm install --save elm-rte-toolkitそして、あなたのJavaScriptでは、そうするようにインポートすることができます：
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
import 'elm-rte-toolkit' ;編集者に必要なスタイルを使用することはできますが、以下をオフポイントのジャンプとして使用することをお勧めします。最も重要なことは、おそらくwhite-space: pre-wrap;複数のスペースを区別するには：
. 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;
}このパッケージは、BSD-3-Clauseライセンスの条件の下で自由に配布できるオープンソースソフトウェアです。ソースコードはGitHubでホストされています。
GitHub Issueトラッカーでのバグレポート、プルリクエスト、または思慮深い議論の形での貢献は大歓迎です。貢献者への誓約の行動規範をご覧ください。
デモは、create-elm-appでブートストラップされました。 elm-appコマンドのインストール方法の指示については、そのリポジトリを参照してください。
デモをローカルにデバッグするには、リポジトリのルートディレクトリから以下を実行します。
cd demo
elm-app startデモを構築するには、リポジトリのルートディレクトリから以下を実行します。
cd demo
./build.shデモはGH-Pagesでホストされているため、デモを更新するには、最新のビルドでGH-Pagesブランチを更新してください。
今のところ、ELMテストに関する不思議なパッケージの問題のために、私はデバッグしたくありません。パッケージのテストはデモアプリフォルダーにあります。テストを実行するには：
cd demo
elm-test
