elm rte toolkit

Напротив инструментов текстового редактора

Создайте богатые текстовые редакторы в ELM.

Rich Text Editor Toolkit - это проект с открытым исходным кодом для создания кросс -платформных редакторов в Интернете. Этот пакет относится к довольным в качестве устройства ввода -вывода и использует события браузера и наблюдателей -мутаций для обнаружения изменений и самого обновления. Модель редактора определяется и проверена программируемой спецификацией, которая позволяет создавать специально адаптированный редактор, который соответствует вашим потребностям.

Этот пакет был сильно вдохновлен другими богатым текстовым редактором, такими как Prosemirror, Trix и DraftJs.

Ресурсы

• Пакет ELM: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
• Демо-страница: https://mweiss.github.io/elm-rte-toolkit (исходный код находится в демонстрационном каталоге)
• Вики: https://github.com/mweiss/elm-rte-toolkit/wiki

Начиная

Этот пакет требует, чтобы некоторые веб -компоненты начали.

Если вы можете поддержать ES6, вы можете включить js/elmeditor.js в свой проект и импортировать его вместе с вашим любимым полифиллом WebComponent.

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

Демонстрация в этом репозитории делает это таким образом.

Однако, если вы хотите использовать пучок и полифилл, вы можете импортировать свой любимый полифилл и импортировать пакет NPM, в котором JS скомпилирован в этом репозитории с 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-CLAUSE. Исходный код размещен на GitHub.

Взносы в виде отчетов об ошибках, запросов на вытягивание или вдумчивые дискуссии в трекере выпуска GitHub приветствуются. Пожалуйста, смотрите Кодекс поведения для нашего обещания для участников.

Запуск демонстрации

Демонстрация была загружена с Create-Elm-App. Посмотрите этот репозиторий для инструкций о том, как установить команду elm-app .

Чтобы отлаживать демо -версию локально, запустите следующее из корневого каталога хранилища:

 cd demo
elm-app start

Чтобы построить демонстрацию, запустите следующее из корневого каталога хранилища:

 cd demo
./build.sh

Демонстрация размещена с GH-страницами, поэтому для обновления демонстрации, пожалуйста, обновите филиал GH-Pages с последней сборкой.

Заводящие тесты

На данный момент, из-за таинственных проблем с пакетом с тестированием ELM, которые я не хочу отладить, тесты на пакет находятся в папке Demo App. Чтобы запустить тесты:

 cd demo
elm-test