MediumEditor

https://github.com/yabwe/medium-editor
Admin
MediumEditor is a vanilla JavaScript WYSIWYG editor that clones the inline editor toolbar from...
Tokens:62,240
Snippets:479
Trust Score:6.7
License:MIT
Update:10 months ago
Show doc for...
Tokens:
Raw
### Initialize Medium Editor Instances (JavaScript)

Source: https://github.com/yabwe/medium-editor/blob/master/demo/multi-editor.html

Demonstrates how to initialize multiple Medium Editor instances on different HTML elements. It shows basic initialization and an example with a customized toolbar configuration, specifying which buttons to include. No external libraries beyond Medium Editor itself are required for this basic setup.

```javascript
var editor = new MediumEditor('.editable'), editor2 = new MediumEditor('.secondEditable', { toolbar: { buttons: ['bold', 'italic', 'quote', 'pre'] } });
```

--------------------------------

### Install Project Dependencies with npm

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

This command installs all necessary packages for MediumEditor development. It is a prerequisite for running development tasks and building the project.

```bash
npm install
```

--------------------------------

### Comprehensive MediumEditor Options Configuration Example

Source: https://github.com/yabwe/medium-editor/blob/master/README.md

An example demonstrating various MediumEditor configurations, including delay, targetBlank, toolbar settings, anchor options, paste formatting rules, anchor preview settings, and placeholder text.

```javascript
var editor = new MediumEditor('.editable', {
    delay: 1000,
    targetBlank: true,
    toolbar: {
        buttons: ['bold', 'italic', 'quote'],
        diffLeft: 25,
        diffTop: 10,
    },
    anchor: {
        placeholderText: 'Type a link',
        customClassOption: 'btn',
        customClassOptionText: 'Create Button'
    },
    paste: {
        cleanPastedHTML: true,
        cleanAttrs: ['style', 'dir'],
        cleanTags: ['label', 'meta'],
        unwrapTags: ['sub', 'sup']
    },
    anchorPreview: {
        hideDelay: 300
    },
    placeholder: {
        text: 'Click to edit'
    }
});
```

--------------------------------

### Medium Editor General Options Example

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

A comprehensive example demonstrating the configuration of various Medium Editor options, including button definitions, delay settings, header types, and configurations for multiple extensions like anchor, paste, anchor preview, and placeholder.

```javascript
var editor = new MediumEditor('.editable', {
    buttons: ['bold', 'italic', 'quote'],
    diffLeft: 25,
    diffTop: 10,
    firstHeader: 'h1',
    secondHeader: 'h2',
    delay: 1000,
    targetBlank: true,
    anchor: {
        placeholderText: 'Type a link',
        customClassOption: 'btn',
        customClassOptionText: 'Create Button'
    },
    paste: {
        cleanPastedHTML: true,
        cleanAttrs: ['style', 'dir'],
        cleanTags: ['label', 'meta']
    },
    anchorPreview: {
        hideDelay: 300
    },
    placeholder: {
        text: 'Click to edit'
    }
});
```

--------------------------------

### Initialize Medium Editor with Options

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Initializes Medium Editor with custom options. This example demonstrates how to pass a configuration object to the constructor for advanced customization.

```javascript
var editor = new MediumEditor('.editor', {
    // options go here
});
```

--------------------------------

### Install MediumEditor via Bower

Source: https://github.com/yabwe/medium-editor/blob/master/README.md

This snippet demonstrates the installation of MediumEditor using the Bower package manager. Bower is a client-side package manager often used in front-end web development.

```bash
bower install medium-editor
```

--------------------------------

### MediumEditor Core Options Example

Source: https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md

Provides an example of setting various core options for MediumEditor. These options control global editor behavior such as active button styling, multi-paragraph selection, button labels, and more.

```javascript
var editor = new MediumEditor('.editable', {
    /* These are the default options for the editor,
        if nothing is passed this is what is used */
    activeButtonClass: 'medium-editor-button-active',
    allowMultiParagraphSelection: true,
    buttonLabels: false,
    contentWindow: window,
    delay: 0,
    disableReturn: false,
    disableDoubleReturn: false,
    disableExtraSpaces: false,
    disableEditing: false,
    elementsContainer: false,
    extensions: {},
    ownerDocument: document,
    spellcheck: true,
    targetBlank: false
});
```

--------------------------------

### Include MediumEditor Script (Manual Installation)

Source: https://github.com/yabwe/medium-editor/blob/master/README.md

This HTML snippet demonstrates how to include the MediumEditor JavaScript file after manual installation. This script needs to be loaded before initializing the editor.

```html
<script src="js/medium-editor.js"></script>
```

--------------------------------

### Initialize Medium Editor with Custom Highlighter Button (JavaScript)

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/WALKTHROUGH-BUTTON.md

