{"id":15130894,"url":"https://github.com/mrdaano/vue-md-editor","last_synced_at":"2025-10-23T07:30:44.596Z","repository":{"id":128545889,"uuid":"249999479","full_name":"mrdaano/vue-md-editor","owner":"mrdaano","description":"Basic markdown editor made for Vue, based on Bootstrap and Font Awesome","archived":false,"fork":false,"pushed_at":"2022-01-15T02:19:03.000Z","size":30,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T17:39:56.121Z","etag":null,"topics":["bootstrap","markdown","markdown-editor","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrdaano.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-25T14:23:03.000Z","updated_at":"2025-01-14T12:10:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"dc6b8c08-f6b0-4142-91a4-bab5385f9c7c","html_url":"https://github.com/mrdaano/vue-md-editor","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"84c37e5f32369f2894766c4fe20a24bbbcdebe07"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrdaano%2Fvue-md-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrdaano%2Fvue-md-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrdaano%2Fvue-md-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrdaano%2Fvue-md-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrdaano","download_url":"https://codeload.github.com/mrdaano/vue-md-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237793932,"owners_count":19367422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","markdown","markdown-editor","vue","vuejs"],"created_at":"2024-09-26T03:08:01.499Z","updated_at":"2025-10-23T07:30:44.267Z","avatar_url":"https://github.com/mrdaano.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue markdown editor\nThis is a basic markdown editor made for Vue, based on Bootstrap and Font Awesome.\n\n## Example\nYou can find a example on [Codesandbox](https://codesandbox.io/s/github/mrdaano/vue-md-editor-example) or on [GitHub](https://github.com/mrdaano/vue-md-editor-example)\n\n## Pre requirements\n- Install [Font Awesome](https://fontawesome.com/) for the toolbar icons.\n- If you want you can install [Bootstrap](https://getbootstrap.com/) or do the styling by yourself.\n\n## Installation\nFirst install this package via npm or yarn:\n```\nnpm i vue-simple-md-editor or yarn install vue-simple-md-editor\n```\nAnd then simply add in your Vue setup script:\n```javascript\nimport mdEditor from 'vue-md-editor';\nimport Vue from 'vue';\n\nVue.use(mdEditor);\n```\n## Usage and examples\nNow you can use the markdown editor in your Vue container or components. You can use it with or without ``v-model``.\n### Basic usage\n```html\n\u003ctemplate\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cmd-editor v-model=\"value\"\u003e\u003c/md-editor\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        data() {\n            return {\n                value: '#Hello world!'\n            }\n        }\n    }\n\u003c/script\u003e\n```\n### Custom toolbar button(s)\nThere is also the option to add your own toolbar buttons via the prop ``custombuttons`` as an array of button objects. Each button has the following properties:\n\n| Property | Default | Description|\n|----------|---------|------------|\n|``label`` | null    | The name of the button|\n|``key``   | null    | This is used in the event |\n|``icon``  | null    | Which Font Awesome icon |\n|``group`` | custom  | In which group should the button be (basic, advanced, custom or other ) |\n\nWhen the button is clicked, an event is fired prefixed with ``insert:`` and after that the key. At this moment you can use 3 functions in your event callback. You can find an example here below.\n\n| Function | Params |\n|----------|--------|\n| ``insertBlock`` | start, end (default: start) |\n| ``insertImage`` | altText, src |\n| ``insertLink`` | title, link |\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cmd-editor ref=\"editor\" v-model=\"value\" :custombuttons=\"buttons\"\u003e\u003c/md-editor\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        data() {\n            return {\n                value: '#Hello world!',\n                buttons: [\n                        {\n                            label: 'Insert a cat',\n                            key: 'cat',\n                            icon: 'fas fa-cat',\n                            group: 'advanced'\n                        }\n                    ]\n            }\n        },\n        mounted() {\n          this.$refs.editor.$on('insert:cat', (editor) =\u003e {\n              editor.insertImage('Cat image', 'http://placekitten.com/100/100');\n          });\n        }\n    }\n\u003c/script\u003e\n```\n### All available Props\n| Prop | Default | Description |\n|------|---------|-------------|\n| ``custombuttons`` | [] | An array with objects to add custom button(s) to the toolbar. See example above. |\n| ``disabledbuttons`` | [] | An array of button keys of which button need to be removed from the toolbar. |\n### Styling\nThe styling of this plugin is based on Bootstrap and the icons are from Font Awesome. But this plugin also uses custom classes so you can easily change the styling.\nAll custom classes are prefixed with ``.md-editor-*``. Below you will find an overview of all classes.\n\n| Class                  | Description                                                                       |\n|------------------------|-----------------------------------------------------------------------------------|\n|``.md-editor-container``| The container surrounding the whole editor.                                       |\n|``.md-editor-toolbar``  | Toolbar containing all buttons.                                                   |\n|``.md-editor-editor``   | The editor area itself.                                                           |\n|``.md-editor-preview``  | When you click on preview button this area shows up containing a rendered preview.|\n\n## Requested features\nThe requested features below will be implemented soon.\n- Rearrange toolbar\n- Support for keyboard shortcuts\n- Inline syntax highlighting\n- Side by side (editor and preview)\n- Autosave feature\n\nDo you have a feature request? Let us know via an [issue](https://github.com/mrdaano/vue-md-editor/issues)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrdaano%2Fvue-md-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrdaano%2Fvue-md-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrdaano%2Fvue-md-editor/lists"}