MaxiEditor is a lightweight, modular, and highly customizable rich text editor for the web. Version 2.0 introduces a powerful plugin architecture, built-in security features, and a modern modular codebase.
- Plugin Architecture: Customize your editor by adding only the features you need.
- Security First: Built-in XSS protection and content sanitization.
- Accessible: WCAG compliant with full screen reader and keyboard support.
- Modern UI: Built-in Color Picker and improved dialogs.
- Keyboard Shortcuts: Extensive shortcut support for power users.
- Performance Optimized: Debounced updates and optimized event handling.
- Developer Friendly: Comprehensive API and easy-to-use plugin system.
Include the latest version of MaxiEditor in your HTML:
<!-- CSS --><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@2.0.0/dist/maxi-editor.min.css"><!-- JS (UMD) --><scriptsrc="https://cdn.jsdelivr.net/npm/maxi-editor@2.0.0/dist/maxi-editor.min.js"></script>npm install maxi-editorimportMaxiEditorfrom'maxi-editor';import{HighlightPlugin,InsertLinkPlugin}from'maxi-editor/plugins';consteditor=MaxiEditor.set('#editor',{toolbar: ['bold','italic','underline','highlight','insertLink'],plugins: [HighlightPlugin,InsertLinkPlugin],height: '400px',placeholder: 'Enter your description here...',});| Option | Type | Default | Description |
|---|---|---|---|
toolbar | Array | [...] | List of toolbar buttons. |
plugins | Array | [] | List of plugins to initialize. |
height | String | '200px' | Height of the editor. |
placeholder | String | '' | Placeholder text when empty. |
sanitize | Boolean | true | Enable/disable XSS sanitization. |
maxHistorySize | Number | 100 | Undo/redo stack limit. |
Initialize MaxiEditor in your JavaScript code:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>MaxiEditor Example</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1.1.1/dist/maxi-editor.min.css"></head><body><!-- here is the form --><form><textareaid="comment" name="comment" style="display:none;"></textarea><divid="editor"></div><buttontype="submit">Submit</button></form><!-- /.form --><scriptsrc="https://cdn.jsdelivr.net/npm/maxi-editor@1.1.1/dist/maxi-editor.min.js"></script><script>consteditor=MaxiEditor.set('#editor',{toolbar: ['headingSelector','fontSelector','bold','italic','underline','justifyLeft','justifyCenter','justifyRight','insertUnorderedList','insertOrderedList','insertLink','indent','undo','redo'],height: '500px',placeholder: 'Enter your description here...',plugins: [InsertLinkPlugin],});document.querySelector('form').addEventListener('submit',function(event){// get the content from the editorconsteditorContent=editor.getContent();// Set the value of the hidden textarea to the editor contentdocument.querySelector('#comment').value=editorContent;});</script></body></html>You can customize the toolbar by passing an array of tool names to the toolbar configuration option. The available tools include:
boldheadingSelectorfontSelectoritalicunderlineheadingfontjustifyLeftjustifyCenterjustifyRightinsertUnorderedListinsertOrderedListindentoutdentundoredo
Toolbar options which work with in-build plugins
strikethroughhighlightremoveLink
The code below demonstrates how to configure the toolbar:
consteditor=MaxiEditor.set('#editor',{toolbar: ['bold','italic','underline'],height: '500px',placeholder: 'Enter your description here...',});Set the editor dimensions:
height: '500px',width: '800px',or
editor.setHieght('500px');editor.setWidth('800px');Include and configure plugins. After installing the plugin, you should include it in the toolbar array to enable it on the toolbar.
consteditor=MaxiEditor.set('#editor',{toolbar: ['bold','italic','underline','highlight','strikethrough'],plugins: [HighlightPlugin,StrikeThroughPlugin]});consteditor=MaxiEditor.set('#editor',{toolbar: ['bold','italic','underline','highlight','strikethrough'],height: '400px',width: '600px',placeholder: 'Enter your description here',plugins: [HighlightPlugin,StrikeThroughPlugin]});- bold: Apply bold formatting.
- italic: Apply italic formatting.
- underline: Apply underline formatting.
- heading: Apply heading formatting.
- font: Apply font formatting.
- justifyLeft: Apply left justification.
- justifyCenter: Apply center justification.
- justifyRight: Apply right justification.
- insertUnorderedList: Insert an unordered list.
- insertOrderedList: Insert an ordered list.
- indent: Indent selected text.
- outdent Outdent selected text.
- undo: Undo the last action.
- redo: Redo the last undone action.
editor.executeCommand('bold');editor.registerCommand('myCustomCommand',()=>{console.log('Custom command executed');});editor.executeCommand('myCustomCommand');StrikeThroughPluginInsertLinkPlugin
RemoveLinkPlugin
Create custom plugins to extend functionality:
classMyCustomPlugin{staticinit(editor){editor.registerCommand('myCustomCommand',()=>{// Custom command logic here});}}Override default styles by adding custom CSS:
.maxi-editor {
border:1px solid #ccc;
border-radius:4px;
}
.maxi-toolbar {
background:#f4f4f4;
}Listen to events emitted by the editor:
editor.element.addEventListener('contentChanged',()=>{console.log('Content has been changed');});MaxiEditor.set(element,config)- Initializes the editor for text input.
- element: The HTML element where the editor is initialized.
- config: The configuration object containing the editor options such as
toolbar,height,width,placeholderandplugins.
includeBootstrapIcons()- Injects the Bootstrap Icons stylesheet into the document if not already included.
createToolPanel()- Dynamically creates the toolbar above the editor, allowing users to apply various text formatting options.
registerCoreCommands()- Registers a set of core commands (bold, italic, underline, justification, etc.) for text formatting.
registerCommand(commandName,commandFn)- Registers a custom command by providing a command name and the associated function.
executeCommand(commandName,value=null)- Executes a registered command by passing the command name and an optional value.
trackSelection()- Tracks selection changes and updates the toolbar state accordingly.
getContent()- Returns the current HTML content of the editor.
setContent(content)- Sets the HTML content of the editor.
setHeight(height)- Sets the height of the editor dynamically.
setWidth(width)- Sets the width of the editor dynamically.
checkContent()- Checks if there is content in the editor already
The DOM element used as the editor.
Configuration options for the editor.
- Solution: Ensure that the correct CSS file is included and check for conflicting styles.
- Solution: Verify that the commands are registered correctly and the editor is properly initialized.
- Check Console: Look for errors or warnings in the browser console.
- Inspect Elements: Use browser developer tools to inspect the editor elements and styles.
View a live demo of MaxiEditor in action on CodePen.
If you'd like to contribute to MaxiEditor, you can:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes.
- Commit and push your changes.
- Open a Pull Request.
Submit issues on the GitHub Issues page.
- Additional built-in commands
- More customizable toolbar
- Support for custom toolbar layouts
- Plugin API improvements
MaxiEditor is licensed under the MIT License. See the LICENSE file for more details.