Initializes Medium Editor with a custom 'highlighter' button. This example shows how to include custom extensions in the toolbar configuration. Ensure the extension name is present in `toolbar.buttons`.

```javascript
var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'highlighter']
  },
  extensions: {
    'highlighter': new HighlighterButton()
  }
});
```

--------------------------------

### Medium Editor Button Configuration Example

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-Custom-Buttons-and-Extensions

This example demonstrates the configuration options for a Medium Editor button, specifically for an 'unorderedlist' button. It defines the button's name, the action performed on click and for state queries, ARIA label, associated tag names, whether to use query state, and default/FontAwesome content.

```javascript
{
    name: 'unorderedlist',
    action: 'insertunorderedlist', // action used for document.execCommand() and document.queryCommandState()
    aria: 'unordered list',
    tagNames: ['ul'],
    useQueryState: true,
    contentDefault: '<b>&bull;</b>',
    contentFA: '<i class="fa fa-list-ul"></i>'
}

```

--------------------------------

### Configure Multiple Medium Editor Options

Source: https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md

Provides an example of initializing Medium Editor with a comprehensive set of configuration options. This includes setting delays, customizing the toolbar, configuring anchor link behavior, defining paste cleaning rules, setting anchor preview delays, and specifying placeholder text.

```javascript
var editor = new MediumEditor('.editable', {
    delay: 1000,
    targetBlank: true,
    toolbar: {
        buttons: ['bold', 'italic', 'quote'],
        diffLeft: 25,
        diffTop: 10,
    },
    anchor: {
        placeholderText: 'Type a link',
        customClassOption: 'btn',
        customClassOptionText: 'Create Button'
    },
    paste: {
        cleanPastedHTML: true,
        cleanAttrs: ['style', 'dir'],
        cleanTags: ['label', 'meta']
    },
    anchorPreview: {
        hideDelay: 300
    },
    placeholder: {
        text: 'Click to edit'
    }
});
```

--------------------------------

### Example: Registering and Retrieving a Custom Extension

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-Custom-Buttons-and-Extensions

Demonstrates how to define a custom extension, instantiate it, register it with Medium Editor, and retrieve it using its name. This allows for custom button functionality and toolbar integration.

```javascript
var MyExtension = function () {}

var myEx = new MyExtension();

var editor = new MediumEditor('.editor', {
    buttons: ['bold', 'italic', 'underline', 'myextension'],
    extensions: { 'myextension': myEx }
});

editor.getExtensionByName(`myextension`) === myEx //true
```

--------------------------------

### Initialize Medium Editor and Handle Theme Change

Source: https://github.com/yabwe/medium-editor/blob/master/demo/multi-one-instance.html

Initializes Medium Editor with Font Awesome button labels, subscribes to the 'editableInput' event to log editor changes, and dynamically updates the editor's CSS theme based on user selection from a dropdown.

```javascript
var editor = new MediumEditor('.editable', { buttonLabels: 'fontawesome' }), cssLink = document.getElementById('medium-editor-theme');

editor.subscribe('editableInput', function(event, editable) {
  console.info('editableInput fired!', editable);
});

document.getElementById('sel-themes').addEventListener('change', function () {
  cssLink.href = '../dist/css/' + this.value + '.css';
});

editor.addElements(document.querySelector('.editable2'));
```

--------------------------------

### Install Medium Editor via CDN

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Includes the latest version of Medium Editor's CSS and JavaScript files from a CDN. This is a quick way to add the editor to your project without local installation.

```html
<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
```

--------------------------------

### Install MediumEditor via npm

Source: https://github.com/yabwe/medium-editor/blob/master/README.md

This snippet shows how to install MediumEditor using the npm package manager. It is a prerequisite for using the editor in a Node.js environment or a project managed by npm.

```bash
npm install medium-editor
```

--------------------------------

### Manual Installation of Medium Editor CSS

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Manually links Medium Editor's core CSS and a theme's CSS file to your HTML. This is part of the manual installation process.

```html
<link rel="stylesheet" href="css/medium-editor.css"> <!-- Core -->
<link rel="stylesheet" href="css/themes/default.css"> <!-- or any other theme -->
```

--------------------------------

### Configure Keyboard Commands in Medium Editor

Source: https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md

This example illustrates how to configure keyboard commands for Medium Editor. It defines an array of command objects, each specifying the editor command, the triggering key, and the required modifier keys (meta and shift). This allows users to map key combinations to editor actions like bold, italic, and underline.

