{"id":13535765,"url":"https://github.com/F-loat/vue-simplemde","last_synced_at":"2025-04-02T02:31:20.678Z","repository":{"id":37444861,"uuid":"77827411","full_name":"F-loat/vue-simplemde","owner":"F-loat","description":"📝 Vue SimpleMDE - use simplemde with vue.js","archived":false,"fork":false,"pushed_at":"2023-03-04T03:26:46.000Z","size":3106,"stargazers_count":769,"open_issues_count":10,"forks_count":114,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-04T08:02:51.413Z","etag":null,"topics":["editor","markdown","simplemde","vue"],"latest_commit_sha":null,"homepage":"https://F-loat.github.io/vue-simplemde/dist/demo.html","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/F-loat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-02T10:58:18.000Z","updated_at":"2024-02-21T08:44:29.000Z","dependencies_parsed_at":"2024-01-17T16:59:07.742Z","dependency_job_id":"f0d971d2-ab62-45d2-b2cd-aaf99146ea46","html_url":"https://github.com/F-loat/vue-simplemde","commit_stats":{"total_commits":95,"total_committers":7,"mean_commits":"13.571428571428571","dds":0.5263157894736843,"last_synced_commit":"aa134669c390677ea17e0ae7db462d85e83cfe09"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/F-loat%2Fvue-simplemde","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/F-loat%2Fvue-simplemde/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/F-loat%2Fvue-simplemde/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/F-loat%2Fvue-simplemde/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/F-loat","download_url":"https://codeload.github.com/F-loat/vue-simplemde/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246523873,"owners_count":20791444,"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":["editor","markdown","simplemde","vue"],"created_at":"2024-08-01T09:00:26.245Z","updated_at":"2025-04-02T02:31:20.637Z","avatar_url":"https://github.com/F-loat.png","language":"Vue","funding_links":[],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","降价","UI Components","Markdown"],"readme":"# Vue-SimpleMDE\n\u003e Markdown Editor component for Vue.js. Support only vue2.x.\n\n[![npm package](https://img.shields.io/npm/v/vue-simplemde.svg)](https://npmjs.org/package/vue-simplemde)\n[![npm downloads](http://img.shields.io/npm/dm/vue-simplemde.svg)](https://npmjs.org/package/vue-simplemde)\n\n# Use Setup\n\n\u003e No longer support Vue1.x, you can modify to use\n\n## Install\n\n``` bash\nnpm install vue-simplemde --save\n```\n\n## Use\n\n* Internal reference in a single component\n\n``` vue\n\u003ctemplate\u003e\n  \u003cvue-simplemde v-model=\"content\" ref=\"markdownEditor\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import VueSimplemde from 'vue-simplemde'\n\n  export default {\n    components: {\n      VueSimplemde\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  @import '~simplemde/dist/simplemde.min.css';\n\u003c/style\u003e\n```\n\n* Global reference\n\n``` javascript\nimport Vue from 'vue'\nimport VueSimplemde from 'vue-simplemde'\nimport 'simplemde/dist/simplemde.min.css'\n\nVue.component('vue-simplemde', VueSimplemde)\n```\n\n## Props\n| property | type | default | describe |\n| ----| ----- | ----- | ---- |\n| value | String | None | Initial value, v-model binding can be used |\n| name | String | None | The name of the control. |\n| preview-class | String | None | Custom preview style class |\n| autoinit | Boolean | true | Automatic initialization |\n| forceSync | Boolean | true | Sync value to simplemde each time |\n| highlight | Boolean | false | Is it open to highlight |\n| sanitize | Boolean | false | HTML that does not render input after opening |\n| configs | Object | {} | [SimpleMDE's config](#configuration) |\n| previewRender | Function | - | configs.previewRender |\n\n## Events\n\n| event | describe | arguments |\n| ----| ----- | ---- |\n| input | Triggered when the Input value changes | value |\n| blur | Triggered when the Input loses focus | value |\n| initialized | Triggered when initialization is complete | simplemde |\n\n## Methods\n\n``` js\nthis.$refs.markdownEditor.simplemde.togglePreview();\n```\n\n* [examples/index.vue](./examples/index.vue)\n\n* [simplemde.js](https://github.com/sparksuite/simplemde-markdown-editor/blob/6abda7ab68cc20f4aca870eb243747951b90ab04/src/js/simplemde.js#L1908-L2026)\n\n## Markdown style\n\u003e e.g. use Github's markdown style\n\n[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)\n\n### install\n``` bash\n$ npm install --save github-markdown-css\n```\n\n### use\n``` vue\n\u003ctemplate\u003e\n  \u003cvue-simplemde preview-class=\"markdown-body\" /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  @import '~simplemde/dist/simplemde.min.css';\n  @import '~github-markdown-css';\n\u003c/style\u003e\n```\n\n## Highlight\n\n### install\n```\n$ npm install --save highlight.js\n```\n\n### use\n``` vue\n\u003ctemplate\u003e\n  \u003cvue-simplemde :highlight=\"true\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import hljs from 'highlight.js';\n\n  window.hljs = hljs;\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  @import '~simplemde/dist/simplemde.min.css';\n  @import '~highlight.js/styles/atom-one-dark.css';\n  /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */\n\u003c/style\u003e\n```\n\n## Editor Theme ([simplemde-theme-base](https://github.com/xcatliu/simplemde-theme-base/wiki/List-of-themes))\n\u003e e.g. use simplemde-theme-base theme\n\n### install\n```\n$ npm install --save simplemde-theme-base\n```\n\n### use\n``` vue\n\u003cstyle\u003e\n  @import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';\n  /* no need import simplemde.min.css */\n\u003c/style\u003e\n```\n\n### e.g.\n\n[Dark Theme](https://github.com/xcatliu/simplemde-theme-dark)\n\n![Screenshot of SimpleMDE Theme Dark](https://github.com/xcatliu/simplemde-theme-dark/raw/master/docs/screenshot.png)\n\n## Configuration\n\u003e SimpleMD's config\n\n* [中文](doc/configuration_zh.md)\n* [English](doc/configuration_en.md)\n\n## Examples\n\n* [Simple Example](./examples/index.vue)\n* [Nuxt Example](./examples/nuxt)\n* [Demo Page](https://f-loat.github.io/vue-simplemde/)\n* [Demo Source](https://github.com/F-loat/vue-simplemde/tree/gh-pages)\n\n## Dependencies\n\n* [SimpleMDE](https://github.com/sparksuite/simplemde-markdown-editor)\n\n## Licence\n\nvue-simplemde is open source and released under the MIT Licence.\n\nCopyright (c) 2022 F-loat\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FF-loat%2Fvue-simplemde","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FF-loat%2Fvue-simplemde","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FF-loat%2Fvue-simplemde/lists"}