Minimal WYSIWYG Text Editor – Writty

Preview:

Description:

Writty is a lightweight, writer-centric online WYSIWYG text editor to provide a fresh new editing experience on your web application.

Features:

• Vertical editor toolbar.
• Dark & Light mode switcher.
• Word counter.
• Autosaves current content in local storage.
• Downloadable as a PDF file.

How to use it:

1. Load the Writty’s main JavaScript and Stylesheet in the document.

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

2. Load the writtyautosave.js if you need to autosave content in the local storage.

<script src="writtyautosave.js"></script>

3. Load the Font Awesome iconic font for the editor icons (OPTIONAL).

<script defer src="/path/to/fontawesome/all.js"></script>

4. Code the HTML for the WYSIWYG text editor.

<div class="container">
   <div class="topbar">
      <div class="topbar-row">
         <label class="switch">
            <input id="theme-switch" type="checkbox">
            <div class="switch-slider"> <span class="sun"><i class="fas fa-sun"></i></span><span class="moon"><i class="fas fa-moon"></i></span></div>
         </label>
         <button class="topbar-button" onclick="clearStorage()" type="button"><i class="fas fa-pencil-alt"></i> New Text</button>
      </div>
   </div>
   <div class="toolbar">
      <div class="popup" title="text format">
         <button type="button" class="popup-button toolbar-button"><i class="fas fa-heading"></i></button>
         <div class="popup-window">
            <button class="popup-item Heading" data-edit="formatBlock:h1">Heading</button>
            <button class="popup-item Subheading" data-edit="formatBlock:h2">Subheading</button>
            <button class="popup-item Body" data-edit="formatBlock:p">Body</button>
            <button class="popup-item Caption" data-edit="formatBlock:h5">Caption</button>
         </div>
      </div>
      <span title="styles">
      <button class="toolbar-button" data-edit="bold"><i class="fas fa-bold"></i></button>
      <button class="toolbar-button" data-edit="italic"><i class="fas fa-italic"></i></button>
      <button class="toolbar-button" data-edit="underline"><i class="fas fa-underline"></i></button>
      <button class="toolbar-button" data-edit="formatBlock:blockquote"><i class="fas fa-quote-right"></i></button>
      </span>
      <span title="lists">
      <button class="toolbar-button" data-edit="insertUnorderedList"><i class="fas fa-list-ul"></i></button>
      <button class="toolbar-button" data-edit="insertOrderedList"><i class="fas fa-list-ol"></i></button>
      </span>
      <button class="toolbar-button" type="button" data-edt="insertLink"><i class="fas fa-link"></i></button>
      <div class="popup">
         <button type="button" class="popup-button toolbar-button no-caret"><i class="fas fa-image"></i></button>
         <div class="popup-window">
            <label class="popup-button" for="imageUpload"><i class="fas fa-arrow-circle-up"></i>&nbsp;Upload Image</label>
            <input type="file" name="imageUpload" hidden id="imageUpload" accept=".gif,.jpg,.jpeg,.png">
         </div>
      </div>
      <button class="toolbar-button last" onclick='printPDF()'><i class="fas fa-download"></i></button>
      <span id="counter">0</span>
   </div>
   <div id="editor" class="editor">
      <div id="content" class="content" contenteditable="true">
         <p>Once upon a time...✏️</p>
      </div>
   </div>
</div>

Changelog:

06/08/2020

• Update writty.css
• Refactor autosave