```javascript
var editor = new MediumEditor('.editable', {
    keyboardCommands: {
        /* This example includes the default options for keyboardCommands,
           if nothing is passed this is what it used */
        commands: [
            {
                command: 'bold',
                key: 'b',
                meta: true,
                shift: false
            },
            {
                command: 'italic',
                key: 'i',
                meta: true,
                shift: false
            },
            {
                command: 'underline',
                key: 'u',
                meta: true,
                shift: false
            }
        ],
    }
});
```

--------------------------------

### Initialize Medium Editor with Table Extension

Source: https://github.com/yabwe/medium-editor/blob/master/demo/table-extension.html

Initializes Medium Editor with a custom table extension. It configures the toolbar to include a table button and registers the TableExtension. Dependencies include the Medium Editor library and potentially Font Awesome for button labels.

```javascript
var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor', 'table'],
    static: true,
  },
  buttonLabels: 'fontawesome',
  extensions: {
    'table': new TableExtension(),
  }
});
```

--------------------------------

### Install Medium Editor via CDN (Specific Version)

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Includes a specific version (4.11.1) of Medium Editor's CSS and JavaScript files from a CDN. This allows for version control and compatibility testing.

```html
<script src="//cdn.jsdelivr.net/medium-editor/4.11.1/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/4.11.1/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
```

--------------------------------

### Medium Editor Lifecycle: Initialize, Destroy, Reinitialize

Source: https://context7.com/yabwe/medium-editor/llms.txt

Covers the lifecycle management of a Medium Editor instance. It shows how to initialize the editor with specific configurations, destroy it to remove its functionality while preserving contenteditability, and then reinitialize it using the `setup()` method. It also includes how to retrieve an existing editor instance from a DOM element and check the Medium Editor version.

```javascript
// Create editor instance
var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline']
    }
});

// Destroy editor (removes event listeners and toolbar)
editor.destroy();
// Elements remain contenteditable but MediumEditor is torn down

// Reinitialize with same configuration
editor.setup();

// Get editor instance from element
var element = document.querySelector('.editable');
var editor = MediumEditor.getEditorFromElement(element);
if (editor) {
    console.log('Editor found:', editor);
    console.log('Version:', editor.constructor.version.toString());
}

// Check version
console.log('MediumEditor version:', MediumEditor.version.toString());
// "5.23.3"
```

--------------------------------

### Initialize Medium Editor with Custom Highlighter Button

Source: https://github.com/yabwe/medium-editor/blob/master/demo/button-example.html

This JavaScript code snippet initializes the Medium Editor with a custom 'highlighter' button. It defines the button's behavior, including its tag names, content (both default and Font Awesome), ARIA label, and action. The button uses rangy.js for DOM manipulation to apply a 'highlight' class. The editor is configured to use Font Awesome for button labels and includes the custom highlighter extension.

```javascript
rangy.init();
var HighlighterButton = MediumEditor.extensions.button.extend({
  name: 'highlighter',
  tagNames: ['mark'],
  contentDefault: '<b>H</b>',
  contentFA: '<i class="fa fa-paint-brush"></i>',
  aria: 'Highlight',
  action: 'highlight',
  init: function () {
    MediumEditor.extensions.button.prototype.init.call(this);
    this.classApplier = rangy.createClassApplier('highlight', { elementTagName: 'mark', normalize: true });
  },
  handleClick: function (event) {
    this.classApplier.toggleSelection();
    // Ensure the editor knows about an html change so watchers are notified
    // ie: <textarea> elements depend on the editableInput event to stay synchronized
    this.base.checkContentChanged();
  }
});

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'highlighter']
  },
  buttonLabels: 'fontawesome',
  extensions: {
    'highlighter': new HighlighterButton()
  }
});
```

--------------------------------

### Initialize Medium Editor with Extension - JavaScript

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/WALKTHROUGH-EXTENSION.md

This code shows how to instantiate a Medium Editor instance and enable a custom extension. The 'disable-context-menu' extension is registered and initialized within the editor's configuration.

```javascript
var editor = new MediumEditor('.editable', {
  extensions: {
    'disable-context-menu': new DisableContextMenuExtension()
  }
});
```

--------------------------------

### Get Editor Option in Extension

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/README.md

Retrieves the value of a specific initialization option for the MediumEditor instance. This is useful for extensions that need to adapt their behavior based on how the editor was configured.

```javascript
MediumEditor.extensions.anchor = MediumEditor.extensions.form.extend({
  // ...
  getTemplate: function () {
    var template = [
      '<input type="text" class="medium-editor-toolbar-input" placeholder="', this.placeholderText, '">'
    ];

    template.push(
      '<a href="#" class="medium-editor-toolbar-save">',
      this.getEditorOption('buttonLabels') === 'fontawesome' ? '<i class="fa fa-check"></i>' : this.formSaveLabel,
      '</a>'
    );

    // ...
  },
  // ...
});
```

--------------------------------

