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, 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

Drupal 8

Follow the standard Drupal 8 module installation instructions.

D8 Dependencies

  • ACE Editor JavaScript library. Please download and copy it to /site/modules/ace_editor/libraries/ace/ so that you have the following path /site/modules/ace_editor/libraries/ace/src-noconfilct/ace.js

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 autocompletion 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.

Supporting organizations: 
D7/D8 module maintenance: bug fixing, support and feature requests.

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

注:个别模块仍需开启相关子模块。
周安装量: 
2295
维护状态: 
积极维护中
开发状态: 
积极开发中

推荐版本下载:

版本下载地址发布日期发布说明翻译下载
7.x-1.8tar.gz (26.13 KB) | zip (31.66 KB)2016年12月22日发布说明简 | 繁 | 更多

开发版本下载:

版本下载地址发布日期发布说明翻译下载
8.x-1.x-devtar.gz (14.92 KB) | zip (21.6 KB)2017年1月23日发布说明简 | 繁 | 更多
7.x-1.x-devtar.gz (26.13 KB) | zip (31.66 KB)2016年12月22日发布说明简 | 繁 | 更多