boaloysius's sandbox: Ace Editor Drupal 8

Project Description

This project port Ace Editor module for Drupal 7 to Drupal 8.

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
• It also provides a display formatter, along with a text filter and an API to embed and show code snippets in your content.

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

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

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>


Ace Editor Library

Components

• Ace Editor
• Ace Formatter
• Ace Filter

How to use this module

• Editor

• Install this module
• Goto example.com/admin/config/content/formats and select a format eg: Full HTML
• Select Ace Editor from 'Text Editor'
• Save Settings
• Goto example.com/node/add/article and in the text formatter field select the just opted format eg: Full HTML
• You can see the editor appearing

• Formatter

• Select display settings of any content type eg: Goto example.com/admin/structure/types/manage/article/display
• Select a field of type "text_with_summary" eg: boby field in freshly installed drupal
• From format option select 'Ace Format' and select the gear button appered
• Change the formatter settings if needed.
• Click update and Save Settings both
• Goto to corresponding saved content eg: article
• You can see the read_only Ace Formatter appearing

• Filter

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

Library installation

Ace library is missing. Please download it from Ace Editor Page. Once downloaded move 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