### MediumEditor Initialization and Lifecycle

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Methods for creating, destroying, and setting up MediumEditor instances.

```APIDOC
## MediumEditor Initialization and Lifecycle

### Description
Methods for creating, destroying, and setting up MediumEditor instances.

### Method
`MediumEditor(elements, options)`

### Endpoint
N/A (Constructor)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **elements** (string | HTMLElement | NodeList | Array<string | HTMLElement | NodeList>) - The element(s) to initialize the editor on.
* **options** (object) - Configuration options for the editor.

### Request Example
```javascript
const editor = new MediumEditor('.my-editable-element', {
    // options
});
```

### Response
#### Success Response (200)
N/A (Constructor returns an instance)

### Method
`.destroy()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
editor.destroy();
```

### Response
#### Success Response (200)
N/A

### Method
`.setup()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
editor.setup();
```

### Response
#### Success Response (200)
N/A
```

--------------------------------

### Get Editor ID in Extension

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/README.md

Returns the unique identifier for the current MediumEditor instance. This ID can be used to generate unique IDs for elements associated with the editor, such as toolbars.

```javascript
MediumEditor.extensions.placeholder = MediumEditor.Extension.extend({
  // ...
  createToolbar: function () {
    var toolbar = this.document.createElement('div');

    toolbar.id = 'medium-editor-toolbar-' + this.getEditorId();
    toolbar.className = 'medium-editor-toolbar';

    // ...

    return toolbar;
  },
  // ...
});
```

--------------------------------

### Initialize Medium Editor with Options

Source: https://github.com/yabwe/medium-editor/blob/master/demo/auto-link.html

This snippet demonstrates how to initialize Medium Editor with custom options, including button labels, auto-linking, and specific toolbar buttons. It also includes a theme switching mechanism.

```javascript
var editor = new MediumEditor('.editable', {
  buttonLabels: 'fontawesome',
  autoLink: true,
  toolbar: {
    buttons: ['bold', 'italic', 'unorderedlist', 'orderedlist', 'anchor']
  }
}),
cssLink = document.getElementById('medium-editor-theme');

document.getElementById('sel-themes').addEventListener('change', function () {
  cssLink.href = '../dist/css/' + this.value + '.css';
});
```

--------------------------------

### Create and Display a Custom Button Element (JavaScript)

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/WALKTHROUGH-BUTTON.md

Implements the `init()` and `getButton()` methods to create and return a button element for the custom highlighter extension. The `init()` method creates the button, assigns a CSS class, and sets its inner HTML. The `getButton()` method provides access to this button.

```javascript
var HighlighterButton = MediumEditor.Extension.extend({
  name: 'highlighter',

  init: function () {
    this.button = this.document.createElement('button');
    this.button.classList.add('medium-editor-action');
    this.button.innerHTML = '<b>H</b>';
  },

  getButton: function () {
    return this.button;
  }
});
```

--------------------------------

### Get Editor Elements in Extension

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/README.md

Returns an array of all HTML elements that are monitored by the current MediumEditor instance. This is often used in extension methods like 'destroy' to iterate over and modify these elements.

```javascript
MediumEditor.extensions.placeholder = MediumEditor.Extension.extend({
  // ...
  destroy: function () {
    this.getEditorElements().forEach(function (el) {
      if (el.getAttribute('data-placeholder') === this.text) {
        el.removeAttribute('data-placeholder');
      }
    }, this);
  },
  // ...
});
```

--------------------------------

### Get Extension by Name with Medium Editor

Source: https://github.com/yabwe/medium-editor/blob/master/API.md

The `getExtensionByName` helper function provides a reference to a specific editor extension based on its name. This is useful for interacting with or inspecting individual extensions like the toolbar.

```javascript
const toolbarExtension = MediumEditor.helper.getExtensionByName('toolbar');
```

--------------------------------

### Core Options

Source: https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md

Global options that apply to the entire editor instance. These are passed as the second argument to the MediumEditor constructor.

```APIDOC
## Core Options

These are global options that apply to the entire editor. Example:

```js
var editor = new MediumEditor('.editable', {
    /* These are the default options for the editor,
        if nothing is passed this is what is used */
    activeButtonClass: 'medium-editor-button-active',
    allowMultiParagraphSelection: true,
    buttonLabels: false,
    contentWindow: window,
    delay: 0,
    disableReturn: false,
    disableDoubleReturn: false,
    disableExtraSpaces: false,
    disableEditing: false,
    elementsContainer: false,
    extensions: {},
    ownerDocument: document,
    spellcheck: true,
    targetBlank: false
});
```

### `activeButtonClass`

- **Default:** `'medium-editor-button-active'`
- **Description:** CSS class added to active buttons in the toolbar.

### `buttonLabels`

- **Default:** `false`
- **Description:** Custom content for the toolbar buttons.
- **Valid Values:**
  - `false`: Use default button labels.
  - `'fontawesome'`: Uses fontawesome icon set for all toolbar icons.
- **Note:** Using `'fontawesome'` requires version 4.1.0 of the fontawesome css to be on the page.

### `contentWindow`

- **Default:** `window`
- **Description:** The contentWindow object that contains the contenteditable element. MediumEditor will use this for attaching events, getting selection, etc.

### `delay`

- **Default:** `0`
- **Description:** Time in milliseconds to show the toolbar or anchor tag preview.

### `disableReturn`

- **Default:** `false`
- **Description:** Enables/disables the use of the return-key. You can also set specific element behavior by using setting a data-disable-return attribute.
```

