MaxiEditor is a free, open source, lightweight, customizable rich text editor designed for easy integration with web projects. It offers essential text editing features with a flexible toolbar, user-configurable size, and plugin architecture for extended functionality.
- Rich Text Formatting: Bold, italic, underline, strikethrough, and more.
- Text Alignment: Left, center, right justification.
- List Management: Unordered and ordered lists.
- Customizable Toolbar: Add or remove tools as needed.
- Plugin Support: Extend functionality with custom plugins.
- Dynamic Height and Width: Configure editor dimensions programmatically.
- Blog Platforms: Use as a blog post editor with formatting options.
- Web Applications: Include in applications requiring rich text input.
To use MaxiEditor via CDN, include the following in your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1.1.1/dist/maxi-editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/maxi-editor@1.1.1/dist/maxi-editor.min.js"></script>Install MaxiEditor using npm:
npm install maxi-editorDownload the latest version from the releases page and include the files manually in your project.
Initialize MaxiEditor in your JavaScript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MaxiEditor Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1.1.1/dist/maxi-editor.min.css">
</head>
<body>
<!-- here is the form -->
<form>
<textarea id="comment" name="comment" style="display:none;"></textarea>
<div id="editor"></div>
<button type="submit">Submit</button>
</form>
<!-- /.form -->
<script src="https://cdn.jsdelivr.net/npm/maxi-editor@1.1.1/dist/maxi-editor.min.js"></script>
<script>
const editor = 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 editor
const editorContent = editor.getContent();
// Set the value of the hidden textarea to the editor content
document.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:
const editor = 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.
const editor = MaxiEditor.set('#editor', {
toolbar: ['bold', 'italic', 'underline', 'highlight', 'strikethrough'],
plugins: [HighlightPlugin, StrikeThroughPlugin]
});const editor = 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:
class MyCustomPlugin {
static init(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.