npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

Readme

NPM Version JSDelivr CDN GitHub code size in bytes made-with-javascript GitHub License

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

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature-branch).
  3. Make your changes.
  4. Commit and push your changes.
  5. 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.