elm rte toolkit

Kit de herramientas de editor de texto enriquecido

Crear editores de texto ricos en ELM.

Rich Text Editor Toolkit es un proyecto de código abierto para hacer editores de plataforma cruzada en la web. Este paquete trata el contento como un dispositivo de E/S y utiliza eventos de navegador y observadores de mutaciones para detectar cambios y actualizarse. El modelo del editor está definido y validado por una especificación programable que le permite crear un editor personalizado personalizado que se adapte a sus necesidades.

Este paquete se inspiró fuertemente en otros marcos de editores de texto ricos como Prosemirror, Trix y DraftJS.

Recursos

• Paquete ELM: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
• Página de demostración: https://mweiss.github.io/elm-rte-toolkit (el código fuente está en el directorio de demostración)
• Wiki: https://github.com/mweiss/elm-rte-toolkit/wiki

Empezando

Este paquete requiere algunos componentes web para comenzar.

Si puede admitir ES6, puede incluir JS/ElMeditor.js en su proyecto e importarlo junto con su componente web favorito.

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

La demostración en este repositorio lo hace de esa manera.

Sin embargo, si desea utilizar un Bundler y Polyfill, puede importar su polyfill favorito e importar el paquete NPM que tiene el JS de este repositorio compilado a ES5 con NPM, por ejemplo:

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

Y en su JavaScript, puede importarlo así:

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

CSS inicial

Puede usar los estilos que desee para el editor, pero es posible que desee usar lo siguiente como punto de salida. Lo más importante es que probablemente querrás white-space: pre-wrap; Para distinguir entre múltiples espacios:

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

Que contribuye

Este paquete es un software de código abierto, distribuible libremente bajo los términos de una licencia de cláusula BSD-3. El código fuente está alojado en GitHub.

Las contribuciones en forma de informes de errores, solicitudes de extracción o discusiones reflexivas en el rastreador de problemas de GitHub son bienvenidas. Consulte el código de conducta para nuestro compromiso a los contribuyentes.

Ejecutando la demostración

La demostración fue arrancada con Create-Elm-App. Consulte ese repositorio de instrucciones de cómo instalar el comando elm-app .

Para depurar la demostración localmente, ejecute lo siguiente desde el directorio raíz del repositorio:

 cd demo
elm-app start

Para construir la demostración, ejecute lo siguiente desde el directorio raíz del repositorio:

 cd demo
./build.sh

La demostración está alojada con las páginas de GH, por lo que para actualizar la demostración, actualice la rama de las páginas GH con la última compilación.

Pruebas de ejecución

Por ahora, debido a los misteriosos problemas del paquete con ELM-Test, no quiero depurar, las pruebas para el paquete están en la carpeta de aplicaciones de demostración. Para ejecutar pruebas:

 cd demo
elm-test