CodeMirror integration for vova07 Yii2 Redactor widget

[NickGoodwind]

CodeMirror integration for Yii2 Redactor widget

In this fork from the original vova07 Imperavi widget for Yii2, we created a new implementation to allow the correct integration with the CodeMirror API. In this fork, two files were changed, including the original redactor.js v10 and the Widget class. Also, a new CodemirroAsset asset bundle file was created to internally manage the codemirror assets for the Yii application. Finally, the CodeMirror assets were included inside the assets folder.

Here are the main changes:

Widget

class Widget extends BaseWidget
{
    ...
    protected function registerClientScripts()
    {
        ...
        if (isset($this->settings['codemirror']) && $this->settings['codemirror'] !== false) {
            CodemirrorAsset::register($view);
        }
        ...
    }
}

CodemirrorAsset

namespace vova07\imperavi;

use yii\web\AssetBundle;

/**
 * Codemirror asset bundle.
 *
 * @author NickGoodwind <nickgoodwind@gmail.com>
 */
class CodemirrorAsset extends AssetBundle
{
    public $sourcePath = '@vova07/imperavi/assets';
    
    public $js = [
        'codemirror/codemirror.js',
        'codemirror/mode/htmlmixed/htmlmixed.js',
    ];

    public $css = [
        'codemirror/codemirror.css'
    ];

    public $depends = [
        'app\modules\admin\assets\AdminAppAsset'
    ];
}

Redactor.js - Creation of a new method to implement the CodeMirror editor instant inside the Redactor.build function and modification of the Redactor.build.run function

run: function()
    {
        this.build.createContainerBox();
        this.build.loadContent();
        this.build.loadEditor();
        this.build.addCodeMirror(); // Added line
        this.build.enableEditor();
        this.build.setCodeAndCall();
}
...
addCodeMirror: function() 
{
    if(this.opts.codemirror) {
        var $el = (this.build.isTextarea()) ? this.$element : this.$textarea;
        console.log($el);
        var editor = CodeMirror.fromTextArea($el[0]);
    }
}