Note:This project has been put on hold for the time being. Not all features listed below are available at the present time.
This is a custom built rich text editor made with JavaScript that outputs JSON.
It uses a contenteditable HTML element as the wrapper.
Features include making headers, italicizing, bolding, and underlining text, centering and indenting text, inserting links and images, and creating blockquotes.
Keyboard shortcuts are not prohibited, although toolbar alternatives are also presented.
The purpose of this editor is to serve as an immediate drop-in editor with all features baked-in.
If you're looking for browser / javascript based editors that offer a more plug-and-play approach, with greater extensibility and customizability, check out Slate and Editor.js! EditorJS was my original inspiration for creating an editor that generates JSON output, and Slate is an excellent tool if you're working with React and really want to build out a powerful and robust editor! I'd recommend getting familiar with both to determine which one best suits your use case.
Styling is entirely customizable. The editor comes with no initial styling whatsoever.
The overall HTML format of the editor is as follows:
<section id="editor-container">
<section id="toolbar">
<button id="headerBtn">Header</button>
<button id="italicize">italicize</button>
<button id="bold">bold</button>
<button id="underline">underline</button>
</section>
<section id="editor" contenteditable="true"></section>
</section>Only a select few html elements are allowed at final data output. These are
- H2
- H3
- P
- A
- IMG
- U
- STRONG
- EM
- BLOCKQUOTE
Before data is returned as json, it is cleaned to ensure that it only contains these specific elements.