{"id":13658985,"url":"https://github.com/perak/codemirror","last_synced_at":"2025-04-16T19:33:09.197Z","repository":{"id":23604867,"uuid":"26973805","full_name":"perak/codemirror","owner":"perak","description":"CodeMirror editor for Meteor \u003e= 1.0","archived":false,"fork":false,"pushed_at":"2016-05-11T19:04:52.000Z","size":822,"stargazers_count":27,"open_issues_count":9,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T15:42:05.120Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/perak.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":"2014-11-21T19:05:25.000Z","updated_at":"2023-05-08T19:46:57.000Z","dependencies_parsed_at":"2022-08-21T19:40:09.472Z","dependency_job_id":null,"html_url":"https://github.com/perak/codemirror","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perak%2Fcodemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perak%2Fcodemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perak%2Fcodemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perak%2Fcodemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/perak","download_url":"https://codeload.github.com/perak/codemirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249268563,"owners_count":21240946,"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":[],"created_at":"2024-08-02T05:01:04.310Z","updated_at":"2025-04-16T19:33:04.187Z","avatar_url":"https://github.com/perak.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Interesting Demo and Trending Projects:"],"sub_categories":[],"readme":"Meteor CodeMirror package\r\n=========================\r\n\r\n\u003ca href=\"http://codemirror.net/\" target=\"_blank\"\u003eCodeMirror\u003c/a\u003e packaged for Meteor. **CodeMirror** is a versatile text editor implemented in JavaScript for the browser.\r\n\r\n\r\nUsage\r\n-----\r\n\r\nPut somewhere in your template:\r\n\r\n```\r\n\u003ctemplate name=\"EditorPage\"\u003e\r\n\r\n\t{{\u003e CodeMirror id=\"some-id\" name=\"someName\" options=editorOptions code=editorCode reactiveVar=\"varName\"}}\r\n\r\n\u003c/template\u003e\r\n```\r\n\r\nParameters:\r\n\r\n- `id` will be set to internal textarea element\r\n\r\n- `name` will be set to internal textarea element (useful in form submit)\r\n\r\n- `options` is CodeMirror options object\r\n\r\n- `code` is code to show in editor\r\n\r\n- `reactiveVar` optional name of Session variable, which is a reactive source of code\r\n\r\nAnd provide helpers that returns CodeMirror options and content:\r\n\r\n```\r\nTemplate.EditorPage.helpers({\r\n\r\n\t\"editorOptions\": function() {\r\n\t\treturn {\r\n\t\t\tlineNumbers: true,\r\n\t\t\tmode: \"javascript\"\r\n\t\t}\r\n\t},\r\n\r\n\t\"editorCode\": function() {\r\n\t\treturn \"Code to show in editor\";\r\n\t}\r\n\r\n});\r\n```\r\n\r\nTo get value from editor, just read value from the internal textarea:\r\n\r\n```\r\nTemplate.EditorPage.events({\r\n\r\n\t\"some event\": function(e, t) {\r\n\t\tvar code = t.find(\"#some-id\").value;\r\n\t\talert(code);\r\n\t}\r\n\r\n});\r\n\r\n```\r\n\r\nOr, if you provided `reactiveVar` you can read session variable:\r\n\r\n```\r\nTemplate.EditorPage.helpers({\r\n\t\"getEditorText\": function() {\r\n\t\treturn Session.get(\"varName\"); // \"varName\" is variable name you provided to reactiveVar \r\n\t}\r\n});\r\n\r\n```\r\n\r\n\r\nOr, using raw html/javascript\r\n-----------------------------\r\n\r\nCreate textarea somewhere in your html template:\r\n\r\n```\r\n\u003ctemplate name=\"EditorPage\"\u003e\r\n\r\n\t\u003ctextarea id=\"myTextarea\"\u003e\u003c/textarea\u003e\r\n\r\n\u003c/template\u003e\r\n```\r\n\r\nInitialize CodeMirror somewhere from your js:\r\n\r\n```\r\nTemplate.EditorPage.rendered = function() {\r\n\tvar editor = CodeMirror.fromTextArea(this.find(\"#myTextarea\"), {\r\n\t\tlineNumbers: true,\r\n\t\tmode: \"javascript\" // set any of supported language modes here\r\n\t});\r\n}\r\n```\r\n\r\nDeal with textarea as you normaly do with textarea, with exception that you cannot directly style `textarea` element - so, wrap it into `div` (that's because your textarea will be hidden and replaced by CodeMirror's own markup).\r\n\r\n\r\nSupported modes\r\n---------------\r\n\r\n```\r\napl\r\nasterisk\r\nclike\r\nclojure\r\ncobol\r\ncommonlisp\r\ncoffeescript\r\ncss\r\ncypher\r\nd\r\ndiff\r\ndjango\r\ndtd\r\ndylan\r\necl\r\neiffel\r\nerlang\r\nfortran\r\ngas\r\ngfm\r\ngherkin\r\ngo\r\ngroovy\r\nhaml\r\nhaskell\r\nhaxe\r\nhtmlembedded\r\nhtmlmixed\r\nhttp\r\nidl\r\njade\r\njavascript\r\njinja2\r\njulia\r\nkotlin\r\nlivescript\r\nlua\r\nmarkdown\r\nmirc\r\nmllike\r\nmodelica\r\nnginx\r\nntriples\r\noctave\r\npascal\r\npegjs\r\nperl\r\nphp\r\npig\r\nproperties\r\npuppet\r\npython\r\nq\r\nr\r\nrpm\r\nrst\r\nruby\r\nrust\r\nsass\r\nscheme\r\nshell\r\nsieve\r\nslim\r\nsmalltalk\r\nsmarty\r\nsmartymixed\r\nsolr\r\nsparql\r\nsql\r\nstex\r\ntcl\r\ntextile\r\ntiddlywiki\r\ntiki\r\ntoml\r\ntornado\r\nturtle\r\nvb\r\nvbscript\r\nvelocity\r\nverilog\r\nxml\r\nxquery\r\nyaml\r\nz80\r\n```\r\n\r\n\r\nSupported themes\r\n----------------\r\n\r\n```\r\n3024-day\r\n3024-night\r\nambiance-mobile\r\nambiance\r\nbase16-dark\r\nbase16-light\r\nblackboard\r\ncobalt\r\neclipse\r\nelegant\r\nerlang-dark\r\nlesser-dark\r\nmbo\r\nmdn-like\r\nmidnight\r\nmonokai\r\nneat\r\nneo\r\nnight\r\nparaiso-dark\r\nparaiso-light\r\npastel-on-dark\r\nrubyblue\r\nsolarized\r\nthe-matrix\r\ntomorrow-night-eighties\r\ntwilight\r\nvibrant-ink\r\nxq-dark\r\nxq-light\r\n```\r\n\r\n\r\nSupported key bindings\r\n----------------------\r\n\r\n```\r\nemacs\r\nsublime\r\nvim\r\n```\r\n\r\nSupported \"lints\"\r\n-----------------\r\n\r\n```\r\njavascript\r\njson\r\ncss\r\n```\r\n\r\nVersion history\r\n===============\r\n\r\n1.3.1\r\n-----\r\n\r\nNow all rendered editors can be accessed via global `CodeMirrors` variable:\r\n\r\n```javascript\r\nvar editor = CodeMirrors[\"my_editor_id\"];\r\neditor.refresh(); // or whatever\r\n```\r\n\r\n1.3.0\r\n-----\r\n\r\nFixed some bugs\r\n\r\n\r\n1.2.9\r\n-----\r\n\r\nFixed an error that appears when there are multiple editors on the the same template, which results in removing all editors when destroying just one template instance.\r\n\r\nThanks to \u003ca href=\"https://github.com/Kurounin\" target=\"_blank\"\u003eKurounin\u003c/a\u003e\r\n\r\n\r\n1.2.8\r\n-----\r\n\r\nBugfixes\r\n\r\n\r\n1.2.7\r\n-----\r\n\r\nBugfixes\r\n\r\n\r\n1.2.6\r\n-----\r\n\r\nBugfixes\r\n\r\n\r\n1.2.5\r\n-----\r\n\r\n- Included search \u0026 replace addon\r\n\r\n\r\n1.2.4\r\n-----\r\n\r\n- Included \"active line mode\" addon\r\n\r\n\r\n1.2.3\r\n-----\r\n\r\n- Added `/addon/mode/overlay.js` required by gfm mode. Thanks to \u003ca href=\"https://github.com/keyanzhang\" target=\"_blank\"\u003eKeyan Zhang\u003c/a\u003e.\r\n\r\n\r\n1.2.2\r\n-----\r\n\r\n- `reactiveVar` now gets and sets session variable to/from editor text\r\n\r\n\r\n1.2.1\r\n-----\r\n\r\n- Fixed minor bug\r\n\r\n\r\n1.2.0\r\n-----\r\n\r\n- Fixed bug with `reactiveVar` \r\n\r\n\r\n\r\nThat's it.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fperak%2Fcodemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fperak%2Fcodemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fperak%2Fcodemirror/lists"}