Ace Code Editor
Integrates the Ace JavaScript code editor into Drupal, providing syntax highlighting, autocompletion, and code editing capabilities for textareas, field display, and embedded code snippets.
ace_editor
Install
composer require 'drupal/ace_editor:^2.0'
composer require 'drupal/ace_editor:8.x-1.4'
Overview
Ace Code Editor is a comprehensive integration of the popular Ace editor JavaScript library into Drupal. Ace is a standalone code editor written in JavaScript that offers professional-grade features including syntax highlighting for over 100 programming languages, proper indentation, keyboard shortcuts, find and replace with regular expression support, and autocompletion.
This module provides three main integration points: (1) A text editor plugin that can be assigned to text formats, replacing standard textareas with the Ace editor in content editing forms; (2) A field formatter that displays text field content as read-only code with syntax highlighting; (3) A text filter that processes custom <ace> tags to embed and display code snippets within content with configurable syntax highlighting.
The module supports extensive customization options including theme selection (35+ themes like Monokai, Cobalt, Twilight), syntax mode selection (100+ language modes including PHP, JavaScript, HTML, Python, YAML), editor dimensions, font size, line numbers, print margins, invisible character display, word wrapping, and autocompletion.
Features
- Replaces Drupal textareas with Ace code editor featuring professional syntax highlighting and code editing capabilities in node and block edit forms
- Supports 100+ programming language syntax modes including PHP, JavaScript, HTML, CSS, Python, Ruby, Java, SQL, YAML, JSON, Markdown, and many more
- Provides 35+ color themes including popular options like Monokai, Cobalt, Twilight, Solarized Dark/Light, Tomorrow Night, and GitHub
- Enables autocompletion with Ctrl+Space keyboard shortcut while editing code
- Field formatter displays text field content as read-only syntax-highlighted code in entity view modes
- Text filter processes <ace> tags to embed syntax-highlighted code snippets directly in content with customizable attributes
- Configurable editor settings including height, width, font size, line numbers, print margins, invisible characters, and word wrapping
- Dynamically loads only required theme and mode JavaScript files to optimize performance
- Supports text formats integration allowing Ace editor to be used with any text format configuration
Use Cases
Editing HTML/PHP templates in content
Site builders or developers who need to store and edit HTML, PHP, or JavaScript code directly in node or block content can use Ace Editor for a professional coding experience. Configure a text format with Ace as the text editor, then use that format for content types that contain code. The syntax highlighting and autocompletion features make it much easier to write and maintain code snippets.
Displaying code examples in documentation
Technical documentation sites can use the Ace filter to embed beautifully formatted code examples directly in article content. Authors wrap code in <ace syntax="php" theme="monokai"> tags, and the filter renders the code with professional syntax highlighting. Different languages and themes can be used for different code blocks within the same content.
Code snippet field display
Content types that include a dedicated field for storing code (such as a 'Code Example' text_long field) can use the Ace formatter to display the field with syntax highlighting on the entity view. Configure the field display to use 'Ace Format' and select the appropriate syntax mode for the expected content.
Configuration file editing
When site administrators need to edit YAML, JSON, or other configuration formats directly in the Drupal interface, Ace Editor provides proper syntax highlighting and validation feedback through visual cues, reducing configuration errors.
Developer blog or tutorial site
A developer blog showcasing code tutorials can leverage all three features: use Ace Editor for writing article content, the filter for embedding code examples in the body, and the formatter for displaying complete code file contents stored in separate fields. Multiple themes can match the site's design aesthetic.
Tips
- Use Ctrl+Space to trigger autocompletion while editing code in the Ace editor
- The <ace> tag supports attributes to override default settings: theme, syntax, height, width, font-size, line-numbers, print-margin, and invisibles
- Example: <ace theme="monokai" syntax="php" height="400px">your code here</ace>
- For the filter, boolean attributes like line-numbers accept values '1' or '0' to enable or disable features
- Only one version of the Ace library is needed - the minified version (src-min or src-min-noconflict) is recommended for production
- Dynamic library loading means only the theme and mode files actually used are loaded, optimizing page performance
- The formatter displays content as read-only - users cannot edit the displayed code, making it safe for front-end display
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format_id}
When Ace Editor is selected as the text editor for a text format, additional settings become available to configure the editor's appearance and behavior. These settings apply to all textareas using this text format.
Permissions 1
Hooks 2
hook_library_info_build
Dynamically builds library definitions for all available Ace themes and syntax modes by scanning the Ace library directory for theme-*.js and mode-*.js files.
hook_library_info_alter
Alters library definitions to add the core ace.js file and ext-language_tools.js (for autocompletion) to the appropriate libraries based on the detected library path.
Troubleshooting 5
The Ace JavaScript library must be installed in the /libraries/ directory. Download ace-builds from https://github.com/ajaxorg/ace-builds or use Composer with npm-asset repository. Ensure ace.js is accessible at a path like /libraries/ace/ace.js or /libraries/ace-builds/src-min/ace.js. Only one version (minified, noconflict, etc.) is required.
Verify that: (1) The text format has 'Ace Editor' selected as the text editor at /admin/config/content/formats, (2) The user has permission to use that text format, (3) The Ace library is properly installed and detected.
Ensure the corresponding mode-*.js file exists in your Ace library installation. The module dynamically scans for available modes. If a mode is missing, download the complete ace-builds package which includes all language modes.
Enable the 'Ace Filter' for the text format used by your content at /admin/config/content/formats/manage/{format_id}. The filter must be enabled for the tags to be processed and displayed with syntax highlighting.
The module intentionally does not remove the 'Ace Editor' text format on uninstall to preserve content. If you're certain no content uses this format, manually disable or delete it at /admin/config/content/formats.
Security Notes 4
- The Editor plugin is marked as is_xss_safe = FALSE, meaning content is not guaranteed to be XSS-safe and should be used with appropriate text format filters
- The 'administer ace_editor' permission is marked as restricted access - grant this permission carefully
- Code displayed via the formatter or filter is rendered in a read-only mode, preventing client-side modification
- When using the filter with user-submitted content, ensure other appropriate text filters are in place to sanitize potentially malicious input