Editor WYSIWYG básico en JavaScript puro-editor. js

Vista prévia

Descripción

Editor. js es un editor de HTML/texto WYSIWYG básico ligero creado usando JavaScript puro y CSS.

Características

• Desactive el formato
• Inserte el encabezado
• Cursiva
• Negrita
• Subrayar
• Tachado
• Lista desordenada
• Lista ordenada
• Insertar vídeo de YouTube
• Inserte Gfycat video
• Inserte la imagen
• Inserte la línea horizontal

Funcionamiento

Cargue la hoja de estilos Editor. min. CSS y Editor. min. js en el documento.

<link rel="stylesheet" href="css/editor.min.css">
<script src="js/editor.min.js"></script>

Cree el HTML para el editor WYSIWYG. Tenga en cuenta que el editor requiere un elemento contentEditable para que funcione.

<div id="editor">

<div id="tools">


<button title="Desactive el formato" id="clear">C</button>


<button title="Inserte el encabezado" id="heading">H</button>


<hr>


<button title="Cursiva" id="italics">I</button>


<button title="Negrita" id="bold">B</button>


<button title="Subrayar" id="underline">U</button>


<button title="Tachado" id="strikethrough">S</button>


<hr>


<button title="Lista desordenada" id="ul">ul</button>


<button title="Lista ordenada" id="ol">ol</button>


<hr>


<button title="Insert video" id="video">vid</button>


<button title="Inserte la imagen" id="image">img</button>


<button title="Insert Gfycat" id="gfy">gfy</button>


<hr>


<button title="Inserte la línea horizontal" id="hr">hr</button>

</div>

<div id="input" contenteditable="true"></div>
</div>