elm rte toolkit

Rich Text Editor Toolkit

Crie editores de texto ricos em Elm.

O Rich Text Editor Toolkit é um projeto de código aberto para fazer editores de plataforma cruzada na web. Este pacote trata o conteúdo do dispositivo de E/S e usa eventos do navegador e observadores de mutação para detectar alterações e se atualizar. O modelo do editor é definido e validado por uma especificação programável que permite criar um editor personalizado que atenda às suas necessidades.

Este pacote foi fortemente inspirado por outras estruturas de editor de texto ricas como Prosemirror, Trix e DraftJs.

Recursos

• ELM Package: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
• Página de demonstração: https://mweiss.github.io/elm-rte-toolkit (o código-fonte está no diretório de demonstração)
• Wiki: https://github.com/mweiss/elm-rte-toolkit/wiki

Começando

Este pacote exige que alguns WebComponents comecem.

Se você puder suportar o ES6, pode incluir JS/Elmeditor.js em seu projeto e importá -lo junto com o seu Polyfill favorito do WebComponent.

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

A demonstração neste repositório faz isso dessa maneira.

No entanto, se você deseja usar um empurrador e um poli -preto, pode importar seu poli -preenchimento favorito e importar o pacote NPM que possui o JS deste repositório compilado para ES5 com NPM, por exemplo:

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

E em seu JavaScript, você pode importar assim:

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

Iniciando CSS

Você pode usar os estilos que deseja para o editor, mas pode usar o seguinte como ponto de partida. Mais importante ainda, você provavelmente vai querer white-space: pre-wrap; Para distinguir entre vários espaços:

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

Contribuindo

Este pacote é um software de código aberto, distribuível gratuitamente nos termos de uma licença de cláusula BSD-3. O código -fonte está hospedado no GitHub.

As contribuições na forma de relatórios de bug, solicitações de puxar ou discussões atenciosas no rastreador de problemas do GitHub são bem -vindas. Consulte o Código de Conduta para nossa promessa para colaboradores.

Executando a demonstração

A demonstração foi inicializada com o Create-Elm-App. Veja o repositório para obter instruções de como instalar o comando elm-app .

Para depurar a demonstração localmente, execute o seguinte no diretório raiz do repositório:

 cd demo
elm-app start

Para construir a demonstração, execute o seguinte no diretório raiz do repositório:

 cd demo
./build.sh

A demonstração é hospedada com Pages GH; portanto, para atualizar a demonstração, atualize a filial de GH-Pages com a compilação mais recente.

Testes de execução

Por enquanto, devido a problemas misteriosos do pacote com o ELM-Test, não quero depurar, os testes para o pacote estão na pasta de aplicativos de demonstração. Para executar testes:

 cd demo
elm-test