{"id":13496356,"url":"https://github.com/surmon-china/vue-codemirror","last_synced_at":"2025-05-13T22:08:24.768Z","repository":{"id":39405156,"uuid":"68919384","full_name":"surmon-china/vue-codemirror","owner":"surmon-china","description":"@codemirror code editor component for @vuejs","archived":false,"fork":false,"pushed_at":"2024-02-21T17:12:32.000Z","size":1388,"stargazers_count":3380,"open_issues_count":90,"forks_count":384,"subscribers_count":40,"default_branch":"main","last_synced_at":"2025-04-30T14:04:13.909Z","etag":null,"topics":["code-editor","code-editor-component","codemirror","codemirror-component","codemirror-editor","codemirror-themes","vue","vue-code-editor","vue-codemirror","vue-component","vue-plugin","vue3","vuejs","web-editor"],"latest_commit_sha":null,"homepage":"https://github.surmon.me/vue-codemirror","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/surmon-china.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}},"created_at":"2016-09-22T12:33:12.000Z","updated_at":"2025-04-29T15:29:45.000Z","dependencies_parsed_at":"2024-06-18T11:08:00.489Z","dependency_job_id":"00dccd1d-41c5-4054-a956-a6e9725f91d7","html_url":"https://github.com/surmon-china/vue-codemirror","commit_stats":{"total_commits":164,"total_committers":22,"mean_commits":7.454545454545454,"dds":0.7195121951219512,"last_synced_commit":"682ae5e6a737c1e4e06d32cd20d44f8d9b7b4a03"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-codemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-codemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-codemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-codemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surmon-china","download_url":"https://codeload.github.com/surmon-china/vue-codemirror/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251801211,"owners_count":21645970,"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","code-editor-component","codemirror","codemirror-component","codemirror-editor","codemirror-themes","vue","vue-code-editor","vue-codemirror","vue-component","vue-plugin","vue3","vuejs","web-editor"],"created_at":"2024-07-31T19:01:46.684Z","updated_at":"2025-05-13T22:08:19.726Z","avatar_url":"https://github.com/surmon-china.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","Integrations","UI Components","Awesome Vue.js","UI Components [🔝](#readme)"],"sub_categories":["Component Collections","形成","UI Components","Form"],"readme":"# vue-codemirror\n\n[![vue](https://img.shields.io/badge/MADE%20WITH-VUE-42a97a?style=for-the-badge\u0026labelColor=35495d)](https://vuejs.org)\n\u0026nbsp;\n[![npm](https://img.shields.io/npm/v/vue-codemirror?color=c7343a\u0026label=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/vue-codemirror)\n\u0026nbsp;\n[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-codemirror.svg?style=for-the-badge)](https://github.com/surmon-china/vue-codemirror/stargazers)\n\u0026nbsp;\n[![Test Codecov](https://img.shields.io/codecov/c/github/surmon-china/vue-codemirror?style=for-the-badge)](https://codecov.io/gh/surmon-china/vue-codemirror)\n\u0026nbsp;\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](/LICENSE)\n\n[**CodeMirror(6)**](https://codemirror.net) component for **Vue(3)**.\n\n`vue-codemirror` v5/v6 has been released. This is a new version based on [CodeMirror@6](https://codemirror.net) and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ **completely NOT compatible** with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.\n\nThis [**example site**](https://github.surmon.me/vue-codemirror) contains most of what you want.\n\n#### Legacy version\n\n- [examples](https://v1.github.surmon.me/vue-codemirror) (Vue2)\n- [vue-codemirror@4.x](https://github.com/surmon-china/vue-codemirror/tree/v4.0.6) (Vue2 / CodeMirror5)\n\n---\n\n#### Documentation\n\n- [CodeMirror6 Guide](https://codemirror.net/docs/guide/)\n- [CodeMirror6 APIs](https://codemirror.net/docs/ref/)\n- [CodeMirror6 Examples](https://codemirror.net/examples/)\n- [CodeMirror6 Example: Writing a Language Package](https://codemirror.net/examples/lang-package/)\n- [CodeMirror6 Example: Styling](https://codemirror.net/examples/styling/)\n- [CodeMirror Forum](https://discuss.codemirror.net/)\n\n#### CodeMirror packages\n\n- [CodeMirror6 Languages](https://github.com/orgs/codemirror/repositories?q=lang-\u0026type=all)\n- [CodeMirror6 Themes](https://github.com/orgs/codemirror/repositories?q=theme\u0026type=all)\n\n---\n\n### Usage\n\n#### Install\n\n```bash\nyarn add codemirror vue-codemirror\n```\n\n```bash\nnpm install codemirror vue-codemirror --save\n```\n\n#### Depending on your actual needs, you may need to install more CodeMirror packages\n\n```bash\n# CodeMirror languages...\nyarn add @codemirror/lang-html\nyarn add @codemirror/lang-json\nyarn add @codemirror/lang-javascript\n\n# CodeMirror themes...\nyarn add @codemirror/theme-one-dark\n\n# more CodeMirror packages...\n```\n\n#### If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your `package.json`\n\ne.g.\n\n```json\n\"dependencies\": {\n  \"@codemirror/state\": \"6.x\"\n}\n```\n\n```ts\nimport { EditorState } from '@codemirror/state'\n```\n\n#### Local component\n\n```vue\n\u003ctemplate\u003e\n  \u003ccodemirror\n    v-model=\"code\"\n    placeholder=\"Code goes here...\"\n    :style=\"{ height: '400px' }\"\n    :autofocus=\"true\"\n    :indent-with-tab=\"true\"\n    :tab-size=\"2\"\n    :extensions=\"extensions\"\n    @ready=\"handleReady\"\n    @change=\"log('change', $event)\"\n    @focus=\"log('focus', $event)\"\n    @blur=\"log('blur', $event)\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { defineComponent, ref, shallowRef } from 'vue'\n  import { Codemirror } from 'vue-codemirror'\n  import { javascript } from '@codemirror/lang-javascript'\n  import { oneDark } from '@codemirror/theme-one-dark'\n\n  export default defineComponent({\n    components: {\n      Codemirror\n    },\n    setup() {\n      const code = ref(`console.log('Hello, world!')`)\n      const extensions = [javascript(), oneDark]\n\n      // Codemirror EditorView instance ref\n      const view = shallowRef()\n      const handleReady = (payload) =\u003e {\n        view.value = payload.view\n      }\n\n      // Status is available at all times via Codemirror EditorView\n      const getCodemirrorStates = () =\u003e {\n        const state = view.value.state\n        const ranges = state.selection.ranges\n        const selected = ranges.reduce((r, range) =\u003e r + range.to - range.from, 0)\n        const cursor = ranges[0].anchor\n        const length = state.doc.length\n        const lines = state.doc.lines\n        // more state info ...\n        // return ...\n      }\n\n      return {\n        code,\n        extensions,\n        handleReady,\n        log: console.log\n      }\n    }\n  })\n\u003c/script\u003e\n```\n\n#### Global component\n\n```javascript\nimport { createApp } from 'vue'\nimport { basicSetup } from 'codemirror'\nimport VueCodemirror from 'vue-codemirror'\n\nconst app = createApp()\n\napp.use(VueCodemirror, {\n  // optional default global options\n  autofocus: true,\n  disabled: false,\n  indentWithTab: true,\n  tabSize: 2,\n  placeholder: 'Code goes here...',\n  extensions: [basicSetup]\n  // ...\n})\n```\n\n### Component Props\n\n| prop          | description                                                                            | type                     | default |\n| :------------ | :------------------------------------------------------------------------------------- | :----------------------- | :------ |\n| modelValue    | The input values accepted by the component also support two-way binding.               | `String`                 | `''`    |\n| autofocus     | Focus editor immediately after mounted.                                                | `Boolean`                | `false` |\n| disabled      | Disable input behavior and disable change state.                                       | `Boolean`                | `false` |\n| indentWithTab | Bind keyboard Tab key event.                                                           | `Boolean`                | `true`  |\n| tabSize       | Specify the indent when the Tab key is pressed.                                        | `Number`                 | `2`     |\n| placeholder   | Display when empty.                                                                    | `String`                 | `''`    |\n| style         | The CSS style object that acts on the CodeMirror itself.                               | `Object`                 | `{}`    |\n| phrases       | Codemirror [internationalization phrases](https://codemirror.net/examples/translate/). | `Object`                 | `{}`    |\n| autoDestroy   | Auto destroy the CodeMirror instance before the component unmount.                     | `Boolean`                | `true`  |\n| extensions    | Passed to CodeMirror `EditorState.create({ extensions })`                              | `Extension`              | `[]`    |\n| selection     | Passed to CodeMirror `EditorState.create({ selection })`                               | `EditorSelection`        | -       |\n| root          | Passed to CodeMirror `new EditorView({ root })`                                        | `ShadowRoot \\| Document` | -       |\n\n### Component Events\n\n| event               | description                                             | params                                                                           |\n| :------------------ | :------------------------------------------------------ | :------------------------------------------------------------------------------- |\n| `update:modelValue` | **Only** when the CodeMirror content (doc) has changed. | `(value: string, viewUpdate: ViewUpdate)`                                        |\n| change              | ditto                                                   | ditto                                                                            |\n| update              | When any state of CodeMirror changes.                   | `(viewUpdate: ViewUpdate)`                                                       |\n| focus               | When CodeMirror focused.                                | `(viewUpdate: ViewUpdate)`                                                       |\n| blur                | When CodeMirror blurred.                                | `(viewUpdate: ViewUpdate)`                                                       |\n| ready               | When editor component mounted.                          | `(payload: { view: EditorView; state: EditorState; container: HTMLDivElement })` |\n\n### Basic Setup\n\nThe [basic-setup](https://codemirror.net/docs/ref/#basic-setup) extension is integrated by default in the vue-codemirror configuration and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.\n\n```js\napp.use(VueCodemirror, {\n  // keep the global default extensions empty\n  extensions: []\n})\n```\n\n### Changelog\n\nDetailed changes for each release are documented in the [release notes](/CHANGELOG.md).\n\n### License\n\nLicensed under the [MIT](/LICENSE) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurmon-china%2Fvue-codemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurmon-china%2Fvue-codemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurmon-china%2Fvue-codemirror/lists"}