elm rte toolkit

丰富的文本编辑器工具包

用榆树创建丰富的文本编辑器。

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

贡献

该软件包是开源软件，可根据BSD-3-CAREASE许可的条款自由分发。源代码托管在GitHub上。

欢迎以错误报告，拉的请求或周到的讨论形式进行贡献。请参阅我们对贡献者的承诺的行为准则。

运行演示

该演示与Create-Elm-app进行了引导。有关如何安装elm-app命令的说明，请参见该存储库。

要在本地调试演示，请从存储库的根目录中运行以下内容：

 cd demo
elm-app start

要构建演示，请从存储库的根目录中运行以下内容：

 cd demo
./build.sh

该演示托管了GH-PAGES，因此要更新演示，请使用最新构建更新GH-PAGES分支。

运行测试

目前，由于我不想调试ELM测试的神秘包裹问题，该软件包的测试都在Demo App文件夹中。进行测试：

 cd demo
elm-test