Ace Code Editor

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, JS, etc... in a familiar way.

It supports:

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

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

D8 release

Thanks to boaloysius for the development of the initial D8 release.

Installation

Drupal 7

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

D7 Dependencies

• ACE Editor JavaScript library.
• Libraries API module.

Drupal 8

Follow the installation steps in the README. Please note that from the 8.x-1.1 release, the module includes a composer.json file that can be use to resolve the Ace library dependency: you may need to update your project's composer.json to include the required repository, see the README installation section and #3022330: composer installation fail discussion for details.

D8 Dependencies

• ACE Editor JavaScript library. Please download any of the available builds of the latest version and copy it under /libraries/ so ace.js file can be found in the following location: {drupal_root}/libraries/{any-sub-dir}/ace.js. Alternatively, use Composer (see module's composer.json).

Features

Editor: edit HTML, PHP, JS... in your nodes and blocks like a pro

• D7: go to admin/config/content/ace-editor and configure the module for node/block editing. Select 'Ace Editor' text format and enjoy the Ace editor.
• D8: go to admin/config/content/formats and select a format eg: Full HTML. Select Ace Editor from 'Text Editor'. Enjoy the Ace editor in the selected format.

Display fields using syntax highlighting

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

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.

Support to PHP console from Devel module (D7 only, try Devel Ace for D8)

Get syntax highlighting, revision and auto-completion while using Devel's module PHP console.

• Press Ctrl+Space to use the autocomplete option while coding

Use syntax highlighting from your template files (D7 only)

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.

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 7.x-1.x-dev branch.