{"id":25725017,"url":"https://github.com/rennzhang/codemirror-editor-vue3","last_synced_at":"2025-05-15T09:06:23.175Z","repository":{"id":37298876,"uuid":"394652267","full_name":"rennzhang/codemirror-editor-vue3","owner":"rennzhang","description":"CodeMirror component for Vue3","archived":false,"fork":false,"pushed_at":"2025-04-03T12:33:50.000Z","size":3710,"stargazers_count":229,"open_issues_count":8,"forks_count":52,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-12T01:39:24.036Z","etag":null,"topics":["code-editor","codemirror","codemirror-editor-vue3","editor","vite","vitepress","vue","vue-components","vue-next","vue3","vuejs","web-editor"],"latest_commit_sha":null,"homepage":"https://rennzhang.github.io/codemirror-editor-vue3","language":"TypeScript","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/rennzhang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2021-08-10T12:50:57.000Z","updated_at":"2025-05-07T08:51:27.000Z","dependencies_parsed_at":"2022-07-15T21:17:06.165Z","dependency_job_id":"8b0ca0f0-b9f7-4d54-8e53-1275547111b2","html_url":"https://github.com/rennzhang/codemirror-editor-vue3","commit_stats":{"total_commits":213,"total_committers":4,"mean_commits":53.25,"dds":0.06103286384976525,"last_synced_commit":"0dfc00ea2726311aef11a2c084e79d6c7e9e640c"},"previous_names":["rennzhang/codemirror-editor-vue3","renncheung/codemirror-editor-vue3"],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rennzhang%2Fcodemirror-editor-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rennzhang%2Fcodemirror-editor-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rennzhang%2Fcodemirror-editor-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rennzhang%2Fcodemirror-editor-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rennzhang","download_url":"https://codeload.github.com/rennzhang/codemirror-editor-vue3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"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":["code-editor","codemirror","codemirror-editor-vue3","editor","vite","vitepress","vue","vue-components","vue-next","vue3","vuejs","web-editor"],"created_at":"2025-02-25T22:17:39.260Z","updated_at":"2025-05-15T09:06:23.155Z","avatar_url":"https://github.com/rennzhang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub stars](https://img.shields.io/github/stars/RennZhang/codemirror-editor-vue3)](https://github.com/RennZhang/codemirror-editor-vue3/stargazers)\n[![npm downloads](https://img.shields.io/npm/dt/codemirror-editor-vue3)](https://www.npmjs.com/package/codemirror-editor-vue3)\n[![GitHub issues](https://img.shields.io/github/issues/RennZhang/codemirror-editor-vue3)](https://github.com/RennZhang/codemirror-editor-vue3/issues)\n[![GitHub forks](https://img.shields.io/github/forks/RennZhang/codemirror-editor-vue3)](https://github.com/RennZhang/codemirror-editor-vue3/network)\n[![GitHub last commit](https://img.shields.io/github/last-commit/RennZhang/codemirror-editor-vue3)](https://github.com/RennZhang/codemirror-editor-vue3)\n[![license](https://img.shields.io/github/license/RennZhang/codemirror-editor-vue3)](https://github.com/RennZhang/codemirror-editor-vue3)\n\n# Introduction\n\n[简体中文](https://rennzhang.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started)\n\nThe codemirror component of vue3. This component is developed based on [Codemirror 5](http://codemirror.net/5/) and only\nvue3 is supported.\n\nIn addition to the officially supported modes, the log output presentation mode is added, out of the box, but not\nnecessarily suitable for all scenarios.\n\nFor complete documentation and more cases, please check\n[codemirror-editor-vue3 docs](https://RennZhang.github.io/codemirror-editor-vue3/).\n\n## Install\n\n```bash\nnpm install codemirror-editor-vue3 codemirror@^5 -S\n```\n\n```bash\nyarn add codemirror-editor-vue3 codemirror@\"\u003e=5.64.0 \u003c6\"\n```\n\n```bash\npnpm i codemirror-editor-vue3 codemirror@^5 -S\n```\n\n\u003e If your project requires Typescript support, you will also need to install the '@types/codemirror' dependency.\n\n```bash\nnpm install @types/codemirror -D\n```\n\n## Register global component\n\n\u003e **Do not recommend global registration components**, which will result in the type of prompt on the template that\n\u003e cannot be properly obtained.\n\n`main.js:`\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport { InstallCodeMirror } from \"codemirror-editor-vue3\";\n\nconst app = createApp(App);\napp.use(InstallCodeMirror);\napp.mount(\"#app\");\n```\n\nThe global registered component name is Codemirror or you can customize a component name, for example:\n\n```js\napp.use(InstallCodeMirror, { componentName: \"customName\" });\n```\n\n## Use in components\n\n```vue\n\u003ctemplate\u003e\n  \u003cCodemirror\n    v-model:value=\"code\"\n    :options=\"cmOptions\"\n    border\n    placeholder=\"test placeholder\"\n    :height=\"200\"\n    @change=\"change\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Codemirror from \"codemirror-editor-vue3\";\n\n// placeholder\nimport \"codemirror/addon/display/placeholder.js\";\n\n// language\nimport \"codemirror/mode/javascript/javascript.js\";\n// placeholder\nimport \"codemirror/addon/display/placeholder.js\";\n// theme\nimport \"codemirror/theme/dracula.css\";\n\nimport { ref } from \"vue\";\nexport default {\n  components: { Codemirror },\n  setup() {\n    const code = ref(`\nvar i = 0;\nfor (; i \u003c 9; i++) {\n  console.log(i);\n  // more statements\n}`);\n\n    return {\n      code,\n      cmOptions: {\n        mode: \"text/javascript\", // Language mode\n        theme: \"dracula\", // Theme\n      },\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n## Language highlighting\n\n\u003e You can click on the following link to view corresponding language cases\n\n- [javascript](https://rennzhang.github.io/codemirror-editor-vue3/example?lang=javascript)\n- [json](https://rennzhang.github.io/codemirror-editor-vue3/example?lang=json)\n- [css](https://rennzhang.github.io/codemirror-editor-vue3/example?lang=css)\n- [html](https://rennzhang.github.io/codemirror-editor-vue3/example?lang=html)\n- [apl](https://rennzhang.github.io/codemirror-editor-vue3/example?lang=apl)\n- [yaml](https://rennzhang.github.io/codemirror-editor-vue3/example?lang=yaml)\n\nMore cases are gradually being added, and you can also refer to\n[document](https://rennzhang.github.io/codemirror-editor-vue3/guide/lang) to achieve more language modes.\n\n## Component Props\n\n[cm_config_url]: https://codemirror.net/doc/manual.html#config\n[cm_editor_type_url]: https://codemirror.net/doc/manual.html#config\n[default_options_url]: https://github.com/RennZhang/codemirror-editor-vue3/blob/main/packages/src/config/index.ts#L68\n\n| name                |                                                                description                                                                | type                                      |                default                 |\n| ------------------- | :---------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------- | :------------------------------------: |\n| **value(v-model)**  |                                                              Editor content                                                               | `string`                                  |                   \"\"                   |\n| **options**         |                                           [Configuration options of codemirror5][cm_config_url]                                           | [EditorConfiguration][cm_editor_type_url] | [DEFAULT_OPTIONS][default_options_url] |\n| **placeholder**     |                                     Editor placeholder content to introduce codemirror related files                                      | `string`                                  |                   \"\"                   |\n| **border**          |                                                     Whether to display editor borders                                                     | `boolean`                                 |                `false`                 |\n| **width**           |                                                                   width                                                                   | `string`                                  |                `100%  `                |\n| **height**          |                                                                  height                                                                   | `string`                                  |                `100%  `                |\n| **original-style**  | Using the original style, disable the second modification of the style for this component (but does not affect width, height, and border) | ` boolean`                                |                `false`                 |\n| **KeepCursorInEnd** |                                              Always keep the mouse position on the last line                                              | `boolean`                                 |                `false`                 |\n| **merge**           |                                               merge mode, can also be used as diff pattern                                                | `boolean`                                 |                `false`                 |\n\n## Events\n\n### Component Events\n\n\u003e The following three are only the events encapsulated by this component. Please refer to more events\n\u003e [Codemirror Events](./events#codemirror-events)\n\n| event name |             description             | params                                |\n| ---------- | :---------------------------------: | :------------------------------------ |\n| `change`   |      value or instance changes      | `(value: string, cm: Editor) =\u003e void` |\n| `input`    |                input                | `(value: string) =\u003e void`             |\n| `ready`    | The Codemirror component is mounted | `(cm: Editor) =\u003e void;`               |\n\n---\n\n### Codemirror Events\n\nThe following events are official events of Codemirror5. You can refer to the official documents for details\n[Codemirror Event](https://codemirror.net/doc/manual.html#events)，You can use this component to bind events directly\nthrough components, for example：\n\n```vue {8-10}\n\u003cCodemirror\n  v-model:value=\"code\"\n  :options=\"{ mode: 'text/x-vue', theme: 'default' }\"\n  border\n  placeholder=\"test-placeholder\"\n  :height=\"200\"\n  @change=\"onChange\"\n  @blur=\"onBlur\"\n  @focus=\"onFocus\"\n  @scroll=\"onScroll\"\n/\u003e\n```\n\n\u003e All event names are as follows：\n\n- `changes`\n- `scroll`\n- `beforeChange`\n- `cursorActivity`\n- `keyHandled`\n- `inputRead`\n- `electricInput`\n- `beforeSelectionChange`\n- `viewportChange`\n- `swapDoc`\n- `gutterClick`\n- `gutterContextMenu`\n- `focus`\n- `blur`\n- `refresh`\n- `optionChange`\n- `scrollCursorIntoView`\n- `update`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frennzhang%2Fcodemirror-editor-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frennzhang%2Fcodemirror-editor-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frennzhang%2Fcodemirror-editor-vue3/lists"}