Skip to content

Vardot/ace_editor

Repository files navigation

Ace Editor Module for Drupal 8 ( https://drupal.org/project/ace_editor )
==============================
by boaloysius, https://www.drupal.org/u/boaloysius
by interdruper, https://www.drupal.org/u/interdruper


Description
===========

AceEditor is a code editor written in JavaScript, allowing you to edit HTML,
PHP and JavaScript (and more). It provides syntax highlighting, proper
indentation, keyboard shortcuts, find and replace (including regular
expressions).

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 and
an API to embed and show code snippets in your content.


Non-core dependencies
=====================

None.

Installation
============

a) Using Composer:

    If you want Composer to automatically download the Ace Library
    to the /libraries folder when installing the module, you must
    update your root project composer.json in the following sections:

      "extra" section: add the following:

          "installer-types": [
              "npm-asset"
          ],
          "installer-paths": {
              "libraries/{$name}": [
                  "type:drupal-library",
                  "type:npm-asset"
              ]
          }

      "repositories" section: add the following:

          "assets": {
              "type": "composer",
              "url": "https://asset-packagist.org"
          } 
    
    (see details: https://www.drupal.org/docs/develop/using-composer/using-composer-to-install-drupal-and-manage-dependencies)


    After the previous updates, run:

    $ composer require 'drupal/ace_editor:^1.0' 

    or

    $ composer require 'drupal/ace_editor:1.x-dev'

    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.

b) Manually:
    
    1. Download the latest version of the Ace Editor at
       https://github.com/ajaxorg/ace-builds/ or directly
       via https://github.com/ajaxorg/ace-builds/archive/master.zip
       Do 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 that ace.js 
       is 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 format
       is added. You can create a new Text format for use it, or
       enable the Ace editor for other filter formats at 
       /admin/config/content/formats.

Uninstallation
==============

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


Features
========

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

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

Autocompletion
--------------

Press Ctrl+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 select
the "Ace Editor" format. This outputs the content of the field
as a ready-only editor, with syntax highlighting in your entity view using
the 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 module
displays text inside an <ace> tag as code using the custom formatting options
specified 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 other theme-*.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 other mode-*.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)

Examples:
      <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 in the 8.x releases
=====================================

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