maxi-editor

v1.1.3

Published

a month ago

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

0High
0Medium
0Low

williamug

WYSIWYG editor rich text customizable web application text formatting headings fonts plugins

NPM Version GitHub code size in bytes GitHub License

MaxiEditor Documentation

1. Introduction

1.1. Overview

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',

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.