conquer/codemirror Yii2 codemirror widget

extensionwidgetcodemirror

Codemirror widget for Yii2 framework

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

Installation

The preferred way to install this extension is through composer.

To install, either run

$ php composer.phar require conquer/codemirror "*"

or add

"conquer/codemirror": "*"

to the require section of your composer.json file.

Usage

use conquer\codemirror\CodemirrorWidget;

$form->field($model, 'code')->widget(
    CodemirrorWidget::className(),
    [
        '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::className(),
    [
        'presetsDir'=>'/path_to_your_presets',
        '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::className(),
    [
        '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.

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

  • 2.0.118 August 2018
  • 2.013 October 2015
  • 1.227 April 2015
  • 1.117 April 2015
  • 1.010 April 2015

Comments



2.0.1 is the latest of 5 releases



MIT license
Stats
34 github stars & 12 github forks
36 downloads in the last day
3126 downloads in the last 30 days
161039 total downloads