--------------------------------

### Get Editor Content with Medium Editor

Source: https://github.com/yabwe/medium-editor/blob/master/API.md

The `getContent` helper function retrieves the trimmed HTML content of an editor element. It can return the content of the first editor element by default or a specific element based on its index.

```javascript
const firstEditorContent = MediumEditor.helper.getContent();
const secondEditorContent = MediumEditor.helper.getContent(1);
```

--------------------------------

### Define and Use a Custom MediumEditor Extension (JavaScript)

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/README.md

Demonstrates how to define a custom extension for MediumEditor by extending the base Extension class and registering it with the editor instance. It shows how to access the extension by its name.

```javascript
var MyExtension = MediumEditor.Extension.extend({
  name: 'myextension'
});

var myExt = new MyExtension();

var editor = new MediumEditor('.editor', {
  extensions: {
    'myextension': myExt
  }
});

editor.getExtensionByName(`myextension`) === myExt //true
```

--------------------------------

### Anchor Preview Options

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Configure the anchor preview tooltip that appears when hovering over links.

```APIDOC
## Anchor Preview Options

### Description
Configuration options for the anchor preview extension, which displays a tooltip with the link's href and allows editing.

### Method
Initialization Option

### Parameters
#### Anchor Preview Options
- **hideDelay** (number) - Optional - Time in milliseconds to show the anchor tag preview after the mouse has left the anchor tag. Default: 500
- **previewValueSelector** (string) - Optional - Selector to locate where to put the activeAnchor value in the preview. Default: `'a'`

### Request Example
```javascript
var editor = new MediumEditor('.editable', {
    anchorPreview: {
        hideDelay: 1000,
        previewValueSelector: 'a.my-link-class'
    }
});

// To disable anchor preview:
var editor = new MediumEditor('.editable', {
    anchorPreview: false
});
```

### Response
N/A (Configuration options)

### Response Example
N/A (Configuration options)
```

--------------------------------

### Basic Initialization

Source: https://context7.com/yabwe/medium-editor/llms.txt

Demonstrates how to initialize MediumEditor on various HTML elements, including support for textarea elements and custom configuration options.

```APIDOC
## Basic Initialization

### Description
Initialize the editor on HTML elements with contenteditable support. This can be done using class selectors, specific DOM elements, or textarea elements.

### Method
`new MediumEditor(elements, options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Initialize on elements with class selector
var editor = new MediumEditor('.editable');

// Initialize on specific DOM elements
var elements = document.querySelectorAll('.editable');
var editor = new MediumEditor(elements);

// Initialize with custom options
var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
    },
    placeholder: {
        text: 'Type your text here...', 
        hideOnClick: true
    }
});

// Initialize on textarea (automatically creates contenteditable div)
// <textarea class="editable"></textarea>
var editor = new MediumEditor('textarea.editable');
// Creates hidden textarea with synced contenteditable div
```

### Response
#### Success Response (200)
N/A (This is a constructor)

#### Response Example
N/A
```

--------------------------------

### Include MediumEditor from jsDelivr CDN (Latest)

Source: https://github.com/yabwe/medium-editor/blob/master/README.md

This code snippet shows how to include the latest version of MediumEditor and its default CSS using the jsDelivr Content Delivery Network (CDN). This is a quick way to integrate the editor into a web page without local installation.

```html
<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
```

--------------------------------

### Run Medium Editor Development Tasks with Grunt

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

This command executes the default Grunt tasks, which include running all tests and building the distribution files for testing on demo pages. It's essential for verifying code changes and preparing the project for demonstration.

```bash
grunt
```

--------------------------------

### Manage MediumEditor Content (JavaScript)

Source: https://context7.com/yabwe/medium-editor/llms.txt

Provides examples for programmatically managing the content of MediumEditor instances. Covers retrieving content, setting new content, serializing all editor elements to JSON, resetting content to its initial state, and checking if the content has been modified.

