maxi-editor
v1.1.3
Published
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
Downloads
158
Maintainers
Readme
MaxiEditor Documentation
1. Introduction
1.1. Overview
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.
1.2. Features
- 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.
1.3. Use Cases
- Blog Platforms: Use as a blog post editor with formatting options.
- Web Applications: Include in applications requiring rich text input.
2. Getting Started
2.1. Installation
CDN
To use MaxiEditor via CDN, include the following in your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maxi-editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maxi-editor.min.js"></script>
Direct Download
Download the latest version from the releases page and include the files manually in your project.
2.2. Basic Usage
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/[email protected]/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/[email protected]/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>
3. Configuration
3.1. Options
Toolbar Configuration
You can customize the toolbar by passing an array of tool names to the toolbar configuration option. The available tools include:
bold
headingSelector
fontSelector
italic
underline
heading
font
justifyLeft
justifyCenter
justifyRight
insertUnorderedList
insertOrderedList
indent
outdent
undo
redo
Toolbar options which work with in-build plugins
strikethrough
highlight
removeLink
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...',
});
Editor Height and Width
Set the editor dimensions:
height: '500px',
width: '800px',
or
editor.setHieght('500px');
editor.setWidth('800px');
Plugins
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]
});
3.2. Example Configuration
const editor = MaxiEditor.set('#editor', {
toolbar: ['bold', 'italic', 'underline', 'highlight', 'strikethrough'],
height: '400px',
width: '600px',
placeholder: 'Enter your description here',
plugins: [HighlightPlugin, StrikeThroughPlugin]
});
4. Commands
4.1. Built-in Commands
List of Commands
- 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.
Usage Example
editor.executeCommand('bold');
4.2. Custom Commands
Adding Commands
editor.registerCommand('myCustomCommand', () => {
console.log('Custom command executed');
});
editor.executeCommand('myCustomCommand');
5. Plugins
5.1. Built-in Plugins
StrikeThroughPlugin
InsertLinkPlugin
RemoveLinkPlugin
5.2. Creating Plugins
Plugin API
Create custom plugins to extend functionality:
class MyCustomPlugin {
static init(editor) {
editor.registerCommand('myCustomCommand', () => {
// Custom command logic here
});
}
}
6. Advanced Usage
6.1. Custom Styling
CSS Customization
Override default styles by adding custom CSS:
.maxi-editor {
border: 1px solid #ccc;
border-radius: 4px;
}
.maxi-toolbar {
background: #f4f4f4;
}
6.2. Event Handling
Handling Events
Listen to events emitted by the editor:
editor.element.addEventListener('contentChanged', () => {
console.log('Content has been changed');
});
7. API Reference
7.1. Methods
1. set
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
,placeholder
andplugins
.
2. includeBootstrapIcons
includeBootstrapIcons()
- Injects the Bootstrap Icons stylesheet into the document if not already included.
3. createToolPanel
createToolPanel()
- Dynamically creates the toolbar above the editor, allowing users to apply various text formatting options.
4. registerCoreCommands
registerCoreCommands()
- Registers a set of core commands (bold, italic, underline, justification, etc.) for text formatting.
5. registerCommand
registerCommand(commandName, commandFn)
- Registers a custom command by providing a command name and the associated function.
6. executeCommand
executeCommand(commandName, value = null)
- Executes a registered command by passing the command name and an optional value.
7. trackSelection
trackSelection()
- Tracks selection changes and updates the toolbar state accordingly.
8. getContent
getContent()
- Returns the current HTML content of the editor.
9. setContent
setContent(content)
- Sets the HTML content of the editor.
10. setHeight
setHeight(height)
- Sets the height of the editor dynamically.
11. setWidth
setWidth(width)
- Sets the width of the editor dynamically.
12. checkContent
checkContent()
- Checks if there is content in the editor already
7.2. Properties
element
The DOM element used as the editor.
config
Configuration options for the editor.
8. Troubleshooting
8.1. Common Issues
Issue: Toolbar Buttons Not Visible
- Solution: Ensure that the correct CSS file is included and check for conflicting styles.
Issue: Commands Not Working
- Solution: Verify that the commands are registered correctly and the editor is properly initialized.
8.2. Debugging
Tips
- Check Console: Look for errors or warnings in the browser console.
- Inspect Elements: Use browser developer tools to inspect the editor elements and styles.
9. Examples and Demos
9.1. Code Examples
Basic Example
View a live demo of MaxiEditor in action on CodePen.
10. Contributing
10.1. How to Contribute
Guidelines
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.
10.2. Reporting Issues
Bug Reports
Submit issues on the GitHub Issues page.
11. Future Enhancements
- Additional built-in commands
- More customizable toolbar
- Support for custom toolbar layouts
- Plugin API improvements
12. Licensing
MaxiEditor is licensed under the MIT License. See the LICENSE file for more details.