README

This extension renders a Ace Code Editor widget for Yii framework 2.0.

Installation

Install extension through composer:

composer require alexantr/yii2-ace 

Note: The extension loads editor code from CDN.

Usage

The following code in a view file would render an Ace widget:

<?= alexantr\ace\Ace::widget(['name' => 'attributeName']) ?>

If you want to use the Ace widget in an ActiveForm, it can be done like this:

<?= $form->field($model, 'attributeName')->widget(alexantr\ace\Ace::className(), [/*...*/]) ?>

Configuring the Ace options should be done using the clientOptions attribute:

<?= alexantr\ace\Ace::widget([ 'name' => 'attributeName', 'clientOptions' => [ 'fontSize' => 14, 'useSoftTabs' => true, 'maxLines' => 100, // need this option... ], ]) ?>

Note: Please set maxLines option or set CSS min-height for Ace container to make editor visible:

<?= alexantr\ace\Ace::widget([ 'name' => 'attributeName', 'containerOptions' => [ 'style' => 'min-height:100px', // ...or this style ], ]) ?>

Setting themes and programming language mode:

<?= alexantr\ace\Ace::widget([ 'name' => 'attributeName', 'mode' => 'javascript', 'theme' => 'twilight', 'clientOptions' => [/*...*/], 'containerOptions' => [/*...*/], ]) ?>

Default mode is "html" and theme is "chrome".

Using global configuration (presets)

To avoid repeating identical configuration in every widget you can set global configuration in @app/config/ace.php. Options from widget's clientOptions will be merged with this configuration.

You can change default path with presetPath attribute:

<?= alexantr\ace\Ace::widget([ 'name' => 'attributeName', 'presetPath' => '@backend/config/my-ace-config.php', ]) ?>

Preset file example:

<?php return [ 'fontSize' => 14, 'minLines' => 10, 'maxLines' => new \yii\web\JsExpression('Infinity'), 'useSoftTabs' => true, ];