```javascript
var editor = new MediumEditor('.editable');

// Get content from first element
var content = editor.getContent();
console.log(content); // "<p>Hello <strong>world</strong></p>"

// Get content from specific element by index
var content = editor.getContent(1);

// Set content for first element
editor.setContent('<p>New content here</p>');

// Set content for specific element
editor.setContent('<h2>Title</h2><p>Paragraph</p>', 1);

// Serialize all editor elements to JSON
var data = editor.serialize();
console.log(data);
// {"element-0": {"value": "<p>Content 1</p>"}, "element-1": {"value": "<p>Content 2</p>"}}

// Reset content to initial state
editor.resetContent(); // Resets all elements
editor.resetContent(document.querySelector('.editable')); // Reset specific element

// Check if content has changed
editor.checkContentChanged(); // Check active element
editor.checkContentChanged(document.querySelector('.editable')); // Check specific element
```

--------------------------------

### Implement `checkState` for Custom Class Toggling (JavaScript)

Source: https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/README.md

This JavaScript example demonstrates how to implement the `checkState` method in a MediumEditor extension. It checks for a custom data attribute on nodes and toggles a CSS class on the editor element accordingly. This is useful for visually indicating specific content states within the editor.

```javascript
var EditedExtension = MediumEditor.Extension.extend({
  name: 'edited',
  checkState: function (node) {
    // checkState is called multiple times for each selection change
    // so only store a value if the attribute was found
    if (!this.foundAttribute && node.getAttribute('data-edited')) {
      this.foundAttribute = true;
    }

    // Once we've moved up the ancestors to the container element
    // we know we're done iterating up and can add/remove the css class
    if (MediumEditor.util.isMediumEditorElement(node)) {
      if (this.foundAttribute) {
        node.classList.add('edited-text');
      } else {
        node.classList.remove('edited-text');
      }
      // Make sure the property is not persisted for the next time
      // selection is updated
      delete this.foundAttribute;
    }
  }
});

var editedExt = new EditedExtension();

var editor = new MediumEditor('.editor', {
  extensions: {
    'edited': editedExt
  }
});
```

--------------------------------

### Initialize Medium Editor with Custom Extension

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-Custom-Buttons-and-Extensions

Demonstrates how to create a new Medium Editor instance and integrate a custom extension named 'myextension'. The custom extension is added to the editor's configuration via the `extensions` option and also specified in the `buttons` array to be displayed in the toolbar.

```javascript
var MyExtension = function () {}

var editor = new MediumEditor('.editor', {
    buttons: ['bold', 'italic', 'underline', 'myextension'],
    extensions: { 'myextension': new MyExtension() }
});
```

--------------------------------

### MediumEditor Initialization API

Source: https://github.com/yabwe/medium-editor/blob/master/API.md

Functions related to initializing and managing the MediumEditor instance.

```APIDOC
## MediumEditor(elements, options)

### Description
Creates a new instance of MediumEditor. This function converts specified elements into editable areas, handles `<textarea>` elements by replacing them with `contenteditable` divs, initializes extensions, and sets up event listeners.

### Method
Constructor

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **elements** (String | HTMLElement | Array | NodeList | HTMLCollection) - Required - A selector string, single HTMLElement, or a collection of HTMLElements to initialize the editor on.
* **options** (Object) - Optional - An object containing custom options for the editor configuration.

### Request Example
```javascript
const editor = new MediumEditor('.editor', {
  // Options go here
});
```

### Response
#### Success Response (200)
Returns the initialized MediumEditor instance.

#### Response Example
```json
{
  "message": "MediumEditor instance created successfully."
}
```

## destroy()

### Description
Tears down the editor instance. This involves destroying extensions, detaching event listeners, removing custom attributes, and restoring original elements (e.g., unhiding textareas).

### Method
Method

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
editor.destroy();
```

### Response
#### Success Response (200)
Indicates the editor has been successfully destroyed.

#### Response Example
```json
{
  "message": "MediumEditor instance destroyed successfully."
}
```

## setup()

### Description
Initializes or re-initializes the editor instance if it has been destroyed. It reuses the elements and options provided during the initial instantiation.

### Method
Method

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
editor.setup();
```

### Response
#### Success Response (200)
Indicates the editor has been successfully set up.

#### Response Example
```json
{
  "message": "MediumEditor instance set up successfully."
}
```

## addElements(elements)

### Description
Adds new elements to the editor instance to be managed and made editable.

### Method
Method

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **elements** (String | HTMLElement | Array | NodeList | HTMLCollection) - Required - The element(s) to add to the editor.

### Request Example
```javascript
editor.addElements('.new-editor-class');
```

### Response
#### Success Response (200)
Indicates elements were added successfully.

#### Response Example
```json
{
  "message": "Elements added successfully."
}
```

## removeElements(elements)

### Description
Removes specified elements from the editor instance, making them no longer editable by this instance.

### Method
Method

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **elements** (String | HTMLElement | Array | NodeList | HTMLCollection) - Required - The element(s) to remove from the editor.

### Request Example
```javascript
editor.removeElements('.editor-to-remove');
```

### Response
#### Success Response (200)
Indicates elements were removed successfully.

#### Response Example
```json
{
  "message": "Elements removed successfully."
}
```
```

