{"id":21330532,"url":"https://github.com/friendsofredaxo/aceeditor","last_synced_at":"2026-01-28T23:12:20.825Z","repository":{"id":167389088,"uuid":"643004308","full_name":"FriendsOfREDAXO/aceeditor","owner":"FriendsOfREDAXO","description":"Ace-Editor - The high performance code editor for REDAXO - Replacement for codemirror","archived":false,"fork":false,"pushed_at":"2024-07-13T23:10:01.000Z","size":5769,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-06T17:12:16.443Z","etag":null,"topics":["ace","ace-editor","code","code-highlighter","javascript","redaxo","redaxo-addon"],"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/FriendsOfREDAXO.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":"2023-05-19T21:12:08.000Z","updated_at":"2024-07-13T22:46:16.000Z","dependencies_parsed_at":"2024-07-13T23:36:44.656Z","dependency_job_id":"4afee8ab-05d9-4f53-b6f8-c1fcb71a3b98","html_url":"https://github.com/FriendsOfREDAXO/aceeditor","commit_stats":null,"previous_names":["friendsofredaxo/aceeditor"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/FriendsOfREDAXO/aceeditor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Faceeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Faceeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Faceeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Faceeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfREDAXO","download_url":"https://codeload.github.com/FriendsOfREDAXO/aceeditor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Faceeditor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264962511,"owners_count":23689824,"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","ace-editor","code","code-highlighter","javascript","redaxo","redaxo-addon"],"created_at":"2024-11-21T22:20:58.057Z","updated_at":"2026-01-28T23:12:20.814Z","avatar_url":"https://github.com/FriendsOfREDAXO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ace-Editor\n\n## The high performance code editor for **REDAXO** (Replacement for codemirror)\n\n![Screenshot aceeditor](https://raw.githubusercontent.com/FriendsOfREDAXO/aceeditor/assets/aceeditor.webp \"Screenshot aceeditor\")\n\nDieses AddOn bindet den Code-Editor **Ace-Editor** v1.43.6 im Backend ein.\nDie Einstellungen zum AddOn sind unter **System-\u003eAce-Editor** zu finden.\n\n\u003e **Hinweis:** Der Ace-Editor bietet nicht nur Syntax-Highlighting wie der codemirror, sondern zeigt auch gleich Syntax-Fehler in Echtzeit an (Siehe Screenshot).\n\nVerwendet wird die *src-min-noconflict* Version v1.43.6 von https://github.com/ajaxorg/ace-builds/\n\nhttps://github.com/ajaxorg/ace-builds/releases/tag/v1.43.6\n\nWebsite: https://ace.c9.io/\n\nBeispiel-Seite zum testen des Editors: https://ace.c9.io/build/kitchen-sink.html\n\n\u003e **Hinweis:** Um den Ace-Editor in REDAXO zu verwenden muss der *codemirror* unter **System-\u003eCustomizer** deaktiviert werden!\n\n## Tastatur Shortcuts\n\nEine Übersicht der Default-Shortcuts gibt es hier: https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts\n\n| Windows/Linux | Mac | Action |\n|-------------- | --- |------ |\n| ESC | Command | Toggle Fullscreen-Modus |\n| F11 | F11 | Toggle Fullscreen-Modus |\n| F1 | F1 | Open command palette |\n| Ctrl-F | Command-F | Find |\n| Ctrl-H | Command-Option-F | Replace |\n| Ctrl-, | Command-, | Show the settings menu |\n| Ctrl-Alt-H | Command-Alt-H | Show shortcuts |\n\n## Ace-Editor individuell verwenden\n\n### Ace-Editor über Textarea-Attribute anpassen\n\nFür die Verwendung des Ace-Editors mit eigenen Optionen in Modulen oder AddOns sollte für Textareas die Klasse `aceeditor` verwendet werden.\n\n**Beispiel**:\n\n```html\n\u003ctextarea class=\"aceeditor\" aceeditor-theme=\"eclipse\" aceeditor-themedark=\"dracula\" aceeditor-mode=\"php\" aceeditor-options='{\"showLineNumbers\": true, \"showGutter\": true}'\u003e\u003c/textarea\u003e\n```\n\n\u003e **Hinweis:** Die Default-Optionen aus den AddOn-Einstellungen werden immer angewendet!\n\nIndividuelle Optionen können über das Attribut `aceeditor-options` entsprechend gesetzt, oder die Default-Optionen überschrieben werden!\n\nÜber Attribute der Textarea kann das Verhalten und die Darstellung des Editors individuell angepasst werden.\n\n**Mögliche Attribute**\n\n| Attribut | Mögliche Werte |\n|--------- | -------------- |\n| aceeditor-theme | Name des Themes z.B. `eclipse` (ohne ace/theme) |\n| aceeditor-themedark | Name des Themes im Dark-Mode z.B. `dracula` (ohne ace/theme) |\n| aceeditor-mode | Sprache für das Syntax-Highlighting z.B. `php`, `json`, `html`, `javascript`, `yaml`, `xml` (ohne ace/mode) |\n| aceeditor-options | Weitere Optionen für den Ace-Editor.\u003cbr\u003eAchtung: Die Optionen müssen im korrekten JSON-Format angegeben werden!\u003cbr\u003ez.B. `{\"showLineNumbers\": true, \"showGutter\": true}` |\n| aceeditor-width | Breite des Editors, z.B. `800px`, `100%` |\n| aceeditor-height | Höhe des Editors, z.B. `500px` |\n| readonly | Durch das Attribut `readonly` wird der ReadOnly-Modus gesetzt |\n| cols | Anzahl Spalten, wenn keine Breite (`aceeditor-width`) angegeben wird, wird die Breite anhand der FontSize errechnet |\n| rows | Anzahl Zeilen, wenn keine Höhe (`aceeditor-height`) angegeben wird, wird die Höhe anhand der FontSize errechnet |\n| width | Breite des Editors, z.B. `800`, `100%` |\n| height | Höhe des Editors, z.B. `500`, `50%` |\n\n\u003e **Hinweis:** Die Default-Optionen können über das Attribut `aceeditor-options` entsprechend überschrieben werden!\n\n\u003e **Hinweis:** Wird keine Breite angegeben (`aceeditor-width`, `width` oder `cols`) wird `100%` als Default verwendet. Wird keine Höhe angegeben (`aceeditor-height`, `height` oder `rows`) wird `200px` als Default verwendet.\n\n### Ace-Editor in JavaScript\n\nIn eigenen Java-Scripten im Backend kann eine Textarea über die Function `textAreaToAceEditor()` in einen Ace-Editor umgewandelt werden.\n\nDie Optionen aus den AddOn-Einstellungen werden automatisch angewendet.\n\n**Beispiel**:\n\n```js\n\u003cscript\u003e\neditor = textAreaToAceEditor($('textarea.themepreview')[0]);\n\u003c/script\u003e\n```\n\nDie Function liefert das `editor`-Objekt zurück und damit können noch weitere individuelle Optionen gesetzt werden.\n\n**Beispiel**:\n\n```js\n\u003cscript\u003e\neditor.setTheme('ace/theme/eclipse');\neditor.session.setMode('ace/mode/javascript');\neditor.setOptions(myoptions);\n\u003c/script\u003e\n```\n\n\u003e **Hinweis:** Weitere Informationen zum Ace-Editor gibt es hier: [https://ace.c9.io/](https://ace.c9.io/)\n\n### Optionen für geladene Erweiterungen\n\nDie folgenden Erweitertungen werden zusätzlich geladen:\n\n`beautify`, `keybinding_menu`, `language_tools`, `whitespace`\n\nDie Erweiterungen `beautify`, `keybinding_menu`, `whitespace` stellen Keyboard-Shortcuts zur Verfügung.\n\nDie Erweiterung language_tools kann durch die folgenden Optionen konfiguriert werden.\n\n```js\n\"enableBasicAutocompletion\": true|false\n\"enableSnippets\": true|false\n\"enableLiveAutocompletion\": true|false\n```\n\n**sonstige nützliche Optionen**\n\n```js\n\"customScrollbar\": true|false\n```\n\n\u003e **Hinweis:** Der Ace-Editor kann auch im Frontend eingebunden werden: https://friendsofredaxo.github.io/tricks/snippets/aceeditor_im_frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Faceeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendsofredaxo%2Faceeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Faceeditor/lists"}