{"id":24211416,"url":"https://github.com/chinacarlos/web-markdon-editor","last_synced_at":"2026-03-05T09:31:22.736Z","repository":{"id":41645253,"uuid":"262963053","full_name":"ChinaCarlos/web-markdon-editor","owner":"ChinaCarlos","description":"web-markdon-editor","archived":false,"fork":false,"pushed_at":"2022-12-12T18:09:50.000Z","size":10171,"stargazers_count":0,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T16:21:51.002Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ChinaCarlos.png","metadata":{"files":{"readme":"README-EN.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}},"created_at":"2020-05-11T06:54:56.000Z","updated_at":"2020-05-11T11:28:54.000Z","dependencies_parsed_at":"2023-01-27T23:15:55.813Z","dependency_job_id":null,"html_url":"https://github.com/ChinaCarlos/web-markdon-editor","commit_stats":null,"previous_names":["chinacarlos/web-markdon-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ChinaCarlos/web-markdon-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Fweb-markdon-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Fweb-markdon-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Fweb-markdon-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Fweb-markdon-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChinaCarlos","download_url":"https://codeload.github.com/ChinaCarlos/web-markdon-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Fweb-markdon-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30117678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T08:19:04.902Z","status":"ssl_error","status_checked_at":"2026-03-05T08:17:37.148Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-01-14T02:35:13.127Z","updated_at":"2026-03-05T09:31:22.708Z","avatar_url":"https://github.com/ChinaCarlos.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mavonEditor\r\n![npm](https://nodei.co/npm/mavon-editor.png?downloads=true\u0026downloadRank=true\u0026stars=true)\r\n\r\n\u003e A markdown editor based on Vue\r\n\r\n### [中文说明](./README.md)\r\n\r\n## Example Pictures\r\n### PC\r\n\r\n![PC](./img/en/en-common.png)\r\n\r\n![PC](./img/en/en-image.gif)\r\n\r\n\u003e [more images...](./doc/en/images.md)\r\n\r\n## Use Setup\r\n\r\n### Install mavon-editor\r\n```\r\n$ npm install mavon-editor --save\r\n```\r\n\r\n### Use\r\n\r\n`index.js`:\r\n```javascript\r\n    // Global Registration\r\n    // import with ES6\r\n    import Vue from 'vue'\r\n    import mavonEditor from 'mavon-editor'\r\n    import 'mavon-editor/dist/css/index.css'\r\n\r\n    // use\r\n    Vue.use(mavonEditor)\r\n    new Vue({\r\n        'el': '#main',\r\n        data() {\r\n            return { value: '' }\r\n        }\r\n    })\r\n```\r\n`index.html`\r\n```html\r\n// The same below\r\n\u003cdiv id=\"main\"\u003e\r\n    \u003cmavon-editor v-model=\"value\"/\u003e\r\n\u003c/div\u003e\r\n```\r\n### Use in nuxt.js\r\n\u003e new file: vue-mavon-editor.js\r\n``` javascrpt\r\nimport Vue from 'vue';\r\nimport mavonEditor from 'mavon-editor';\r\nimport 'mavon-editor/dist/css/index.css';\r\n\r\nVue.use(mavonEditor);\r\n```\r\n\u003e nuxt.config.js\r\n``` javascript\r\n  plugins: [\r\n  ...\r\n    { src: '@/plugins/vue-mavon-editor', ssr: false }\r\n  ],\r\n```\r\n\u003e page\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cdiv class=\"mavonEditor\"\u003e\r\n    \u003cno-ssr\u003e\r\n      \u003cmavon-editor :toolbars=\"markdownOption\" v-model=\"handbook\"/\u003e\r\n    \u003c/no-ssr\u003e\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nexport default {\r\n  data() {\r\n    return {\r\n      markdownOption: {\r\n        bold: true,\r\n        ... // more params\r\n      },\r\n      handbook: \"#### how to use mavonEditor in nuxt.js\"\r\n    };\r\n  }\r\n};\r\n\u003c/script\u003e\r\n\r\n\u003cstyle scoped\u003e\r\n.mavonEditor {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\u003c/style\u003e\r\n\r\n```\r\n\r\n\u003e [more ways...](./doc/en/use.md)\r\n\r\n\u003e [set markdown-it object...](./doc/en/markdown.md)\r\n\r\n## API\r\n\r\n### props\r\n\r\n| name    | type    |  default value | describe  |\r\n| -------- | :---------: | :------------: | ------- |\r\n| value      | String      |               | Initial value |\r\n| language   | String      |      zh-CN         | Language switch,  zh-CN: Simplified Chinese, zh-TW: Traditional Chinese, en: English， fr: French, pt-BR: Brazilian Portuguese, ru: Russian, de: German, ja: Japanese |\r\n| fontSize     | String  |     14px      | font-size of edit area  |\r\n| scrollStyle| Boolean     |   true       | Open the scroll bar style(Temp only support chrome) |\r\n| boxShadow     | Boolean  |     true     | css: box-shadow  of mavonEditor              |\r\n| subfield   | Boolean     |   true        | true: Double columns - Edit preview same screen , Single Columns - otherwise not |\r\n| defaultOpen | String |         | edit: default show edit area , preview: default show preview area  , other = edit |\r\n| placeholder | String |    Begin editing...     |  The default prompt text when the textarea is empty  |\r\n| editable | Boolean     |   true       | Edit switch |\r\n| codeStyle | String |    code-github     | markdown Style: default github, [option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js)  |\r\n| toolbarsFlag | Boolean     |   true       | Show toolbars |\r\n| navigation | Boolean |    false    |  Show navigation  |\r\n| shortCut | Boolean |    true    |  shortcut switch  |\r\n| ishljs       | Boolean |     true     | highlight code switch |\r\n| imageFilter | Function |     null     | Image file filter Function, params is a `File Object`, you should return `Boolean` about the test result |\r\n| imageClick | function |     null     |  Image Click Function |\r\n| tabSize | Number |     null     |  How many spaces equals one tab, default \\t |\r\n| xssOptions     | Object  |     null     | xss options: [https://github.com/leizongmin/js-xss](https://github.com/leizongmin/js-xss)                    |\r\n| toolbars   | Object      |   As in the following example  | toolbars |\r\n\r\n```javascript\r\n /*\r\n    The default toolbar properties are all true,\r\n    You can customize the object to cover them.\r\n    eg: {\r\n         bold: true,\r\n         italic: true,\r\n         header: true,\r\n    }\r\n    At this point, the toolbar only displays the three function keys.\r\n */\r\ntoolbars: {\r\n      bold: true,\r\n      italic: true,\r\n      header: true,\r\n      underline: true,\r\n      strikethrough: true,\r\n      mark: true,\r\n      superscript: true,\r\n      subscript: true,\r\n      quote: true,\r\n      ol: true,\r\n      ul: true,\r\n      link: true,\r\n      imagelink: true,\r\n      code: true,\r\n      table: true,\r\n      fullscreen: true,\r\n      readmodel: true,\r\n      htmlcode: true,\r\n      help: true,\r\n      /* 1.3.5 */\r\n      undo: true,\r\n      redo: true,\r\n      trash: true,\r\n      save: true,\r\n      /* 1.4.2 */\r\n      navigation: true,\r\n      /* 2.1.8 */\r\n      alignleft: true,\r\n      aligncenter: true,\r\n      alignright: true,\r\n      /* 2.2.1 */\r\n      subfield: true,\r\n      preview: true\r\n  }\r\n```\r\n### events\r\n\r\n| name   | params   | describe|\r\n| -------- | :---------: | ------- |\r\n| change   | String: value , String: reder    |  Edit area change callback event (render: Html source code) |\r\n| save     | String: value , String: reder     |  Ctrl+s and click save button |\r\n| fullScreen | Boolean: status , String: value     |  Fullscreen editing toggle callback event(boolean: Fullscreen status) |\r\n| readModel |  Boolean: status , String: value    |  Reading mode toggle callback event(boolean: Reading mode status) |\r\n| htmlCode | Boolean: status , String: value     |Html code mode toggle callback event(boolean: status) |\r\n| subfieldToggle  |  Boolean: status , String: value     |  Double columns edit mode toggle callback event(boolean: double columns status) |\r\n| previewToggle   | Boolean: status , String: value | Preview \u0026 Edit toggle callback event(boolean: preview status)            |\r\n| helpToggle | Boolean: status , String: value   |  Help-me toggle callback event(boolean: help status) |\r\n| navigationToggle | Boolean: status , String: value   |  Navigation mode toggle callback event(boolean: nav status) |\r\n| imgAdd | String: filename, File: imgfile |  Add image file callback event(filename: write in origin md, File: File Object) |\r\n| imgDel | String: filename |  Delete image file callback event(filename: write in origin md) |\r\n\r\n#### Hightlight\r\n\r\n\u003e If you do not need code highlighting, you need set ishljs to false\r\n\r\nSet ishljs = true\r\n```javascript\r\n    // default value is true\r\n    \u003cmavon-editor :ishljs = \"true\"\u003e\u003c/mavon-editor\u003e\r\n```\r\nFor optimize the size of pack, since **v2.4.2**, the following files will default to using `cdnjs` outside the chain:\r\n + `highlight.js`\r\n + `github-markdown-css`\r\n + `katex`(**v2.4.7**)\r\n\r\nThe language parsing files and code highlighting in Code Highlighting `highlight.js` will be loaded on demand.\r\n`github-markdown-css` and` katex` will load only when mounted.\r\n\r\n**Notice**:\r\n[Option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js) and [Supported language](./src/lib/core/hljs/lang.hljs.js) is export from [highlight.js/9.12.0](https://github.com/isagalaev/highlight.js/tree/master/src)\r\n\r\n\u003e [without cdn, Click here to local on-demand loading...](./doc/en/no-cnd.md)\r\n\r\n\r\n#### Upload images\r\n\r\n```javascript\r\n\u003ctemplate\u003e\r\n    \u003cmavon-editor ref=md @imgAdd=\"$imgAdd\" @imgDel=\"$imgDel\"\u003e\u003c/mavon-editor\u003e\r\n\u003c/template\u003e\r\nexports default {\r\n    methods: {\r\n        // bind @imgAdd event\r\n        $imgAdd(pos, $file){\r\n            // step 1. upload image to server.\r\n           var formdata = new FormData();\r\n           formdata.append('image', $file);\r\n           axios({\r\n               url: 'server url',\r\n               method: 'post',\r\n               data: formdata,\r\n               headers: { 'Content-Type': 'multipart/form-data' },\r\n           }).then((url) =\u003e {\r\n               // step 2. replace url ![...](0) -\u003e ![...](url)\r\n               $vm.$img2Url(pos, url);\r\n           })\r\n        }\r\n    }\r\n}\r\n```\r\n\u003e [more info about upload images ...](./doc/en/upload-images.md)\r\n\r\n### Note\r\n\r\n- **Default size: min-height: 300px , min-width: 300px , Can be covered**\r\n- **z-index: 1500**\r\n- **Just for show html of md: toolbarsFlag: false , subfield: false, defaultOpen: \"preview\"**\r\n\r\n### keyboard shortcuts\r\n\r\n| key       | keycode  |       fun          |\r\n| ---------------- | :----------------: | :-----------------------------: |\r\n| F8           | 119 |  toggle navigation  |\r\n| F9           | 120   |  toggle [edit/preview]  |\r\n| F10     | 121   | toggle fullscreen |\r\n| F11      | 122   | toggle readModel |\r\n| F12       | 123   | toggle [double columns / single column] |\r\n| TAB  | 9  | \\t |\r\n| CTRL + S    | 17 + 83 | @save |\r\n| CTRL + D    | 17 + 68 | remove selected lines |\r\n| CTRL + Z    | 17 + 90 | prev step |\r\n| CTRL + Y    | 17 + 89 | next step |\r\n| CTRL + BreakSpace    | 17 + 8 | trash |\r\n| CTRL + B       | 17 + 66 | **Bold** |\r\n| CTRL + I | 17 + 73 | *Italic* |\r\n| CTRL + H       | 17 + 72 | # Header |\r\n| CTRL + U    | 17 + 85 | ++Underline++ |\r\n| CTRL + M    | 17 + 77 | ==Mark== |\r\n| CTRL + Q    | 17 + 81 | \u003e Quote |\r\n| CTRL + O    | 17 + 79 | 1. OL |\r\n| CTRL + L    | 17 + 76 | [link]() |\r\n| CTRL + ALT + S    | 17 + 18 + 83 | ^Superscript^ |\r\n| CTRL + ALT + U    | 17 + 18 + 85 | - UL |\r\n| CTRL + ALT + C    | 17 + 18 + 67 | ``` Code |\r\n| CTRL + ALT + L    | 17 + 18 + 76 | ![Image Link]() |\r\n| CTRL + ALT + T    | 17 + 18 + 84 | Table |\r\n| CTRL + SHIFT + S    | 17 + 16 + 83 | ~Subscript~ |\r\n| CTRL + SHIFT + D    | 17 + 16 + 68 | ~~Strikethrough~~ |\r\n| CTRL + SHIFT + C    | 17 + 16 + 67 | align center |\r\n| CTRL + SHIFT + L    | 17 + 16 + 76 | align left |\r\n| CTRL + SHIFT + R    | 17 + 16 + 82 | align right |\r\n| SHIFT + TAB    | 16 + 9 | remove \\t |\r\n\r\n## Dependencies\r\n- [markdown-it](https://github.com/markdown-it/markdown-it)\r\n\r\n- [auto-textarea](https://github.com/hinesboy/auto-textarea)\r\n\r\n## Syntax extensions\r\n\r\n- [emoji](https://github.com/markdown-it/markdown-it-emoji)\r\n- [subscript](https://github.com/markdown-it/markdown-it-sub)\r\n- [superscript](https://github.com/markdown-it/markdown-it-sup)\r\n- [container](https://github.com/markdown-it/markdown-it-container)\r\n- [definition list](https://github.com/markdown-it/markdown-it-deflist)\r\n- [abbreviation](https://github.com/markdown-it/markdown-it-abbr)\r\n- [footnote](https://github.com/markdown-it/markdown-it-footnote)\r\n- [insert](https://github.com/markdown-it/markdown-it-ins)\r\n- [mark](https://github.com/markdown-it/markdown-it-mark)\r\n- [todo list](https://github.com/revin/markdown-it-task-lists)\r\n- [highlight](https://github.com/isagalaev/highlight.js)\r\n- [katex](https://github.com/Khan/KaTeX)\r\n- [images preview](https://github.com/CHENXCHEN/markdown-it-images-preview)\r\n- [toc](https://github.com/tylerlong/markdown-it-toc)\r\n- 可通过获取[markdown-it](./doc/cn/markdown.md)对象引入[其他语法插件](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)\r\n\r\n## Collaborators\r\n\r\n- [CHENXCHEN](https://github.com/CHENXCHEN)\r\n\r\n## Licence\r\n\r\nmavonEditor is open source and released under the MIT Licence.\r\n\r\nCopyright (c) 2017 hinesboy\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinacarlos%2Fweb-markdon-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinacarlos%2Fweb-markdon-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinacarlos%2Fweb-markdon-editor/lists"}