{"id":13821865,"url":"https://github.com/k55k32/markdown-it-editor","last_synced_at":"2026-01-16T06:03:19.058Z","repository":{"id":44981759,"uuid":"75051948","full_name":"k55k32/markdown-it-editor","owner":"k55k32","description":"a markdown rich text editor base on markdown-it and vue2","archived":false,"fork":false,"pushed_at":"2022-12-08T02:32:07.000Z","size":1267,"stargazers_count":61,"open_issues_count":11,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-05T08:09:56.732Z","etag":null,"topics":["editor","markdown-editor","rich","rich-edtor","vue-markdown-editor"],"latest_commit_sha":null,"homepage":"https://k55k32.github.io/markdown-it-editor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/k55k32.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-29T06:46:55.000Z","updated_at":"2022-11-05T05:09:15.000Z","dependencies_parsed_at":"2023-01-25T03:45:24.519Z","dependency_job_id":null,"html_url":"https://github.com/k55k32/markdown-it-editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k55k32%2Fmarkdown-it-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k55k32%2Fmarkdown-it-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k55k32%2Fmarkdown-it-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k55k32%2Fmarkdown-it-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k55k32","download_url":"https://codeload.github.com/k55k32/markdown-it-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225436322,"owners_count":17474120,"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-editor","rich","rich-edtor","vue-markdown-editor"],"created_at":"2024-08-04T08:01:31.557Z","updated_at":"2026-01-16T06:03:19.049Z","avatar_url":"https://github.com/k55k32.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# markdown-it-editor\n\n\u003e A Vue.js 2.0 Markdown Rich Text Editor [@Github](https:/github.com/k55k32/markdown-it-editor)\n\n![preview-image](https://k55k32.github.io/markdown-it-editor/readme/preview.jpg)\n\n## install\n```node\nnpm i markdown-it-editor -S\n```\n\n## Quick Start\nuse .vue template\n```html\n\u003ctemplate\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cmarkdown-editor v-model=\"content\"\u003e\u003c/markdown-editor\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { MarkdownEditor } from 'markdown-it-editor'\nimport hljs from 'highlightjs' // have to npm install highlight\nimport 'highlightjs/styles/github.css'  \n\nexport default {\n  components: { MarkdownEditor },\n  data () {\n    return {\n      content: 'hello world',\n      options: {\n        highlight (str, lang) { // you can add highlightjs plugin to highlight your code\n          if (lang \u0026\u0026 hljs.getLanguage(lang)) {\n            try {\n              return hljs.highlight(lang, str).value\n            } catch (__) {}\n          }\n          return ''\n        }\n      }\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"css\"\u003e\n#app{\n  width: 100vw;\n  height: 100vh;\n}\n\u003c/style\u003e\n```\nYou can also use that in native javascript. In this way you have to include vuejs [@Demo](http://md.diamondfsd.com/static/demo.html)\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003e\u003c/title\u003e\n    \u003c!-- markdown editor style --\u003e\n    \u003clink rel=\"stylesheet\" href=\"../lib/index.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\n      \u003cmarkdown-editor v-model=\"content\"\u003e\u003c/markdown-editor\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n  \u003c!-- vuejs --\u003e\n  \u003cscript src=\"//cdn.bootcss.com/vue/2.1.4/vue.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- markdown editor component --\u003e\n  \u003cscript src=\"../lib/index.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    var vue = new Vue({\n      el: '#app',\n      data: { content: '# hello world' }\n    })\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n\n## Component Attributes\n\n param | description | type | default\n ------- | ------------ | ---- | -----\n v-model | bind-textarea's values |  String  | null\n options | the markdown-it render options| Object | [see details](#attr-options)\n upload |  image upload config | Object | [see details](#attr-upload)\n z-index | when full screen the editor z-index style | number | 1\n height | editor height style | string,number| stirng: 50vh\n\n## Events\nall event if `return false`, the default function will not execute\n\nname | description | param\n--- | --- | ---\ncustom-upload | defautl upload function use html5's `window.FormData` implement.You can replace other implement | upload input's dom\nupload-success | default upload function success event  | the server return value like `xhr.responseText`\nupload-error | when the upload faild event | `XMLHttpRequest` object\nuploading | upload on progress event | ` { loaded: number, total: number }`\n\n\n## Params Default Value\n\u003ca  id=\"attr-options\"\u003e\u003c/a\u003e\n### options\n```javascript\n{\n    // markdown-it options @more-see\n    // https://github.com/markdown-it/markdown-it#init-with-presets-and-options\n    html:         true,        // Enable HTML tags in source\n    xhtmlOut:     false,        // Use '/' to close single tags (\u003cbr /\u003e).\n                                // This is only for full CommonMark compatibility.\n    breaks:       true,        // Convert '\\n' in paragraphs into \u003cbr\u003e\n    langPrefix:   'language-',  // CSS language prefix for fenced blocks. Can be\n                                // useful for external highlighters.\n    linkify:      false,        // Autoconvert URL-like text to links\n\n    // Enable some language-neutral replacement + quotes beautification\n    typographer:  false,\n\n    // Double + single quotes replacement pairs, when typographer enabled,\n    // and smartquotes on. Could be either a String or an Array.\n    //\n    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,\n    // and ['«\\xA0', '\\xA0»', '‹\\xA0', '\\xA0›'] for French (including nbsp).\n    quotes: '“”‘’',\n\n    // Highlighter function. Should return escaped HTML,\n    // or '' if the source string is not changed and should be escaped externaly.\n    // If result starts with \u003cpre... internal wrapper is skipped.\n    highlight: function (/*str, lang*/) { return ''; },\n\n    // Plugins. Should be an array of the plugin functions imported even if its just one plugin.\n    plugins: [require('markdown-it-anchor'), require('markdown-it-deflist')]\n}\n```\n\u003ca  id=\"attr-upload\"\u003e\u003c/a\u003e\n### upload\n\u003e allow you paste the image to the editor\n\n```javascript\n{\n    // defualt form upload name\n    name: 'file',  \n    // default upload accept  \n    // @like \u003cinput type = 'file' accept='image/jpg,image/jpeg,image/png'/\u003e\n    accept: 'image/jpg,image/jpeg,image/png',\n\n    // your  file upload url\n    //if url == null or other params 'false' the upload button will hidden\n    url: null, // your upload url\n\n    header: {'Authorization': 'you code'}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk55k32%2Fmarkdown-it-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk55k32%2Fmarkdown-it-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk55k32%2Fmarkdown-it-editor/lists"}