--------------------------------

### Placeholder Options

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Configure the placeholder text that appears when the editor is empty.

```APIDOC
## Placeholder Options

### Description
Configuration options for the placeholder extension, which displays placeholder text when the editor content is empty.

### Method
Initialization Option

### Parameters
#### Placeholder Options
- **text** (string) - Optional - The default placeholder text for empty contenteditables. Default: 'Type your text'

### Request Example
```javascript
var editor = new MediumEditor('.editable', {
    placeholder: {
        text: 'Enter your content here'
    }
});

// To disable placeholder:
var editor = new MediumEditor('.editable', {
    placeholder: false
});
```

### Response
N/A (Configuration options)

### Response Example
N/A (Configuration options)
```

--------------------------------

### Manage Medium Editor Selections

Source: https://context7.com/yabwe/medium-editor/llms.txt

Provides functionality to manage text selections within the editor, including saving, restoring, exporting, and importing selection states. It also allows getting the focused element, parent element of the selection, selecting all content, specific elements, and controlling toolbar updates.

```javascript
var editor = new MediumEditor('.editable');

// Save current selection
editor.saveSelection();

// Do some work...
someAsyncOperation().then(function() {
    // Restore previously saved selection
    editor.restoreSelection();
});

// Export selection state (for persistence)
var selectionState = editor.exportSelection();
console.log(selectionState);
// {start: 5, end: 10, editableElementIndex: 0}
localStorage.setItem('selection', JSON.stringify(selectionState));

// Import selection state
var savedState = JSON.parse(localStorage.getItem('selection'));
editor.importSelection(savedState);

// Get focused element
var focusedElement = editor.getFocusedElement();
if (focusedElement) {
    console.log('Currently editing:', focusedElement);
}

// Get parent element of selection
var parentElement = editor.getSelectedParentElement();
console.log('Selection is within:', parentElement);

// Select all content in focused element
editor.selectAllContents();

// Select specific element
var elementToSelect = document.querySelector('.highlight');
editor.selectElement(elementToSelect);

// Stop toolbar updates during bulk operations
editor.stopSelectionUpdates();
performBulkEdits();
editor.startSelectionUpdates();

// Manually trigger toolbar update
editor.checkSelection();
```

--------------------------------

### Initialize Medium Editor with Font Awesome Buttons

Source: https://github.com/yabwe/medium-editor/blob/master/demo/absolute-container.html

Initializes Medium Editor on elements with the class 'editable'. It configures the editor to use Font Awesome for button labels and specifies a container element for editor UI. This is a common setup for integrating rich text editing with a custom button set.

```javascript
var editor = new MediumEditor('.editable', {
  buttonLabels: 'fontawesome',
  elementsContainer: document.getElementById('container')
});
```

--------------------------------

### Helper Methods

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Utility methods for common tasks and accessing editor internals.

```APIDOC
## Helper Methods

### Description
Utility methods for common tasks and accessing editor internals.

### Method
`.delay(fn)`

### Endpoint
N/A (Instance Method)

### Parameters
* **fn** (function) - The function to delay execution for.

### Request Example
```javascript
editor.delay(() => console.log('Delayed execution'));
```

### Response
#### Success Response (200)
N/A

### Method
`.getExtensionByName(name)`

### Endpoint
N/A (Instance Method)

### Parameters
* **name** (string) - The name of the extension to retrieve.

### Request Example
```javascript
const anchorExtension = editor.getExtensionByName('anchor');
```

### Response
#### Success Response (200)
* **extension** (object | undefined) - The extension object if found, otherwise undefined.

### Method
`.serialize()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const editorContent = editor.serialize();
```

### Response
#### Success Response (200)
* **serializedContent** (object) - A JSON object representing the current content of the editor elements.
```

--------------------------------

### Anchor Preview Options

Source: https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md

Options to configure the anchor preview that appears when hovering over links.

```APIDOC
## Anchor Preview Options

Options for customizing the anchor preview.

### `hideDelay`

- **Default:** `0`
- **Description:** Delay in milliseconds before hiding the anchor preview.

### `previewValueSelector`

- **Default:** `null`
- **Description:** A CSS selector to find an element within the anchor tag that should be used as the preview value. If `null`, the `href` attribute is used.

### `showOnEmptyLinks`

- **Default:** `true`
- **Description:** Shows the anchor preview even for empty `href` attributes.

### `showWhenToolbarIsVisible`

- **Default:** `true`
- **Description:** Shows the anchor preview only when the toolbar is visible.

### `Disabling Anchor Preview`

Set the `anchorPreview` option to `false` in the MediumEditor constructor to disable the anchor preview.
```

