This extension adds rich text editor and plain text code editor (pretty formatted) widgets for Yii2 framework. The following editors are supported:
Summernote: The rich text WYSIWYG editor.
Codemirror: The plain text code editor with pretty formatting.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
The yii2-editors extension can be installed automatically or manually using one of these options:
Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-editors via composer package manager. Either run:
$ php composer.phar require kartik-v/yii2-editors "dev-master"
or add:
"kartik-v/yii2-editors": "dev-master"
to your application's composer.json file.
You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.
Summernote is a WYSIWYG rich text HTML input widget created by Krajee for Yii2 Framework which uses the Summernote WYSWIYG plugin and is styled for Bootstrap versions 3.x and above. Includes additional enhancements by Krajee for Bootstrap specific styling support, and ability to format code, and render preset configurable toolbars. Click the button below to view the documentation for the Summernote widget.
The Summernote widget supports all the options and settings included with
the yii\widgets\InputWidget as well as the kartik\base\InputWidget.
In addition, the following options are supported.
boolean, whether to use the style fonts (e.g. bold, italic, underline etc.) using the
style property on the span element. Defaults to false, whereby the fonts
will be directly styled using the bold (<b>), italic (<i>),
and underline (<u>) HTML tags instead of span's style property. Setting this
property will also default the styleWithSpan property within the pluginOptions which can be overridden within pluginOptions .
boolean, whether to use Krajee's presets for toolbar and other plugin settings.
Defaults to true whereby the following presets are set within pluginOptions by default. One can override
the value of these presets from within pluginOptions.
[
'height' => 300,
'dialogsFade' => true,
'toolbar' => [
['style1', ['style']],
['style2', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript']],
['font', ['fontname', 'fontsize', 'color', 'clear']],
['para', ['ul', 'ol', 'paragraph', 'height']],
['insert', ['link', 'picture', 'video', 'table', 'hr']],
],
'fontSizes' => ['8', '9', '10', '11', '12', '13', '14', '16', '18', '20', '24', '36', '48'],
'codemirror' => [
'theme' => Codemirror::DEFAULT_THEME,
'lineNumbers' => true,
'styleActiveLine' => true,
'matchBrackets' => true,
'smartIndent' => true,
],
]
boolean, whether to use Krajee CSS modifications to the Summernote Bootstrap styles. Defaults to true.
boolean, whether to enable full screen zoom capability and button on the toolbar. Applied only when useKrajeePresets is set to true.
Defaults to true.
boolean, whether to enable display of code view capability and button on the toolbar. Applied only when useKrajeePresets is set to true.
Defaults to true.
boolean, whether to enable display of help button on the toolbar. Applied only when useKrajeePresets is set to true.
Defaults to true.
boolean, whether to enable emojis hints. If set to true will set in line typing hints for emojis via the Github emoji API. Typically emojis start with a colon (:).
Defaults to true.
array, set a list of words displayed as hints when you type. If this is empty or not set, no hints will be displayed.
Defaults to an empty array [].
array, set a list of mentions displayed when typed with @ prefix. If this is empty or not set, no hints will be displayed.
Defaults to an empty array [].
boolean, whether to autoformat HTML code when switching to code view mode.
Defaults to true.
array, HTML attributes of the container to render the editor. The following special attributes are recognized.
tag: string, the HTML tag used for rendering the container. Defaults to div if not set.
The container property defaults to ['class' => 'form-control kv-editor-container'] for appropriate styling as per Bootstrap CSS and Krajee's styling defaults .
array, the HTML attributes/options for the base textarea input on which the summernote plugin is initialized.
array, plugin options supported by the Summernote plugin. Refer the plugin's documentation for details.
array, plugin jquery events supported by the Summernote plugin. Set this as key => value pairs where the key is the event name and the value is the Javascript function callback string for the event.
Summernote widget can be used with model or without model as seen in the example(s) below. use kartik\editors\Summernote;
use kartik\form\ActiveForm;
$form = ActiveForm::begin();
// Usage with model & active form including model validation
echo $form->field($model, 'notes')->widget(Summernote::class, [
'useKrajeePresets' => true,
// other widget settings
]);
// Usage without model
echo Summernote::widget([
'name' => 'comments',
'value' => '<b>Some Initial Value.</b>',
// other widget settings
]);
ActiveForm::end();
The CodeMirror widget by Krajee for Yii2 Framework is based on the CodeMirror plugin which is a versatile text editor for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code. A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.
boolean, whether to use Krajee's presets for toolbar and other plugin settings.
Defaults to true whereby the following presets are set within pluginOptions by default. One can override
the value of these presets from within pluginOptions.
[
'theme' => CodeMirror::DEFAULT_THEME, // default
'mode' => 'htmlmixed',
'lint' => true,
'lineNumbers' => true,
'styleActiveLine' => true,
'matchBrackets' => true,
'smartIndent' => true,
]
string, the name of the preset to use. Defaults to CodeMirror::PRESET_HTML. This can be one of the PRESET constants mentioned below.
When a preset is selected, it will be merged along with Krajee default preset settings
when useKrajeePresets is set to true. Set this to null or false if you do not want
any preset. You can also set a preset and override the settings for the preset in pluginOptions.
CodeMirror::PRESET_JS or 'js' for Javascript code
CodeMirror::PRESET_JSON or 'json' for Javascript code
CodeMirror::PRESET_HTML or 'html' for HTML code
CodeMirror::PRESET_PHP or 'php' for PHP code
CodeMirror::PRESET_GFM or 'gfm' for Github Flavored Markdown code
The following are the plugin settings automatically enabled within pluginOptions for each of the presets above:
[
CodeMirror::PRESET_JS => [
'modes' => ['javascript'],
'libraries' => [
'addon/display/placeholder.js',
'addon/selection/active-line.js',
'addon/edit/matchbrackets.js',
'addon/comment/continuecomment.js',
'addon/comment/comment.js',
'mode/javascript/javascript.js',
],
'continueComments' => 'Enter',
'extraKeys' => ['Ctrl-Q' => 'toggleComment'],
],
CodeMirror::PRESET_JSON => [
'mode' => 'application/json',
'libraries' => [
'addon/display/placeholder.js',
'addon/selection/active-line.js',
'addon/edit/matchbrackets.js',
'addon/comment/continuecomment.js',
'addon/comment/comment.js',
'mode/javascript/javascript.js',
],
'autoCloseBrackets' => true,
'lineWrapping' => true,
],
CodeMirror::PRESET_HTML => [
'mode' => [
'name' => 'htmlmixed',
'scriptTypes' => [
[
'matches' => new JsExpression("/\\/x-handlebars-template|\\/x-mustache/i"),
'mode' => null,
],
[
'matches' => new JsExpression("/(text|application)\\/(x-)?vb(a|script)/i"),
'mode' => 'vbscript',
],
],
],
'libraries' => [
'addon/display/placeholder.js',
'addon/selection/active-line.js',
'addon/selection/selection-pointer.js',
'addon/fold/xml-fold.js',
'addon/edit/matchbrackets.js',
'addon/edit/matchtags.js',
'mode/xml/xml.js',
'mode/javascript/javascript.js',
'mode/css/css.js',
'mode/vbscript/vbscript.js',
'mode/htmlmixed/htmlmixed.js',
],
'selectionPointer' => true,
],
CodeMirror::PRESET_PHP => [
'mode' => 'application/x-httpd-php',
'libraries' => [
'addon/display/placeholder.js',
'addon/selection/active-line.js',
'addon/edit/matchbrackets.js',
'mode/htmlmixed/htmlmixed.js',
'mode/xml/xml.js',
'mode/javascript/javascript.js',
'mode/css/css.js',
'mode/clike/clike.js',
'mode/php/php.js',
],
'matchBrackets' => true,
'indentUnit' => true,
'indentWithTabs' => true,
],
CodeMirror::PRESET_GFM => [
'mode' => [
'name' => 'gfm',
'tokenTypeOverrides' => [
'emoji' => 'emoji'
]
],
'libraries' => [
'addon/display/placeholder.js',
'addon/selection/active-line.js',
'addon/mode/overlay.js',
'mode/xml/xml.js',
'mode/markdown/markdown.js',
'mode/gfm/gfm.js',
'mode/javascript/javascript.js',
'mode/css/css.js',
'mode/clike/clike.js',
'mode/meta/meta.js',
],
],
]
boolean, whether to enable the toolbar button for pretty formatting code. Defaults to true.
boolean, list of addon library component files to include from the Codemirror CDN.
Enter as relative path to the Codemirror CDN base url. Note and cross check with the preset setting to understand the libraries that will be automatically set and merged when a preset is set.
This defaults to empty array []. This can also be overridden via pluginOptions.
array, the configuration of the toolbar for the Codemirror editor.
Set as keys to identify each of the button groups (Bootstrap styled) and the values corresponding to the keys is an array
containing the buttons as list of actions supported by code mirror plugin and options
as the HTML attributes for each button group. Defaults to the following setting:
[
'actions' => ['buttons' => ['undo', 'redo', 'selectall']],
'edit' => ['buttons' => ['copy', 'cut', 'paste']],
'format' => ['buttons' => ['indent', 'outdent', 'format']],
'comment' => ['buttons' => ['comment', 'uncomment']],
'view' => ['buttons' => ['fullscreen'], 'options' => ['class' => 'float-end float-right ml-auto ms-auto']],
]
array, the HTML attributes for the toolbar container. Defaults to ['class' => 'btn-toolbar'] for appropriate styling as per Bootstrap CSS and Krajee's styling defaults.
array, the position of the toolbar with respect to the editor. Can be either one of top or bottom). Defaults to top.
array, the configuration of the toolbar buttons. Set as an array of button names (matching the plugin's actions) and the values being an array of button label and title. The following is the default button configuration, which can be overridden via this property.
[
'undo' => [
'label' => '<i class="fas fa-undo"></i>',
'title' => Yii::t('kveditor', 'Undo (CTRL+Z)'),
],
'redo' => [
'label' => '<i class="fas fa-redo"></i>',
'title' => Yii::t('kveditor', 'Redo (CTRL+Y)'),
],
'selectall' => [
'label' => '<i class="fas fa-check-double"></i>',
'title' => Yii::t('kveditor', 'Select All (CTRL+A)'),
],
'copy' => [
'label' => '<i class="fas fa-copy"></i>',
'title' => Yii::t('kveditor', 'Copy (CTRL+C)'),
],
'cut' => [
'label' => '<i class="fas fa-cut"></i>',
'title' => Yii::t('kveditor', 'Cut (CTRL+X)'),
],
'paste' => [
'label' => '<i class="fas fa-paste"></i>',
'title' => Yii::t('kveditor', 'Paste (CTRL+V)'),
],
'format' => [
'label' => '<i class="fas fa-code"></i>',
'title' => Yii::t('kveditor', 'Pretty format'),
],
'indent' => [
'label' => '<i class="fas fa-indent"></i>',
'title' => Yii::t('kveditor', 'Indent'),
],
'outdent' => [
'label' => '<i class="fas fa-outdent"></i>',
'title' => Yii::t('kveditor', 'Outdent'),
],
'comment' => [
'label' => '<i class="fas fa-comment"></i>',
'title' => Yii::t('kveditor', 'Comment'),
],
'uncomment' => [
'label' => '<i class="fas fa-comment-slash"></i>',
'title' => Yii::t('kveditor', 'Uncomment'),
],
'fullscreen' => [
'label' => '<i class="fas fa-expand-arrows-alt"></i>',
'title' => Yii::t('kveditor', 'Toggle full screen'),
],
]
array, HTML attributes for each of the buttons that will be globally applied. Defaults to ['class' => 'btn btn-default btn-outline-secondary btn-light', 'data-tooltips' => 'true'] for appropriate styling as per Bootstrap CSS and Krajee's styling defaults .
array, HTML attributes for the toolbar button groups that will be globally applied. Defaults to ['class' => 'btn-group mr-2 me-2', 'role' => 'group'] for appropriate styling as per Bootstrap CSS and Krajee's styling defaults .
array, HTML attributes of the container to render the editor. The following special attributes are recognized.
tag: string, the HTML tag used for rendering the container. Defaults to div if not set.
The container property defaults to ['class' => 'form-control kv-code-container'] for appropriate styling as per Bootstrap CSS and Krajee's styling defaults .
array, the HTML attributes/options for the base textarea input on which the summernote plugin is initialized.
array, plugin options supported by the Codemirror plugin. Refer the plugin's documentation for details.
array, plugin jquery events supported by the Codemirror plugin. Set this as key => value pairs where the key is the event name and the value is the Javascript function callback string for the event.
Codemirror widget can be used with model or without model as seen in the example(s) below. use kartik\editors\Codemirror;
use kartik\form\ActiveForm;
$form = ActiveForm::begin();
// Usage with model & active form including model validation
echo $form->field($model, 'notes_1')->widget(Codemirror::class, [
'useKrajeePresets' => true,
// other widget settings
]);
// Usage without model
echo Codemirror::widget([
'name' => 'code',
'value' => '<b>Some Initial Value.</b>',
// other widget settings
]);
ActiveForm::end();
yii2-editors is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.