Author: | jodylecompte |
---|---|
Views Total: | 1,249 views |
Official Page: | Go to website |
Last Update: | July 18, 2018 |
License: | MIT |
Preview:

Description:
SlimWhizzy is a super small (less than 1kb) JavaScript library which makes use of execCommand() to create a minimal, clean WYSIWYG Rich Text Editor for a content editable element.
How to use it:
Use an iconic font of your choice for the editor icons.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Create the toolbar for the WYSIWYG Rich Text Editor.
<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>
Create a content editable element under the toolbar.
<div class="editor" contenteditable="true"> </div>
Wrap them into an editor container.
<div class="editor-box"> ... </div>
Import the minified version of the SlimWhizzy into the document.
<script src="src/SlimWhizzy.min.js"></script>
Initialize the WYSIWYG Rich Text Editor and done.
SlimWhizzy({ _document: document, _window: window, btnClass: '.toolbar-button', editorSelector: '.editor' });
The example 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; }