Editeur syntaxique / MODx / USEVEN.INFO

Le plugin Ace intègre l'éditeur de code Ace dans MODx Revolution de manière simple et rapide.

Pour être utilisé dans les ressources celle-ci doivent avoir [ ]Éditeur de "texte riche" décochée.

Caractéristiques

Il est très simple. Vraiment.
Fonctionne de suite avec une configuration par défaut.
Utilise la dernière version 1.4.1 de Ace (vous voulez une autre version? Modifiez l'URL !)
Charge la bibliothèque Ace (et ses extensions) depuis le CDNJS (configurable)
CTRL-D pour dupliquer (configurable)
Complétion automatique sur CTRL-SPACE (configurable)
Mise en évidence de la syntaxe MODX
Intégration d'Emmet (configurable) Documentation
Support plein écran (F11 lorsque le curseur est dans l'éditeur)
Tout surligneur syntaxique pour vos chunk, snippet, TV, ressource!
Définissez un type de MIME spécifique pour vos chunck (comme un shebang)
Par exemple, text/x-sass doit avoir la syntaxe SASS en surbrillance
Tout surligneur syntaxique pour vos TVs!
Définissez un type de MIME spécifique pour vos chunck directement dans la description, par exemple text/html pour avoir un surlignage syntaxique HTML
Mise en retrait et retrait automatique
Rechercher et remplacer par des expressions régulières
Mise en évidence des parenthèses correspondantes
Affiche les caractères cachés
Glisser-déposer du texte à l'aide de la souris
Enveloppe de la ligne
Pliage des codes
Multiples curseurs et sélections
Vérificateur de syntaxe en direct
Couper, copier et coller

Installation

Aller dans le gestionnaire d'extention, installer Ace il fait parti des extra les plus utilisé.
Vous pouvez affiner sa configuration en allant dans les paramètre du système.

Propriétés du plugin Ace

Le plugin offre plusieurs propriétés utiles.

Notez qu'il est recommandé de créer un nouvel ensemble de propriétés au lieu de modifier l'ensemble par défaut. AcePath : URL ou chemin d'accès au fichier javascript ACE par défaut : https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js

Thème

ici

Thèmes lumineux

Thèmes sombres

par défaut : chrome

SoftWraps

par défaut : off

FontSize

par défaut : 12px

SoftTabs

par défaut : true

ReplaceCTRLDKbdShortcut

par défaut : true

Autocomplétion

par défaut : de base

SettingsMenu

par défaut : false

spellcheck

par défaut : false

EmmetPath

ici

par défaut : https://cloud9ide.github.io/emmet-core/emmet.js

Emmet

par défaut : false

AcePrintMarginColumn

par défaut : 0

ChunkDetectMIMEShebang

par défaut : true

ToggleFullScreenKeyBinding

par défaut : F11

ToggleFullScreenShowButton

par défaut : true

EditorHeight

par défaut : (utilise la hauteur par défaut de l'éditeur)

EditorTVHeight

par défaut : (utilise la hauteur par défaut de l'éditeur)

Cartographie des extensions de fichiers

.tpl: text/html
.htm: text/html
.html: text/html
.css: text/css
.scss: text/x-scss
.sass: text/x-sass
.less: text/x-less
.svg: image/svg+xml
.xml: application/xml
.xsl: application/xml
.js: application/javascript
.json: application/json
.php: application/x-php
.sql: text/x-sql
.txt: text/plain
.htaccess: application/x-extension-htaccess
.coffee: application/vnd.coffeescript
.litcoffee: application/vnd.coffeescript
.ts: application/x-typescript
.ini: text/x-ini
.ejs: text/x-ejs
.md: text/markdown
.pl: application/x-perl

Détection MIME pour les TV's

Par défaut, les TV's ne seront pas visualisées avec Ace.

Cependant, si vous avez une TV de type <textarea>, vous pouvez définir un type MIME dans sa description pour activer l'éditeur Ace pour cette TV.

text/x-smarty
text/html
application/xhtml+xml
text/css
text/x-scss
text/x-sass
text/x-less
image/svg+xml
application/xml
text/xml
text/javascript
application/javascript
application/json
text/x-php
application/x-php
text/x-sql
text/x-markdown
text/plain
text/x-twig

Détection MIME pour les Chunks (fonction ChunkDetectMIMEShebang)

Par défaut, les chunck sont en HTML et ils sont mis en évidence comme tels. Cependant, vous pouvez vouloir stocker d'autres types de données dans un morceau et souhaiter une mise en évidence appropriée. Par exemple, vous pourriez vouloir stocker directement du code Javascript, css, svg ou SASS, ou LESS, etc..

La propriété ChunkDetectMIMEShebang (activée par défaut) vous permettra de spécifier, si nécessaire, un type de MIME spécifique pour mettre en valeur votre chunk.

text/x-smarty
text/html
application/xhtml+xml
text/css
text/x-scss
text/x-sass
text/x-less
image/svg+xml
application/xml
text/xml
text/javascript
application/javascript
application/json
text/x-php
application/x-php
text/x-sql
text/x-markdown
text/plain
text/x-twig

Les exemples ci-dessous concernent un chunck qui est utilisé pour stocker du contenu SASS (le type correspondant est <li>text/x-sass</li> ou <li>text/x-scss</li>).

Vous pouvez spécifier cette valeur directement dans votre chunck, sur la première ligne (généralement à l'intérieur d'un commentaire):

Vous pouvez également préciser cette valeur dans la description du chunck.

Intégrer ACE à vos TVs

Ce plugin ajoute ACE a vos TVs.

Creer le plugin après avoir installé ACE.

entrez le code


            /*
            Add ACE code editor to your textarea TVs.
            Author: evd (hello@evd.me)
            */
            
            //Applique Ace au Tvs 3,4,5,7 qui doivent être en type d'entrée TexteArea
            $tvs = array(
                array(
                    'id' => 3,
                    'height' => '600px',
                    'mimeType' => 'text/html'
                ),
                array(
                    'id' => 4,
                    'height' => '200px',
                    'mimeType' => 'application/json'
                ),
                array(
                    'id' => 5,
                    'height' => '350px',
                    'mimeType' => 'application/json'
                ),
                array(
                    'id' => 7,
                    'height' => '600px',
                    'mimeType' => 'text/html'
                )
            );
            
            if ($modx->event->name != 'OnDocFormRender') {
                return;
            }
            
            if ($modx->getOption('which_element_editor', null, 'Ace') !== 'Ace') {
                return;
            }
            
            $script = '';
            foreach ($tvs as $tv) {
                $id = is_array($tv) ? $tv['id'] : $tv;
                $height = isset($tv['height']) ? $tv['height'] : '';
                $mimeType = isset($tv['mimeType']) ? $tv['mimeType'] : '';
                $tvId = '#tv' . $id;
                $setHeightScript = !empty($height) ? 'this.style.height="' . $height . '";' : '';
                $aceScript = 'MODx.ux.Ace.replaceTextAreas([this], "' . $mimeType . '");';
                $script .= 'Ext.each(Ext.query("' . $tvId . '"), function() { ' . $setHeightScript . $aceScript . '});' . PHP_EOL;
            }
            
            if ($script) {
                $modx->controller->addHtml('');
            }

Cocher OnDocRender
Modifier les parametres des TVs a affecté