Ace Code Editor

The Editor
Ace Editor auto-completion feature

Project Description

Ace is a code editor written in JavaScript, allowing you to edit HTML, PHP and JavaScript (and more). in a very natural way. It provides syntax highlighting, proper indentation, keyboard shortcuts, auto-completion, code folding, find and replace (including regular expressions). Try out a demo of the editor here.

This module integrates the Ace editor into Drupal's node/block edit forms, for editing raw HTML/PHP/JavaScript etc. in a familiar way.
It supports:

  • node edit forms, including summary
  • blocks and beans edit forms
  • Panels pane editor
  • Devel PHP console

It also provides a display formatter, along with a text filter and an API to embed and show code snippets in your content.



Follow the installation steps in the README. An useful drush command is provided.


Edit HTML and PHP in your nodes and blocks like a pro

Go to admin/config/content/ace-editor and configure the module for
node/block editing. Then head over to a block or node containing a textarea with the correct text format and hack away!

Display fields using syntax highlighting

Manage the display of any textarea fields attached to a node and select the "Code syntax highlighting" format. This outputs the content of the field as a ready-only editor with syntax highlighting in your node view using the selected options.

Use syntax highlighting from your template files

You can use the ace_editor_add($content, $settings) function to add syntax-highlighting code display anywhere in your template files. An optional array contains settings as shown below.

Press Ctrl+Space to use the autocomplete option while coding

Get syntax highlighting and revision while using Devel's module PHP console

Embed code snippets in the body of your nodes or blocks

Add the syntax highlighting filter to any of your text formats. The module will now convert all content inside an <ace> tag to display the code using the selected options.

You can override the default options by adding attributes to the <ace> tag, for example:

<ace theme="twilight" height="200px" font-size="12pt" print-margin="1">SOME CODE</ace>

Check out the README for a complete list of attributes.

This module is periodically incorporating new features from the latest releases of the ACE Editor JS Library. Please checkout the CHANGELOG.txt for the latest updates applied to the dev branch.

Supporting organizations: 

Ace Code Editor项目的Drush安装命令:复制到剪贴板



7.x-1.8tar.gz (26.13 KB) | zip (31.66 KB)2016年12月22日发布说明简 | 繁 | 更多


8.x-1.x-devtar.gz (15.02 KB) | zip (21.68 KB)2017年1月23日发布说明简 | 繁 | 更多
7.x-1.x-devtar.gz (26.13 KB) | zip (31.66 KB)2016年12月22日发布说明简 | 繁 | 更多