tiny editor

pequeño editor

Un pequeño editor de texto rico en HTML escrito en Vanilla JavaScript

Meta

Cree una biblioteca de menos de 5 kb (comprimida) que permita que un elemento HTML se use como un editor de texto enriquecido en Old Old Vanilla JavaScript.

Apoyo

Si usa y le gusta esta biblioteca, no dude en apoyar mis proyectos de código abierto.

Cómo instalar

 npm install tiny-editor

o cargue el archivo del paquete directamente al final de su documento HTML.

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

Cómo usar

1. Referencia a la biblioteca del editor en su documento HTML
2. Agregue un atributo data-tiny-editor al elemento HTML que desea transformar en un editor

Cómo crear dinámicamente un editor

Use la window.__tinyEditor.transformToEditor() que toma como el primer argumento el elemento DOM (generalmente un <div> ) que desea transformar en un editor. Consulte /public/index.html para obtener un ejemplo.

Cómo extraer el texto formateado

Escuche el evento input en el elemento HTML Editor.

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

Cómo personalizar

Hay varias opciones que se pueden usar para personalizar cómo se representará el pequeño editor. Por defecto, todas las opciones están habilitadas. Puede deshabilitar una opción utilizando los atributos de datos.

Por ejemplo, puede eliminar el botón Formato Bold usando el siguiente atributo:

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

Opción

• data-formatblock="no" : elimine la lista de desplazamiento de los estilos
• data-bold="no" : elimine el botón en negrita
• data-italic="no" :: eliminar el botón cursiva
• data-underline="no" : eliminar el botón subrayar
• data-fontname="no" : elimine la lista desplegable de fuentes
• data-forecolor="no" :: Eliminar el botón Color de texto
• data-justifyleft="no" : elimine el botón de alineación de la izquierda
• data-justifycenter="no" : elimine el botón de alinear central
• data-justifyright="no" : elimine el botón de alineación correcta
• data-insertorderedlist="no" : eliminar el botón de lista numerado
• data-insertunorderedlist="no" : elimine el botón de lista bala
• data-outdent="no" : eliminar el botón de sangría de disminución
• data-indent="no" : eliminar el botón de inicio de aumento
• data-remove-format="no" : elimine el botón de formato de borde de borde
• data-autofocus="no" : eliminar el enfoque automático del editor

Navegadores compatibles

Se admiten el navegador moderno (Chrome, Firefox, Edge, ...). Tiny Editor no funciona en Internet Explorer.