Rich Text Editor — Help & Usage Guide

Table of Contents

Installation
Basic Usage
Customizing the Toolbar
Form Integration
Supported Features
Keyboard Shortcuts
FAQ

Installation

Use the CDN links:
- https://cdn.jsdelivr.net/gh/sujeetkrsingh/rich-text-editor/src/rich-text-editor.js
- https://cdn.jsdelivr.net/gh/sujeetkrsingh/rich-text-editor/src/rich-text-editor.css
Include the CSS and JS in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sujeetkrsingh/rich-text-editor/src/rich-text-editor.css"> <script src="https://cdn.jsdelivr.net/gh/sujeetkrsingh/rich-text-editor/src/rich-text-editor.js"></script>

Basic Usage

Add a <textarea> with the class js-rich-text-editor:

<textarea class="js-rich-text-editor" name="content"></textarea>
On page load, the editor will automatically replace the textarea with a rich text editor.

You can customize which tools appear in the toolbar and their order by defining a global window.RichTextEditorConfig object before loading the JS file:

<script>
window.RichTextEditorConfig = {
  toolbar: [
    'bold', 'italic', 'underline', 'separator',
    'foreColor', 'hiliteColor', 'separator',
    'insertUnorderedList', 'insertOrderedList', 'separator',
    'createLink', 'unlink', 'separator',
    'table', 'emoji', 'specialChar', 'datetime', 'separator',
    'fullscreen', 'preview', 'print', 'source', 'help'
  ]
};
</script>
        

Available tool keys: undo, redo, bold, italic, underline, strikethrough, superscript, subscript, fontName, fontSize, foreColor, hiliteColor, justifyLeft, justifyCenter, justifyRight, justifyFull, outdent, indent, insertUnorderedList, insertOrderedList, formatBlock, createLink, unlink, insertImage, removeFormat, table, specialChar, emoji, fullscreen, preview, print, datetime, source, help, separator

Form Integration

The editor keeps a hidden textarea in sync with the rich text content, so you can submit the form as usual:

<form>
  <textarea class="js-rich-text-editor" name="content"></textarea>
  <button type="submit">Submit</button>
</form>
        

Supported Features

Text formatting: bold, italic, underline, strikethrough, superscript, subscript
Font family and font size (8pt–36pt)
Text color ( Text Color) and highlight ( Highlight)
Text alignment: left, center, right, justify
Indent/outdent
Ordered and unordered lists
Block formats: headings, paragraph, pre, blockquote
Links and images (with modal for image upload or link, width/height, alt, and image editing/removal)
Click on an image in the editor to edit its source, width, height, alt, or remove it
Insert table (custom rows/columns)
Insert special characters (popup)
Insert emojis (popup)
Insert current date/time
Undo/redo
Remove formatting
Source code mode: Toggle to view/edit HTML source directly (with line numbers)
Preview mode (popup)
Print editor content
Full screen mode
Customizable toolbar
Responsive design
No dependencies
Keyboard shortcuts for all major commands (see Help icon in toolbar)
Toolbar buttons reflect current selection formatting
Accessible tooltips for all toolbar buttons
Word and character count in the editor footer
Multiple editors per page with different toolbars/configurations
Editor in modal dialogs and as email compose box (see demo)

Keyboard Shortcuts

Windows/Linux: Use Ctrl or Ctrl+Shift combinations.
Mac: Use ⌘ or ⌘+Shift combinations.
See the Help button in the toolbar for a full list in your browser.

Ctrl/⌘+B: Bold
Ctrl/⌘+I: Italic
Ctrl/⌘+U: Underline
Ctrl/⌘+Z: Undo
Ctrl/⌘+Y: Redo
Ctrl/⌘+L or Ctrl/⌘+K: Insert Link
Ctrl/⌘+P: Print
Ctrl/⌘+Shift+S: Source Code Mode
Ctrl/⌘+Shift+F: Full Screen
Ctrl/⌘+Shift+P: Preview
Ctrl/⌘+Shift+T: Insert Table
Ctrl/⌘+Shift+E: Insert Emoji
Ctrl/⌘+Shift+C: Insert Special Character
Ctrl/⌘+Shift+D: Insert Date/Time
Ctrl/⌘+Shift+R: Remove Format

FAQ

Q: How do I edit or remove an image after inserting?
A: Click on the image in the editor. A modal will open where you can change the image URL, upload a new image, set width/height (in px or %), alt text, or remove the image.

Q: How do I edit the HTML source?
A: Add source to your toolbar config. Click the icon to toggle between WYSIWYG and HTML source mode.

Q: How do I see all keyboard shortcuts?
A: Click the Help icon at the end of the toolbar.

Q: Can I use all features on Mac?
A: Yes, all features and shortcuts work on Mac using the ⌘ key.

Q: Can I use multiple editors on one page?
A: Yes, you can add as many textarea.js-rich-text-editor elements as you want, each with its own configuration.

Q: How do I customize the toolbar for a specific editor?
A: Use window.RichTextEditorConfig['#editorId'] = [ ... ] or a CSS selector as the key.

Q: Can I use the editor in a modal or popup?
A: Yes, the editor works inside modals and dialogs. See the demo for an example.

Q: How do I add a word/character count?
A: The editor includes a footer with live word and character count by default.

Q: Is the editor responsive?
A: Yes, the editor and toolbar are fully responsive and adapt to different screen sizes.

Q: Can I use my own icons?
A: The editor uses SVG icons by default. You can customize the icons in the JS file.

Q: Is the editor accessible?
A: The editor uses semantic HTML, ARIA labels, and keyboard navigation for accessibility.

Q: Does the editor support undo/redo?
A: Yes, undo/redo is supported via toolbar buttons and keyboard shortcuts.

Q: Can I print the editor content?
A: Yes, use the print button or Ctrl/⌘+P shortcut.

Q: How do I insert tables, emojis, or special characters?
A: Use the respective toolbar buttons to open modals for tables, emojis, or special characters.

Q: Can I disable or hide certain features?
A: Yes, simply remove the tool from the toolbar config array.

Q: Is there a way to preview the HTML output?
A: Yes, click the preview button () in the toolbar.

Q: How do I upload images?
A: Use the image button, then select "Upload Image" in the modal. The image is embedded as a Data URL.

Q: Can I use the editor in a form and submit HTML?
A: Yes, the hidden textarea is kept in sync for form submission.

Q: Is there a dark mode?
A: The editor uses a light theme by default, but you can override styles for dark mode.

Q: Is there any dependency?
A: No, the editor is pure JavaScript and CSS, with no external dependencies.

Q: Is document.execCommand deprecated?
A: Yes, but it is still supported in all major browsers as of 2024. This library uses it for compatibility.