tiny editor

minúsculo editor

Um pequeno editor de texto rico em HTML escrito em Javascript de baunilha

Meta

Crie uma biblioteca menos de 5 KB (compactada) que permita que um elemento HTML seja usado como um editor de texto rico em JavaScript de baunilha antigo.

Apoiar

Se você usa e gosta desta biblioteca, sinta -se à vontade para apoiar meus projetos de código aberto.

Como instalar

 npm install tiny-editor

ou carregue o arquivo de pacote diretamente no final do seu documento HTML.

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

Como usar

1. Reference a biblioteca do editor em seu documento HTML
2. Adicione um atributo de data-tiny-editor ao elemento HTML que você deseja transformar em um editor

Como criar dinamicamente um editor

Use a window.__tinyEditor.transformToEditor() que toma como primeiro argumento o elemento DOM (geralmente a <div> ) que você deseja transformar em um editor. Consulte o /public/index.html para um exemplo.

Como extrair o texto formatado

Ouça o evento input no elemento HTML do editor.

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

Como personalizar

Existem várias opções que podem ser usadas para personalizar como o editor minúsculo será renderizado. Por padrão, todas as opções estão ativadas. Você pode desativar uma opção usando atributos de dados.

Por exemplo, você pode remover o botão de formato em negrito usando o seguinte atributo:

 <div data-tiny-editor data-bold="no"></div>

Opções

• data-formatblock="no" : remova os estilos que suspensa
• data-bold="no" : Remova o botão em negrito
• data-italic="no" :: Remova o botão de itálico
• data-underline="no" : Remova o botão sublinhado
• data-fontname="no" : Remova a lista suspensa da fonte
• data-forecolor="no" :: Remova o botão de cor do texto
• data-justifyleft="no" : Remova o botão de alinhamento esquerdo
• data-justifycenter="no" : Remova o botão de alinhamento central
• data-justifyright="no" : Remova o botão de alinhamento certo
• data-insertorderedlist="no" : remova o botão Numerado
• data-insertunorderedlist="no" : Remova o botão Lista com marcadores
• data-outdent="no" : remova o botão de diminuição do recuo
• data-indent="no" : remova o botão de aumento do recuo
• data-remove-format="no" : Remova o botão de formatação limpa
• data-autofocus="no" : remova o foco automático do editor

Navegadores suportados

O navegador moderno (Chrome, Firefox, Edge, ...) é suportado. O Tiny Editor não funciona no Internet Explorer.