# yabwe/medium-editor

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/yabwe-medium-editor).**

16,119 stars · 1,840 forks · JavaScript · other

## Links

- GitHub: https://github.com/yabwe/medium-editor
- Homepage: https://yabwe.github.io/medium-editor/
- awesome-repositories: https://awesome-repositories.com/repository/yabwe-medium-editor.md

## Topics

`contenteditable` `editor` `javascript` `medium-editor` `rich-text-editor` `wysiwyg`

## Description

This project is a browser-based JavaScript library that transforms standard web elements into inline, WYSIWYG rich text editing areas. It functions as a programmatic wrapper around the native browser content-editable attribute, providing a structured interface for managing text input, media embedding, and document formatting directly within existing page layouts.

The editor is distinguished by its contextual floating toolbar, which dynamically appears based on user text selection to provide relevant formatting options. It utilizes a plugin-based architecture that allows developers to inject custom buttons, define keyboard shortcuts, and manage the editor lifecycle through programmatic controls. The system also includes a built-in sanitization pipeline to filter markup during paste operations and a utility for converting generated HTML content into Markdown syntax.

Beyond basic text styling, the editor supports a wide range of content management capabilities, including drag-and-drop media insertion, structured data insertion for tables, and real-time list formatting. It provides event-driven observation to track DOM mutations and offers integration hooks for connecting the editing interface to server-side content management systems or modern component-based frontend architectures.

## Tags

### Content Management & Publishing

- [Rich Text Editors](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/rich-text-editors.md) — Provides a WYSIWYG rich text editor library that transforms web elements into inline editable areas with contextual toolbars.
- [Content Authoring and Editing](https://awesome-repositories.com/f/content-management-publishing/authoring-editorial-interfaces/content-authoring-editing.md) — Transforms standard web elements into editable areas that allow users to modify content directly within the page layout. ([source](https://cdn.jsdelivr.net/gh/yabwe/medium-editor@master/README.md))
- [Content Management Systems](https://awesome-repositories.com/f/content-management-publishing/content-management-systems.md) — Integrates flexible text editing interfaces into server-side applications and content management systems.
- [HTML to Markdown Reversion Tools](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/markdown-markup-tools/markdown-processors/html-to-markdown-reversion-tools.md) — Provides utilities to convert rendered HTML content back into original Markdown source code. ([source](https://github.com/yabwe/medium-editor/wiki/Extensions-Plugins))

### Development Tools & Productivity

- [ContentEditable Wrappers](https://awesome-repositories.com/f/development-tools-productivity/code-editors-ides/extension-ecosystems-management/editor-extensions/editor-architectures/contenteditable-wrappers.md) — Transforms standard web elements into inline editable areas using the native browser contenteditable attribute.
- [Editor Extensions](https://awesome-repositories.com/f/development-tools-productivity/editor-extensions.md) — Provides programmatic control methods to initialize, destroy, or dynamically manage editable elements. ([source](https://cdn.jsdelivr.net/gh/yabwe/medium-editor@master/README.md))

### Web Development

- [Browser-Based Editors](https://awesome-repositories.com/f/web-development/browser-based-editors.md) — Provides a browser-based tool for managing structured text input with custom toolbar actions and media embedding.
- [Rich Text Editors](https://awesome-repositories.com/f/web-development/rich-text-editors.md) — Transforms standard web elements into inline, WYSIWYG rich text editing areas for direct content modification.
- [HTML Sanitization Utilities](https://awesome-repositories.com/f/web-development/html-sanitization-utilities.md) — Filters and cleans incoming content during paste operations to ensure structural integrity and remove unauthorized markup.
- [Frontend Framework Integrations](https://awesome-repositories.com/f/web-development/frontend-framework-integrations.md) — Offers bindings for component-based architectures to ensure consistent content creation experiences across modern web applications. ([source](https://github.com/yabwe/medium-editor/wiki/Wrappers-and-Integration))

### User Interface & Experience

- [Floating Toolbars](https://awesome-repositories.com/f/user-interface-experience/floating-toolbars.md) — Displays a dynamic UI menu that calculates its position relative to the current text selection to provide relevant formatting options.
- [Editor Image Uploaders](https://awesome-repositories.com/f/user-interface-experience/media-uploaders/editor-image-uploaders.md) — Supports image uploading and external media embedding directly within the rich text editing workflow. ([source](http://yabwe.github.io/medium-editor/))
- [Toolbar Button Customizations](https://awesome-repositories.com/f/user-interface-experience/action-toolbars/toolbar-button-customizations.md) — Allows developers to extend the interface with user-defined buttons that trigger specific actions or custom scripts. ([source](https://github.com/yabwe/medium-editor/wiki/Extensions-Plugins))

### Software Engineering & Architecture

- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures.md) — Allows developers to inject custom buttons and functionality by registering modular components that hook into the editor lifecycle.
- [Rich Text Adapters](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/programmatic-interfaces/backend-server-integration/rich-text-adapters.md) — Provides integration hooks for connecting the editing interface to server-side content management systems. ([source](https://github.com/yabwe/medium-editor/wiki/Wrappers-and-Integration))

### Security & Cryptography

- [Content Sanitization](https://awesome-repositories.com/f/security-cryptography/content-sanitization.md) — Filters and cleans HTML content during paste operations to ensure consistent formatting and remove unwanted attributes. ([source](https://cdn.jsdelivr.net/gh/yabwe/medium-editor@master/README.md))