{"id":15697,"library":"mavon-editor","title":"Mavon Editor","description":"Mavon Editor is a versatile Vue-based Markdown editor component designed for rich text editing with Markdown syntax. It officially supports Vue 2 up to version 2.10.4 and Vue 3 from version 3.0.0 onwards, offering a consistent API across major Vue versions. The project maintains an active release cadence, frequently delivering updates, bug fixes, and security enhancements. Key features include integrated image upload capabilities, full-screen editing mode, theme support, and robust XSS protection (significantly improved in v2.10.x). Its primary differentiators are its comprehensive dual support for both Vue 2 and Vue 3 ecosystems, along with its strong focus on security, making it a reliable plug-and-play component for Markdown editing needs in Vue applications.","status":"active","version":"2.10.4","language":"javascript","source_language":"en","source_url":"https://github.com/hinesboy/mavonEditor","tags":["javascript","vue","markdown","editor","html","typescript"],"install":[{"cmd":"npm install mavon-editor","lang":"bash","label":"npm"},{"cmd":"yarn add mavon-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add mavon-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Mavon Editor is a Vue component and requires Vue as a peer dependency. Version 2.x of mavon-editor requires Vue 2, while version 3.x requires Vue 3.","package":"vue","optional":false}],"imports":[{"note":"The `mavon-editor` package provides a default export, which is a Vue plugin (compatible with both Vue 2 and Vue 3). This plugin is intended for global registration via `app.use()` (Vue 3) or `Vue.use()` (Vue 2) to make the `` component available throughout your application. Using named imports for the plugin will result in an error.","wrong":"import { mavonEditor } from 'mavon-editor';\n// Or for CommonJS in environments where default interop fails:\n// const mavonEditor = require('mavon-editor');","symbol":"mavonEditor (Vue plugin)","correct":"import mavonEditor from 'mavon-editor';"},{"note":"This CSS import is absolutely essential for the editor's visual appearance and proper layout. It must be included in your application's entry point or any component where the editor is utilized to ensure correct styling.","symbol":"Mavon Editor Styles","correct":"import 'mavon-editor/dist/css/index.css';"},{"note":"For TypeScript users, importing the `Config` type provides strong typing for the editor's various properties and options, enabling better type safety and autocompletion when configuring the component.","symbol":"Configuration Types","correct":"import type { Config } from 'mavon-editor';"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport mavonEditor from 'mavon-editor';\nimport 'mavon-editor/dist/css/index.css';\n\nconst app = createApp({\n template: `\n
\n

My Vue 3 Markdown App

\n \n
\n

Rendered HTML Preview:

\n
\n
\n
\n `,\n setup() {\n const markdownContent = ref('# Hello Mavon Editor\\n\\nThis is a **Vue 3** markdown editor instance.\\n\\n```typescript\\nconst message: string = \"Hello World!\";\\nconsole.log(message);\\n```\\n\\nYou can easily write Markdown, preview it, and even upload images.\\n\\nThis text is red.');\n const htmlContent = ref('');\n\n const onEditorChange = (markdown, html) => {\n console.log('Markdown changed:', markdown);\n htmlContent.value = html;\n };\n\n const onImageAdd = (pos, $file) => {\n // Implement image upload logic here\n console.log(`Image at position ${pos} added:`, $file.name);\n // Example: Upload to server and replace markdown with uploaded URL\n // editor.$img2Url(pos, 'http://example.com/your-uploaded-image.png');\n };\n\n return { markdownContent, htmlContent, onEditorChange, onImageAdd };\n }\n});\n\napp.use(mavonEditor);\napp.mount('#app');","lang":"typescript","description":"Demonstrates global registration of Mavon Editor as a Vue 3 plugin and its usage within a root component. It showcases two-way data binding with `v-model`, basic configuration props, and event handling for markdown and HTML output, including a placeholder for image upload."},"warnings":[{"fix":"For Vue 2 projects, explicitly install `mavon-editor@2` (e.g., `npm install mavon-editor@2`). For Vue 3 projects, install the latest version, typically `npm install mavon-editor@latest`.","message":"Version 3.0.0 of Mavon Editor introduced official support for Vue 3, making it fundamentally incompatible with Vue 2 applications. Projects built with Vue 2 must continue using the v2.x branch (e.g., v2.10.4) or undertake a full migration to Vue 3 to utilize v3.x.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If custom HTML attributes or specific tags are necessary, configure the `xssOptions.whiteList` property in the editor's options to explicitly permit them (e.g., `{ whiteList: { span: ['style'] } }`). For maximum security, consider setting `html: false` if raw HTML embedding is not a core requirement.","message":"Starting from v2.10.0, XSS defense mechanisms are enabled by default. This change filters attributes of all HTML tags within the Markdown output, which may inadvertently remove valid styling (e.g., `style=\"...\"`) or other HTML attributes if not explicitly whitelisted. The `html` option also defaults to `true`; however, setting it to `false` is recommended if direct HTML tag rendering is not explicitly required to enhance security.","severity":"breaking","affected_versions":">=2.10.0"},{"fix":"Always use a default import for the plugin: `import mavonEditor from 'mavon-editor';`.","message":"The `mavon-editor` package exports a default plugin object for global use, not a named component. Attempting to import the component using named imports (e.g., `import { mavonEditor } from 'mavon-editor';`) will result in an `undefined` module or component resolution error.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure that `import 'mavon-editor/dist/css/index.css';` is included in your main application entry file (e.g., `main.js` or `main.ts`) or within the root component where Mavon Editor is used.","message":"The editor's visual appearance is entirely dependent on its associated CSS. Neglecting to import the necessary CSS file will lead to an unstyled, broken, or poorly rendered editor component on your page.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Verify that you have correctly imported the `mavonEditor` plugin (default import) and then registered it globally using `app.use(mavonEditor)` (for Vue 3) or `Vue.use(mavonEditor)` (for Vue 2) in your application's entry point.","cause":"The Mavon Editor component has not been properly registered with your Vue application, or Vue cannot find its definition.","error":"[Vue warn]: Failed to resolve component: mavon-editor"},{"fix":"Ensure you are using a default import for the plugin: `import mavonEditor from 'mavon-editor';`. If using CommonJS, confirm `const mavonEditor = require('mavon-editor');` (or `require('mavon-editor').default` in some interop cases) correctly provides the plugin object.","cause":"This typically occurs when `mavonEditor` was imported incorrectly as a named export instead of a default export, or if a CommonJS `require` statement was used in an ESM context and didn't resolve the default export correctly.","error":"TypeError: mavonEditor is not a function (when calling `app.use(mavonEditor)` or `Vue.use(mavonEditor)`)"},{"fix":"In your editor's configuration options, specify the `xssOptions.whiteList` property to explicitly allow the HTML tags and attributes you need. For example, to allow `style` on `` tags: `{ xssOptions: { whiteList: { span: ['style'] } } }`.","cause":"The default XSS protection, introduced in v2.10.0, is actively filtering out HTML attributes or tags that are not explicitly whitelisted.","error":"My custom HTML styles (e.g., `style=\"color: red;\"`) or certain HTML attributes are being removed from the Markdown output."}],"ecosystem":"npm"}