{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install mavon-editor"],"cli":null},"imports":["import mavonEditor from 'mavon-editor';","import 'mavon-editor/dist/css/index.css';","import type { Config } from 'mavon-editor';"],"auth":{"required":false,"env_vars":[]},"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    <div id=\"app\" style=\"padding: 20px;\">\n      <h1>My Vue 3 Markdown App</h1>\n      <mavon-editor\n        v-model=\"markdownContent\"\n        :toolbarsFlag=\"true\"\n        :subfield=\"true\"\n        :boxShadow=\"true\"\n        style=\"height: 500px;\"\n        @change=\"onEditorChange\"\n        @imgAdd=\"onImageAdd\"\n      />\n      <div style=\"margin-top: 20px;\">\n        <h3>Rendered HTML Preview:</h3>\n        <div v-html=\"htmlContent\" style=\"border: 1px solid #ccc; padding: 10px;\"></div>\n      </div>\n    </div>\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\\n<span style=\"color: red;\">This text is red.</span>');\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}