{"id":13419969,"url":"https://github.com/hinesboy/mavonEditor","last_synced_at":"2025-03-15T06:31:00.596Z","repository":{"id":37285109,"uuid":"87947354","full_name":"hinesboy/mavonEditor","owner":"hinesboy","description":"mavonEditor - A markdown editor based on Vue that supports a variety of personalized features","archived":false,"fork":false,"pushed_at":"2025-03-05T09:30:29.000Z","size":20344,"stargazers_count":6495,"open_issues_count":373,"forks_count":916,"subscribers_count":84,"default_branch":"master","last_synced_at":"2025-03-11T03:50:02.119Z","etag":null,"topics":["editor","html","javascript","markdown","vue","webpack"],"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/hinesboy.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-11T14:59:22.000Z","updated_at":"2025-03-10T09:52:50.000Z","dependencies_parsed_at":"2022-07-12T10:02:44.461Z","dependency_job_id":"1581bd59-a255-48f9-a04e-dbfc1a6c0073","html_url":"https://github.com/hinesboy/mavonEditor","commit_stats":{"total_commits":446,"total_committers":47,"mean_commits":9.48936170212766,"dds":0.5874439461883407,"last_synced_commit":"2f938f2affd1f4278d35946721a7b7c9251e550b"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hinesboy%2FmavonEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hinesboy%2FmavonEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hinesboy%2FmavonEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hinesboy%2FmavonEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hinesboy","download_url":"https://codeload.github.com/hinesboy/mavonEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243694923,"owners_count":20332619,"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","html","javascript","markdown","vue","webpack"],"created_at":"2024-07-30T22:01:23.612Z","updated_at":"2025-03-15T06:31:00.589Z","avatar_url":"https://github.com/hinesboy.png","language":"Vue","funding_links":[],"categories":["Vue","Markdown editor","UI组件","语言资源库","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["JavaScript","降价","UI Components","Markdown"],"readme":"# mavonEditor\r\n| Vue2 | [![npm](https://img.shields.io/npm/v/mavon-editor/latest.svg)](https://www.npmjs.com/package/mavon-editor/v/latest) |\r\n| ---- | ------------------------------------------------------------ |\r\n| **Vue3** | [![npm](https://img.shields.io/npm/v/mavon-editor/next.svg)](https://www.npmjs.com/package/mavon-editor/v/next) |\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\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 |         |Default display area in single columns (subfield=false).\u003cbr/\u003e  edit: default show edit area\u003cbr/\u003e  preview: default show preview area\u003cbr/\u003e  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| html    | Boolean  |     true     |  Enable HTML tags in source, for historical reasons this tag has always been true by default, but it is recommended to turn it off if you don't need this feature, as doing so it eliminates the security vulnerabilities altogether. |\r\n| xssOptions     | Object  |     {}     | xss rules configuration, enabled by default, set to false to turn off, enabled will filter HTML tags, the default filter all HTML tag attributes, it is recommended to configure the whitelist on demand to reduce the possibility of being attacked.\u003cbr/\u003e - custom rule reference: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)\u003cbr/\u003e- Demo: [dev-demo](./src/dev/editor.vue)                    |\r\n| toolbars   | Object      |   As in the following example  | toolbars |\r\n\r\n#### toolbars\r\nThe default toolbar properties are all true, You can customize the object to cover them.\r\n```javascript\r\n /*\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\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\r\nIf you need to customize and add toolbar buttons, you can do the following:\r\n```vue\r\n\u003cmavon-editor\u003e\r\n  \u003c!-- Add a custom button in front of the left toolbar --\u003e\r\n  \u003ctemplate slot=\"left-toolbar-before\"\u003e\r\n    \u003cbutton\r\n      type=\"button\"\r\n      @click=\"$click('test')\"\r\n      class=\"op-icon fa fa-mavon-align-left\"\r\n      aria-hidden=\"true\"\r\n      title=\"custom\"\r\n    \u003e\u003c/button\u003e\r\n  \u003c/template\u003e\r\n  \u003c!-- Add a custom button after the left toolbar  --\u003e\r\n  \u003ctemplate slot=\"left-toolbar-after\"\u003e\r\n    \u003cbutton\r\n      type=\"button\"\r\n      @click=\"$click('test')\"\r\n      class=\"op-icon fa fa-mavon-align-left\"\r\n      aria-hidden=\"true\"\r\n      title=\"custom\"\r\n    \u003e\u003c/button\u003e\r\n  \u003c/template\u003e\r\n  \u003c!-- Add a custom button in front of the right toolbar  --\u003e\r\n  \u003ctemplate slot=\"right-toolbar-before\"\u003e\r\n    \u003cbutton\r\n      type=\"button\"\r\n      @click=\"$click('test')\"\r\n      class=\"op-icon fa fa-mavon-align-left\"\r\n      aria-hidden=\"true\"\r\n      title=\"custom\"\r\n    \u003e\u003c/button\u003e\r\n  \u003c/template\u003e\r\n  \u003c!-- Add a custom button behind the right toolbar  --\u003e\r\n  \u003ctemplate slot=\"right-toolbar-after\"\u003e\r\n    \u003cbutton\r\n      type=\"button\"\r\n      @click=\"$click('test')\"\r\n      class=\"op-icon fa fa-mavon-align-left\"\r\n      aria-hidden=\"true\"\r\n      title=\"custom\"\r\n    \u003e\u003c/button\u003e\r\n  \u003c/template\u003e\r\n\u003c/mavon-editor\u003e\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 |  Number: pos, [File](https://developer.mozilla.org/en-US/docs/Web/API/File): imgfile |  Add image file callback event(pos: position in the list of images, File: File Object) |\r\n| imgDel | Array(2):[Number: pos,[File](https://developer.mozilla.org/en-US/docs/Web/API/File):imgfile ]  |  Delete image file callback event(Array(2): An array of length 2,the first is `pos`: position in the list of images, the second is `file`: File Object) |\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```vue\r\n    \u003c!-- default value is true --\u003e\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```vue\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\n\u003cscript\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\u003c/script\u003e\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 title\\](Link url) |\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 block |\r\n| CTRL + ALT + L    | 17 + 18 + 76 | \\!\\[Image title\\](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\u003e 可通过获取[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- [ygj6](https://github.com/ygj6)\r\n- [yukaige](https://github.com/yukaige)\r\n\r\n## License\r\n\r\nmavonEditor is open source and released under the MIT License.\r\n\r\nCopyright (c) 2017 hinesboy\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhinesboy%2FmavonEditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhinesboy%2FmavonEditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhinesboy%2FmavonEditor/lists"}