Repository files navigation

Ace Editor is a code editor written in JavaScript, allowing you to edit HTML,PHP and JavaScript (and more). It provides syntax highlighting, properindentation, keyboard shortcuts, find and replace (including regularexpressions).

This module integrates the Ace editor into Drupal's node/block edit forms,for editing raw HTML/PHP/JavaScript (with more) in a familiar way.It also provides a display formatter, along with a text filter andan API to embed and show code snippets in your content.

• Requirements
• Installation
• Uninstallation
• Features
• Maintainers

This module requires theACE Editor JavaScript library

Please download any of the available builds of the latest version andcopy it under/libraries/ soace.js file can be found under{drupal_root}/libraries/{any-sub-dir}/ace.js. Alternatively, use Composer, see "Installation" below.

Install with Composer (recommended) or manually, by following these steps.

Downloading third-party libraries using Composer

Define npm-asset repository in the `composer.json`` file, to allow downloading the ACE Editor JavaScript library to the correct folder:

composer config repositories.assets composer https://asset-packagist.orgcomposer config --json extra.installer-types '["npm-asset", "bower-asset"]'composer config --json extra.installer-paths.web\/libraries\/ace '["npm-asset/ace-builds"]'composer config --unset extra.installer-paths.web\/libraries\/\{\$name\}composer config --json extra.installer-paths.web\/libraries\/\{\$name\} '["type:drupal-library", "type:bower-asset", "type:npm-asset"]'

Download the ACE Editor module and install it:

composer require drupal/ace_editor:~2.0drush en ace_editor

The Ace library will be downloaded to the/libraries folder with$ composer install/update. Only one version(minified, noconflict...) is required. Other folders (including/demo) can be removed.

1. Download the latest version of the Ace Editor athttps://github.com/ajaxorg/ace-builds/ or directlyviahttps://github.com/ajaxorg/ace-builds/archive/master.zipDo not use a version < 1.4.0.
2. Extract and place the files tree contents of only one of the releases(minified, noconflict...) under/libraries/ace so thatace.jsis located at/libraries/ace/ace.js.
3. Download, extract and copy the "Ace Editor" module to your/modules or/modules/contrib directory.
4. Enable the "Ace Editor" module on your Drupal Extent page,under the Administration heading. An "Ace Editor" filter formatis added. You can create a new Text format for use it, orenable the Ace editor for other filter formats at/admin/config/content/formats.

The module adds a text format named 'Ace Editor' on installation. This filteris not disabled when the module is uninstalled, to preserve any contentsaved using it. If you are sure that there is no valuable content in yourdatabase saved under the 'Ace Editor' filter format, you can manually disablethe filter format atadmin/config/content/formats.

Edit HTML, PHP, YAML... in your entities and blocks like a pro

Go toadmin/config/content/formats, create/edit a Text format and select 'Ace'as the Text Editor. Afterwards, configura the Editor settings. Then head over toa block or entity containing a textarea with the correct text format and hackaway!

Autocompletion

PressCtrl+Space to use the autocomplete option while coding.

Display fields using syntax highlighting

Manage the display of any text area fields attached to an entity and selectthe "Ace Editor" format. This outputs the content of the fieldas a ready-only editor, with syntax highlighting in your entity view usingthe selected options.

Embed code snippets in the body of your entities or blocks

Add the syntax highlighting filter to any of your text formats. The moduledisplays text inside an<ace> tag as code using the custom formatting optionsspecified as attributes to the<ace> tag.

You can override the default options by adding attributes to the<ace> tag

Here are the possible values:

theme  clouds = Clouds  clouds_midnight = Clouds Midnight  cobalt = Cobalt  crimson_editor = Crimson Editor  dawn = Dawn  idle_fingers = Idle Fingers  kr_theme = krTheme  merbivore = Merbivore  merbivore_soft = Merbivore Soft  mono_industrial = Mono Industrial  monokai = Monokai  pastel_on_dark = Pastel on dark  solarized_dark = Solarized Dark  solarized_light = Solarized Light  textmate = TextMate  twilight = Twilight  tomorrow = Tomorrow  vibrant_ink = Vibrant Ink

... and any othertheme-*.js file available in\libraries\ace

syntax  c_cpp = C/C++  clojure = Clojure  coffee = CoffeeScript  csharp = C#  css = CSS  groovy = Groovy  html = HTML  java = Java  javascript = JavaScript  json = JSON  ocaml = OCaml  perl = Perl  php = PHP  python = Python  scala = Scala  scss = SCSS  ruby = Ruby  svg = SVG  textile = Textile  xml = XML

... and any othermode-*.js file available in\libraries\ace

• height: 300px, 75% etc.
• width: 100%, 600px etc.
• font-size: All compatible CSS values for font-size
• line-numbers: 1 or 0 (on/off)
• print-margin: 1 or 0 (on/off)
• invisibles: 1 or 0 (on/off)

<ace theme="textmate" height="200px" font-size="12pt" print-margins="1"><ace theme="twilight" syntax="php" height="200px" width="50%"><ace height="100px" width="100%" invisibles="1">

Known limitations

• Support multiple fields using the AceFormatter with different settings(seehttps://www.drupal.org/project/ace_editor/issues/2999328)
• 'auto' height in Ace formatter(seehttps://www.drupal.org/project/ace_editor/issues/2846046)

• Growiel -growiel
• nylin -nylin
• Anatoly Kirillov -kiritoly
• Gonzalo Torrevejano -interdruper
• Boby aloysius johnson -boaloysius
• Rajab Natshah -rajab-natshah