--------------------------------

### Initialize Medium Editor and Change Theme

Source: https://github.com/yabwe/medium-editor/blob/master/demo/nested-editable.html

This snippet demonstrates how to initialize Medium Editor on an element with the class 'editable' and customize its button labels. It also includes functionality to dynamically change the editor's theme by listening to a change event on a select element.

```javascript
var editor = new MediumEditor('.editable', { buttonLabels: 'fontawesome' }), cssLink = document.getElementById('medium-editor-theme'); document.getElementById('sel-themes').addEventListener('change', function () { cssLink.href = '../dist/css/' + this.value + '.css'; });
```

--------------------------------

### Toolbar Options

Source: https://github.com/yabwe/medium-editor/wiki/v4.x.x-README

Configure the appearance and behavior of the editor's toolbar.

```APIDOC
## Toolbar Options

### Description
Configuration options for customizing the editor's toolbar, including button sets, styling, and positioning.

### Method
Initialization Option

### Parameters
#### Toolbar Options
- **activeButtonClass** (string) - Optional - CSS class added to active buttons in the toolbar. Default: 'medium-editor-button-active'
- **buttons** (array of strings) - Optional - The set of buttons to display on the toolbar. Default: `['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote']`
- **buttonLabels** (string or object) - Optional - Type of labels on the buttons. Values: 'fontawesome', `{'bold': '<b>b</b>', 'italic': '<i>i</i>'}`. Default: false
- **diffLeft** (number) - Optional - Value in pixels to be added to the X axis positioning of the toolbar. Default: 0
- **diffTop** (number) - Optional - Value in pixels to be added to the Y axis positioning of the toolbar. Default: -10
- **disableToolbar** (boolean) - Optional - Enables/disables the toolbar. Default: false
- **firstButtonClass** (string) - Optional - CSS class added to the first button in the toolbar. Default: 'medium-editor-button-first'
- **lastButtonClass** (string) - Optional - CSS class added to the last button in the toolbar. Default: 'medium-editor-button-last'
- **staticToolbar** (boolean) - Optional - Enable/disable the toolbar always displaying in the same location relative to the medium-editor element. Default: false
- **stickyToolbar** (boolean) - Optional - Enable/disable the toolbar "sticking" to the medium-editor element when the page is being scrolled. Default: false
- **toolbarAlign** (string) - Optional - Alignment for the static toolbar (`left`, `center`, `right`). Default: `center`
- **updateOnEmptySelection** (boolean) - Optional - Update the state of the toolbar buttons even when the selection is collapsed. Default: false

### Request Example
```javascript
var editor = new MediumEditor('.editable', {
    buttons: ['bold', 'italic', 'underline'],
    activeButtonClass: 'my-active-class',
    stickyToolbar: true
});
```

### Response
N/A (Configuration options)

### Response Example
N/A (Configuration options)
```

--------------------------------

### Medium Editor Paste Handling Configuration

Source: https://context7.com/yabwe/medium-editor/llms.txt

Details the configuration options for handling pasted content in Medium Editor. It covers forcing plain text pasting, controlling HTML cleaning, specifying attributes and tags to remove or unwrap, and defining custom replacements before and after the built-in cleaning process. Examples include handling non-breaking spaces and converting `<br>` tags.

```javascript
var editor = new MediumEditor('.editable', {
    paste: {
        // Force plain text pasting
        forcePlainText: true,

        // Clean pasted HTML from external sources
        cleanPastedHTML: false,

        // Remove specific attributes
        cleanAttrs: ['class', 'style', 'dir'],

        // Remove specific tags entirely
        cleanTags: ['meta', 'script', 'style'],

        // Unwrap tags (keep content, remove wrapper)
        unwrapTags: ['span', 'div'],

        // Custom replacements before built-in cleaning
        preCleanReplacements: [
            [/ /g, ' '] // Replace non-breaking spaces
        ],

        // Custom replacements after built-in cleaning
        cleanReplacements: [
            [/<br>/gi, '\n'] // Convert BR to newlines
        ]
    }
});

// Advanced paste cleaning
var editor = new MediumEditor('.editable', {
    paste: {
        forcePlainText: false,
        cleanPastedHTML: true,
        cleanAttrs: ['style', 'class', 'id', 'name'],
        cleanTags: ['meta', 'script', 'style', 'iframe'],
        unwrapTags: ['font', 'span']
    }
});
```
Tokens:
Raw