Editor de texto enriquecido WYSIWYG minimalista-SlimWhizzy

Vista prévia

Descripción

SlimWhizzy es una librería JavaScript súper pequeña (menos de 1Kb) que hace uso de < a href = "https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" target = "_ blank" rel = "noopener" > execCommand () para crear un < a href mínimo y limpio = "https://wikicss.com/tag/WYSIWYG-editor/" > Editor de texto enriquecido WYSIWYG para un < a href = "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable" target = "_ blank" rel = "noopener" > Contenido editable elemento .

Funcionamiento

Utilice una fuente icónica de su elección para los iconos del editor.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Cree la barra de herramientas para el editor de texto enriquecido WYSIWYG.

<div class="toolbar">

<a href="#" data-command="bold" class="toolbar-button">



<i class="fa fa-bold"></i>

</a>

<a href="#" data-command="italic" class="toolbar-button">



<i class="fa fa-italic"></i>

</a>

<a href="#" data-command="underline" class="toolbar-button">



<i class="fa fa-underline"></i>

</a>

<a href="#" data-command="strikethrough" class="toolbar-button">



<i class="fa fa-strikethrough"></i>

</a>

<a href="#" data-command="justifyLeft" class="toolbar-button">



<i class="fa fa-align-left"></i>

</a>

<a href="#" data-command="justifyCenter" class="toolbar-button">



<i class="fa fa-align-center"></i>

</a>

<a href="#" data-command="justifyFull" class="toolbar-button">



<i class="fa fa-align-justify"></i>

</a>

<a href="#" data-command="justifyRight" class="toolbar-button">



<i class="fa fa-align-right"></i>

</a>

<a href="#" data-command="h1" class="toolbar-button">



<strong>H1</strong>

</a>

<a href="#" data-command="h2" class="toolbar-button">



<strong>H2</strong>

</a>

<a href="#" data-command="h3" class="toolbar-button">



<strong>H3</strong>

</a>

<a href="#" data-command="h4" class="toolbar-button">





<strong>H4</strong>



</a>

<a href="#" data-command="p" class="toolbar-button">





<i class="fa fa-paragraph"></i>

</a>

<a href="#" data-command="insertorderedlist" class="toolbar-button">



<i class="fa fa-list-ol"></i>

</a>

<a href="#" data-command="insertUnorderedList" class="toolbar-button">



<i class="fa fa-list-ul"></i>

</a>

<a href="#" data-command="createlink" class="toolbar-button">



<i class="fa fa-link"></i>

</a>

<a href="#" data-command="unlink" class="toolbar-button">



<i class="fa fa-unlink"></i>

</a>

<a href="#" data-command="subscript" class="toolbar-button">



<i class="fa fa-subscript"></i>

</a>

<a href="#" data-command="superscript" class="toolbar-button">



<i class="fa fa-superscript"></i>

</a>

<a href="#" data-command="indent" class="toolbar-button">



<i class="fa fa-indent"></i>

</a>

<a href="#" data-command="outdent" class="toolbar-button">



<i class="fa fa-outdent"></i>

</a>

<a href="#" data-command="insertimage" class="toolbar-button">



<i class="fa fa-image"></i>

</a>

<a href="#" data-command="undo" class="toolbar-button">



<i class="fa fa-undo"></i>

</a>

<a href="#" data-command="redo" class="toolbar-button">



<i class="fa fa-repeat"></i>

</a>
</div>

Cree un elemento editable de contenido en la barra de herramientas.

<div class="editor" contenteditable="true">
</div>

Envuélvalo en un contenedor de editor.

<div class="editor-box">

...
</div>

Importe la versión minificada del SlimWhizzy en el documento.

<script src="src/SlimWhizzy.min.js"></script>

Inicialice el editor de texto enriquecido WYSIWYG y listo.

SlimWhizzy({

_document: document,

_window: window,

btnClass: '.toolbar-button',

editorSelector: '.editor'
});

El ejemplo CSS.

.editor-box {

width: 35vw;

border: 1px solid #D2D2D2;

margin: 0 auto;

background: #fff;

border-collapse: block
}

.toolbar {

background-color: #F5F5F5;

display: grid;

grid-template-columns: repeat(12, 8.33%);

text-align: center
}

.toolbar-button {

margin: 5px;

text-decoration: none;

color: #000
}

.editor {

border: 1px solid #D2D2D2;

min-height: 350px;

padding: 2px
}

a > i >s .fa { font-size: 3em; }