MaxiEditor v2

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.

Key Features in v2.0

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.

Installation

CDN

Include the latest version of MaxiEditor in your HTML:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@2.0.0/dist/maxi-editor.min.css">

<!-- JS (UMD) -->
<script src="https://cdn.jsdelivr.net/npm/maxi-editor@2.0.0/dist/maxi-editor.min.js"></script>

NPM

npm install maxi-editor

Usage

Quick Start

import MaxiEditor from 'maxi-editor';
import { HighlightPlugin, InsertLinkPlugin } from 'maxi-editor/plugins';

const editor = MaxiEditor.set('#editor', {
  toolbar: ['bold', 'italic', 'underline', 'highlight', 'insertLink'],
  plugins: [HighlightPlugin, InsertLinkPlugin],
  height: '400px',
  placeholder: 'Enter your description here...',
});

Configuration Options

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.

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/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>

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 and plugins.

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.

Name		Name	Last commit message	Last commit date
Latest commit History 202 Commits
.github/workflows		.github/workflows
.vscode		.vscode
dist		dist
docs		docs
images		images
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
babel.config.cjs		babel.config.cjs
demo-refactored.html		demo-refactored.html
demo-v2-prod.html		demo-v2-prod.html
demo.html		demo.html
jest.config.cjs		jest.config.cjs
package-lock.json		package-lock.json
package.json		package.json
test-memory.html		test-memory.html
webpack.config.js		webpack.config.js
webpack.prod.cjs		webpack.prod.cjs

License

Williamug/maxi-editor

Folders and files

Latest commit

History

Repository files navigation