vova07 / yii2-imperavi-widget

Imperavi Redactor widget for Yii 2
Other
247 stars 99 forks source link

CodeMirror integration for vova07 Yii2 Redactor widget #169

Open NickGoodwind opened 2 years ago

NickGoodwind commented 2 years ago

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]);
    }
}