Состав платформы

Редактор кода

Редактор кода CodeMirror.

Другие решения раздела «Состав платформы»

Установка

Подключите пакет в корне проекта на SkeekS Платформе, затем примените миграции проекта.

composer require skeeks/yii2-widget-codemirror

Зависимости

  • yiisoft/yii2Yii^2.0.13
  • codemirror bower-asset/codemirrorJS-пакет=5.19.0

Инструкция из репозитория

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 skeeks/yii2-widget-codemirror "*"

or add

"skeeks/yii2-widget-codemirror": "*"

to the `require` section of your composer.json file.

Usage

use skeeks\widget\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 skeeks\widget\codemirror\CodemirrorWidget;

$form->field($model, 'code')->widget(
    CodemirrorWidget::className(),
    [
        'presetDir'=>'/path_to_your_presets',
        'preset'=>'sql',
    ]
);

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

use skeeks\widget\codemirror\CodemirrorWidget;
use skeeks\widget\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'
        ],
    ]
);

License

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

README на GitHub

Поддержка

Вопросы по установке и работе решения можно задать командой SkeekS или завести обращение в репозитории.

Обновления

v1.0.6

Виджет CodeMirror теперь корректно выглядит в бэкенде SkeekS (админка, личные кабинеты) в светлой и тёмной теме.

  • Исправлено форматирование строк. Общий стиль бэкенда html[data-sx-theme] pre добавлял каждой строке редактора фон, рамку, скругление и отступы. Строки теперь изолированы от него более специфичным селектором, перенос строк сохранён.
  • Цвета из темы бэкенда. Рамка, фон, панель номеров строк, курсор, выделение и фокус берутся из переменных --sx-color-* и следуют переключателю светлой и тёмной темы.
  • Подсветка в тёмной теме. Для стандартной темы cm-s-default добавлена читаемая на тёмном фоне палитра. Явно заданные темы CodeMirror не затрагиваются.

Стили лежат в новом бандле CodemirrorBackendAsset (assets/sx-codemirror.css), виджет подключает его автоматически. Все правила действуют только внутри html[data-sx-theme], поэтому на страницах сайта вне бэкенда внешний вид не меняется.

v1.0.5
v1.0.4
v1.0.3
v1.0.2