{"id":14990331,"url":"https://github.com/marketingpipeline/ace-editor-web-component","last_synced_at":"2025-04-12T02:10:20.022Z","repository":{"id":63402758,"uuid":"567481635","full_name":"MarketingPipeline/Ace-Editor-Web-Component","owner":"MarketingPipeline","description":"A web-component to add code editors to your web page powered via Ace Editor","archived":false,"fork":false,"pushed_at":"2023-03-27T10:39:06.000Z","size":117,"stargazers_count":52,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T21:47:40.308Z","etag":null,"topics":["ace-editor","ace-editor-wc","browser","code-editor","code-editor-online","custom-element","editor","frontend","html","html-editor","html-element","ide","javascript","syntax-highlighting","text-editor","web-component","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MarketingPipeline.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":"2022-11-17T22:10:58.000Z","updated_at":"2025-02-07T07:24:39.000Z","dependencies_parsed_at":"2024-09-24T16:01:43.758Z","dependency_job_id":null,"html_url":"https://github.com/MarketingPipeline/Ace-Editor-Web-Component","commit_stats":{"total_commits":56,"total_committers":1,"mean_commits":56.0,"dds":0.0,"last_synced_commit":"8dfbcca885108cb9851151892d59200c64d2acb8"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FAce-Editor-Web-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FAce-Editor-Web-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FAce-Editor-Web-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FAce-Editor-Web-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarketingPipeline","download_url":"https://codeload.github.com/MarketingPipeline/Ace-Editor-Web-Component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"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":["ace-editor","ace-editor-wc","browser","code-editor","code-editor-online","custom-element","editor","frontend","html","html-editor","html-element","ide","javascript","syntax-highlighting","text-editor","web-component","web-components"],"created_at":"2024-09-24T14:19:54.258Z","updated_at":"2025-04-12T02:10:19.998Z","avatar_url":"https://github.com/MarketingPipeline.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ace-Editor-Web-Component\n\n\n\n\u003cdiv align=\"center\"\u003e \n\n![image](https://user-images.githubusercontent.com/86180097/202600069-4a82c9b8-a033-4d04-a32d-e784906cbf01.png)\n\nA web component that allows you to easily add code editor(s) to your web page powered via [Ace Editor](https://github.com/ajaxorg/ace) \u003cbr\u003e\n  \u003csmall\u003e \u003cb\u003e\u003ci\u003eShow your support!\u003c/i\u003e \u003c/b\u003e\u003c/small\u003e\n  \u003cbr\u003e\n   \u003ca href=\"https://github.com/MarketingPipeline/Ace-Editor-Web-Component\"\u003e\n    \u003cimg title=\"Star on GitHub\" src=\"https://img.shields.io/github/stars/MarketingPipeline/Ace-Editor-Web-Component.svg?style=social\u0026label=Star\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/MarketingPipeline/Ace-Editor-Web-Component/fork\"\u003e\n    \u003cimg title=\"Fork on GitHub\" src=\"https://img.shields.io/github/forks/MarketingPipeline/Ace-Editor-Web-Component.svg?style=social\u0026label=Fork\"\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\n\n\n\n\n## Example and usage\n\nYou can view a demo of the Ace Editor web component in use [here.](https://marketingpipeline.github.io/Ace-Editor-Web-Component/demo.html)\n\n\nHow to use the \u003cb\u003e\u003ci\u003eAce Editor Web Component\u003c/b\u003e\u003c/i\u003e:\n\nSet a \u003ccode\u003elanguage\u003c/code\u003e attribute to a [supported programming language](#supported-languages) you prefer to use - example below\n\n\n```html\n\u003cace-editor language=\"python\"\u003e\u003c/ace-editor\u003e\n```    \n\n\n\n\n   include this [script](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/blob/main/dist/ace-editor-wc.min.js) in your HTML document.\n         \n  ```html\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/MarketingPipeline/Ace-Editor-Web-Component@1.0.2/dist/ace-editor-wc.min.js\" defer\u003e\u003c/script\u003e \n   ```\n    \n    \n    \nand include this [CSS](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/blob/main/dist/ace-editor-wc.min.css) file in your HTML document.\n\n```html\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/MarketingPipeline/Ace-Editor-Web-Component@v1.0.2/dist/ace-editor-wc.min.css\"\u003e\n```\n\n\u003cb\u003eNote\u003c/b\u003e: you can easily customize the look of this web component by hosting your own customized CSS file.\n\n\n\u003cbr\u003e\n\n\nHow to use the \u003cb\u003e\u003ci\u003eAce Editor Web Component\u003c/b\u003e\u003c/i\u003e with \u003cb\u003ePre-Defined Code\u003c/b\u003e:\n\nYou can pre-define a code example inside the editor, simply by inserting the code inside of a \u003ccode\u003eace-editor\u003c/code\u003e element like so - \n\n```html\n\u003cace-editor language=\"python\"\u003eprint('hello world')\u003c/ace-editor\u003e\n```    \n\n\n    \n    \n### Options\n\n\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003eAttribute\u003c/th\u003e\n\u003cth\u003eMeaning\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003elanguage\u003c/td\u003e\n \u003ctd\u003e The language mode to use for Ace Editor\u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eUndefined\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e max-lines\u003c/td\u003e\n \u003ctd\u003eThe max number of lines to set Ace Editor height too\u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eUndefined\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctd\u003eeditor-title\u003c/td\u003e\n \u003ctd\u003eThe editor title to use\u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eLanguage\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e editor-theme\u003c/td\u003e\n \u003ctd\u003eThe Ace Editor theme to use\u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eMonokai\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e editor-options\u003c/td\u003e\n \u003ctd\u003eSet the ace editor options example - \u003ccode\u003eeditor-options='{ \"maxLines\" : \"10\" }'\u003c/code\u003e. \u003cb\u003eNOTE\u003c/b\u003e: This will over-write max-lines attribute (if used)\u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eUndefined\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\n\n\n\n\u003c/table\u003e\n\n\n## Supported Languages\n\n`ABAP`,\n`ABC`,\n`ActionScript`,\n`ADA`,\n`Apache_Conf`,\n`AsciiDoc`,\n`Assembly_x86`,\n`AutoHotKey`,\n`BatchFile`,\n`C9Search`,\n`C_Cpp`,\n`Cirru`,\n`Clojure`,\n`Cobol`,\n`coffee`,\n`ColdFusion`,\n`CSharp`,\n`CSS`,\n`Curly`,\n`D`,\n`Dart`,\n`Diff`,\n`Dockerfile`,\n`Dot`,\n`Dummy`,\n`DummySyntax`,\n`Eiffel`,\n`EJS`,\n`Elixir`,\n`Elm`,\n`Erlang`,\n`Forth`,\n`FTL`,\n`Gcode`,\n`Gherkin`,\n`Gitignore`,\n`Glsl`,\n`golang`,\n`Groovy`,\n`HAML`,\n`Handlebars`,\n`Haskell`,\n`haXe`,\n`HTML`,\n`HTML_Ruby`,\n`INI`,\n`Io`,\n`Jack`,\n`Jade`,\n`Java`,\n`JavaScript`,\n`JSON`,\n`JSONiq`,\n`JSP`,\n`JSX`,\n`Julia`,\n`LaTeX`,\n`LESS`,\n`Liquid`,\n`Lisp`,\n`LiveScript`,\n`LogiQL`,\n`LSL`,\n`Lua`,\n`LuaPage`,\n`Lucene`,\n`Makefile`,\n`Markdown`,\n`Mask`,\n`MATLAB`,\n`MEL`,\n`MUSHCode`,\n`MySQL`,\n`Nix`,\n`ObjectiveC`,\n`OCaml`,\n`Pascal`,\n`Perl`,\n`pgSQL`,\n`PHP`,\n`Powershell`,\n`Praat`,\n`Prolog`,\n`Properties`,\n`Protobuf`,\n`Python`,\n`R`,\n`RDoc`,\n`RHTML`,\n`Ruby`,\n`Rust`,\n`SASS`,\n`SCAD`,\n`Scala`,\n`Scheme`,\n`SCSS`,\n`SH`,\n`SJS`,\n`Smarty`,\n`snippets`,\n`Soy_Template`,\n`Space`,\n`SQL`,\n`Stylus`,\n`SVG`,\n`Tcl`,\n`Tex`,\n`Text`,\n`Textile`,\n`Toml`,\n`Twig`,\n`Typescript`,\n`Vala`,\n`VBScript`,\n`Velocity`,\n`Verilog`,\n`VHDL`,\n`XML`,\n`XQuery`,\n`YAML`\n\n\u003cb\u003eNote\u003c/b\u003e: the web component will still work with an un-supported language mode for the Ace Editor - tho syntax highlighting, auto-indentation features \u0026 etc.. will not work. \n\n## Loading extensions\n\nTo load \u0026 use extensions / plugins for Ace Editor. You will need to define a variable / list called ```AceEditor_WC_Ace_Editor_EXTS```. Each URL / file path in this list will be loaded to the page. Example below -\n\n```js\nlet AceEditor_WC_Ace_Editor_EXTS = ['https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ext-language_tools.js']\n```\n\n## Install locally\n\nThe web component loads all resources for Ace Editor via CDN. You can change this to load all the resource / file paths from a local path. To set files to be loaded from your local path define a variable ```AceEditor_WC_Ace_Editor_Path``` with the path to load the files from. Example below -\n\n```js\nlet AceEditor_WC_Ace_Editor_Path = \"path/to/files/\"\n```\n\nYou can download / find the version of Ace Editor used in the web-component [here](https://cdnjs.com/libraries/ace)\n\n## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/Ace-Editor-Web-Component)\n\nWant to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!\n\n\nSee also the list of\n[contributors](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/graphs/contributors) who\nparticipate in this project.\n\n## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/Ace-Editor-Web-Component)\n\nThis project is licensed under the MIT License - see the\n[LICENSE.md](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/blob/main/LICENSE) file for\ndetails.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarketingpipeline%2Face-editor-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarketingpipeline%2Face-editor-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarketingpipeline%2Face-editor-web-component/lists"}