alexantr/yii2-ace

Ace editor widget for Yii 2

1.1.1 2018-08-08 06:01 UTC

Requires

• yiisoft/yii2: ~2.0.5

MIT

• Alex Yashkin

• code
• editor
• widget
• ace

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,
];