alexantr/yii2-ace

Ace editor widget for Yii 2

Ace editor widget for Yii 2

This extension renders a Ace Code Editor widget for Yii framework 2.0., _(*1)

, _(*2)

Installation

Install extension through composer:, _(*3)

composer require alexantr/yii2-ace

Note: The extension loads editor code from CDN., _(*4)

Usage

The following code in a view file would render an Ace widget:, _(*5)

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

If you want to use the Ace widget in an ActiveForm, it can be done like this:, _(*6)

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

Configuring the Ace options should be done using the clientOptions attribute:, _(*7)

<?= 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:, _(*8)

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

Setting themes and programming language mode:, _(*9)

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

Default mode is "html" and theme is "chrome"., _(*10)

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., _(*11)

You can change default path with presetPath attribute:, _(*12)

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

Preset file example:, _(*13)

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