# hinesboy/mavoneditor

**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/hinesboy-mavoneditor).**

6,586 stars · 905 forks · Vue · MIT

## Links

- GitHub: https://github.com/hinesboy/mavonEditor
- awesome-repositories: https://awesome-repositories.com/repository/hinesboy-mavoneditor.md

## Topics

`editor` `html` `javascript` `markdown` `vue` `webpack`

## Description

mavonEditor is a markdown editor component for Vue applications that functions as a markdown-to-HTML converter and a visual text editor. It provides a synchronized preview and a writing interface that renders markdown content in real-time.

The project includes a security layer that cleans HTML tags and attributes through sanitization to prevent the execution of malicious scripts in the browser.

The editor supports technical documentation authoring with capabilities for mathematical notation, footnotes, automated tables of contents, and code syntax highlighting. It also includes a system for managing image uploads and a configurable layout for toolbars and navigation menus.

## Tags

### Content Management & Publishing

- [Markdown Editors](https://awesome-repositories.com/f/content-management-publishing/markdown-editors.md) — A markdown editor component for Vue applications with a synchronized preview and customizable writing interface.
- [Markdown-Based Content Authoring](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-authoring-tools/markdown-based-content-authoring/markdown-based-content-authoring.md) — Enables the creation of structured content using markdown syntax with a live preview in a Vue application.
- [Markdown to HTML Converters](https://awesome-repositories.com/f/content-management-publishing/markdown-to-html-converters.md) — Transforms markdown plaintext markup into structured HTML for web display.
- [Secure Markdown Rendering](https://awesome-repositories.com/f/content-management-publishing/markdown-to-html-converters/secure-markdown-rendering.md) — Converts markdown to HTML while filtering tags and attributes to prevent malicious scripts in the browser.
- [Technical Documentation Editors](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/documentation-tooling/authoring-editing/technical-writing-tools/technical-documentation-editors.md) — Provides specialized editor features for mathematical notation, automated tables of contents, and code documentation.
- [Visual Markdown Editors](https://awesome-repositories.com/f/content-management-publishing/markdown-to-document-converters/visual-markdown-editors.md) — Provides a visual interface for markdown authoring with real-time rendering and a formatting toolbar.

### Part of an Awesome List

- [Vue Integrations](https://awesome-repositories.com/f/awesome-lists/devtools/vue-integrations.md) — Provides a fully featured markdown editing interface as a component for Vue projects.
- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Markdown editor based on Vue.
- [UI](https://awesome-repositories.com/f/awesome-lists/more/ui.md) — Listed in the “UI组件” section of the Awesome Github Vue awesome list.

### Development Tools & Productivity

- [Markdown Editing Modes](https://awesome-repositories.com/f/development-tools-productivity/text-editing-modes/markdown-editing-modes.md) — Allows users to compose text using markdown syntax with synchronized preview and layout options. ([source](https://github.com/hinesboy/mavoneditor#readme))

### Security & Cryptography

- [HTML Content Sanitization](https://awesome-repositories.com/f/security-cryptography/html-content-sanitization.md) — Processes generated HTML to remove potentially malicious scripts and tags to prevent XSS.

### Web Development

- [Vue Component Wrappers](https://awesome-repositories.com/f/web-development/vue-component-wrappers.md) — Wraps a markdown editor within a reactive Vue component to synchronize input state and rendered output.

### User Interface & Experience

- [Two-Way Data Bindings](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/two-way-data-bindings.md) — Synchronizes changes between the markdown text area and the HTML preview window in real-time.
- [Syntax Highlighting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting/syntax-highlighting.md) — Applies distinct colors to code blocks using customizable schemes to improve readability. ([source](https://github.com/hinesboy/mavoneditor#readme))
- [Syntax Highlighting Integrations](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighting-integrations.md) — Integrates third-party libraries to provide color-coded syntax highlighting within the editor.
- [Web-Based Document Editors](https://awesome-repositories.com/f/user-interface-experience/web-based-document-editors.md) — Offers a browser interface for composing text with toolbars, syntax highlighting, and automatic HTML conversion.