Author: | charlyllo |
---|---|
Views Total: | 1,836 views |
Official Page: | Go to website |
Last Update: | June 8, 2020 |
License: | MIT |
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> 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