elm rte toolkit下載 - elm rte toolkit包源代碼下載

elm rte toolkit

其他資源

1.0.0

下載

豐富的文本編輯器工具包

用榆樹創建豐富的文本編輯器。

Rich Text Editor Toolkit是一個開源項目，可以在網絡上製作跨平台編輯器。該軟件包將可滿足的設備視為I/O設備，並使用瀏覽器事件和突變觀察者來檢測更改並自我更新。編輯器的模型由可編程規範定義和驗證，該規範允許您創建適合您需求的自定義量身定制的編輯器。

該軟件包的靈感來自其他豐富的文本編輯框架，例如Prosemirror，Trix和DraftJs。

資源

ELM軟件包：https：//package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
演示頁面：https：//mweiss.github.io/elm-rte-toolkit（源代碼在演示目錄中）
Wiki：https：//github.com/mweiss/elm-rte-toolkit/wiki

入門

該軟件包需要一些Web組件才能開始。

如果您可以支持ES6，則可以在項目中包含JS/Elmeditor.js，並將其與您喜歡的WebComponent Polyfill一起導入。

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

此存儲庫中的演示是這樣做的。

但是，如果您想使用Bundler和Polyfill，則可以導入您喜歡的Polyfill並導入將此存儲庫的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' ;

開始CSS

您可以為編輯器使用所需的任何樣式，但是您可能需要將以下樣式用作跳躍點。最重要的是，您可能需要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;
}