Created
October 31, 2019 09:53
-
-
Save sanchezzzhak/94f7e87e87988c8e47358cde62e42230 to your computer and use it in GitHub Desktop.
Yii2 TuiEditor Widget
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php namespace app\widgets; | |
use app\assets\TuiEditorAsset; | |
use yii\web\JsExpression; | |
use yii\widgets\InputWidget; | |
use yii\helpers\Html; | |
use yii\helpers\Json; | |
/** | |
* Class TuiEditor | |
* @package app\widgets | |
*/ | |
class TuiEditor extends InputWidget | |
{ | |
private const JS_KEY = 'app/widgets/tui-editor'; | |
private $clientOptions = [ | |
'initialEditType' => 'markdown', | |
'previewStyle' => 'vertical', | |
'height' => 'auto', | |
'minHeight' => '300px', | |
'usageStatistics' => false, | |
'language' => 'ru', | |
]; | |
public function run() | |
{ | |
$id = $this->options['id']; | |
$tuiEditorId = "{$id}-tui-editor"; | |
$view = $this->getView(); | |
TuiEditorAsset::register($view); | |
$clientOptions = $this->clientOptions; | |
$clientOptions['events']['change'] = new JsExpression("function(){ | |
let input = $('#{$tuiEditorId}').closest('.tui-editor-widget').find('input'); | |
input.val(editor.getHtml()); | |
}"); | |
$clientOptions = Json::htmlEncode($clientOptions); | |
$jsCode = " | |
(function(){ | |
let options = {$clientOptions}; | |
options.el = document.querySelector('#{$tuiEditorId}'); | |
let editor = new tui.Editor(options); | |
})(); | |
"; | |
$view->registerJs($jsCode, | |
$view::POS_READY, | |
self::JS_KEY . $id | |
); | |
$value = $this->hasModel() | |
? $this->model->{$this->attribute} | |
: $this->value; | |
$input = $this->hasModel() | |
? Html::activeHiddenInput($this->model, $this->attribute, $this->options) | |
: Html::hiddenInput($this->name, $value, $this->options); | |
$editor = Html::tag('div', $value, [ | |
'id' => $tuiEditorId | |
]); | |
echo Html::tag('div', "{$input} {$editor}", [ | |
'class' => 'tui-editor-widget' | |
]); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php namespace app\assets; | |
use yii\web\AssetBundle; | |
class TuiEditorAsset extends AssetBundle | |
{ | |
public $js = [ | |
'https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js' | |
]; | |
public $css = [ | |
'https://uicdn.toast.com/tui-editor/latest/tui-editor.css', | |
'https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css', | |
'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css', | |
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css', | |
]; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment