README

Description

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality. For more information please visit CodeMirror

Requirements

• PHP 7.4 or 8.x
• Yii 2.0
• asset-packagist repository configured in your application's composer.json (standard for Yii2 app templates)

Installation

Install the extension via Composer:

composer require conquer/codemirror:^2.2

Usage

use conquer\codemirror\CodemirrorWidget;

$form->field($model, 'code')->widget(
    CodemirrorWidget::class,
    [
        'preset'=>'php',
        'options'=>['rows' => 20],
    ]
);

You can use ready-made presets, or create your own. To do this, specify the folder to your presets.

use conquer\codemirror\CodemirrorWidget;

$form->field($model, 'code')->widget(
    CodemirrorWidget::class,
    [
        'presetsDir'=>'@app/codemirror-presets', // path or alias
        'preset'=>'sql',
    ]
);

In general, you can customize the widget directly specifying its properties.

use conquer\codemirror\CodemirrorWidget;
use conquer\codemirror\CodemirrorAsset;

$form->field($model, 'code')->widget(
    CodemirrorWidget::class,
    [
        'assets'=>[
            CodemirrorAsset::MODE_CLIKE,
            CodemirrorAsset::KEYMAP_EMACS,
            CodemirrorAsset::ADDON_EDIT_MATCHBRACKETS,
            CodemirrorAsset::ADDON_COMMENT,
            CodemirrorAsset::ADDON_DIALOG,
            CodemirrorAsset::ADDON_SEARCHCURSOR,
            CodemirrorAsset::ADDON_SEARCH,
        ],
        'settings'=>[
            'lineNumbers' => true,
            'mode' => 'text/x-csrc',
            'keyMap' => 'emacs'
        ],
    ]
);

JavaScript

For access the instance of CodeMirror from JavaScript, you can use CodeMirror.instances[] . Example:

    var instanceName = document.getElementById('textarea-id').dataset.codeMirror;

    var cm = CodeMirror.instances[instanceName];

    var code = cm.getValue();   // Get the current editor content
    /*
        cm.save();              // Copy the content of the editor into the textarea
        cm.toTextArea();        // Remove the editor, and restore the original textarea
    */

License

conquer/codemirror is released under the MIT License. See the bundled LICENSE.md for details.