how to create Ckeditor in yii2

Question

Use below code

<?php echo $form->field($model, 'txtContent')->widget(CKEditor::className(), [
    'editorOptions' => [
        'preset' => 'full', 
        'inline' => false, 
    ],
]); ?>

It's display the Error (#1).

Use following location for download the ckeditor zip file https://github.com/MihailDev/yii2-ckeditor

Please help anyone....

Answer 1

Because you downloaded it manually, Widget can not be loaded by "autoload".

you must install it via Composer. Tutorial here.

type this in command. At the root of the project:

php composer.phar require --prefer-dist mihaildev/yii2-ckeditor "*"

Or edit the autoload_psr4 and ... file in the composer folder(To record keys), which is not recommended.

For preset, in addition to standard - BASIC - FULL,

 <?= $form->field($model, 'text')>widget(\dosamigos\ckeditor\CKEditor::className(), [
            'preset' => 'basic',
             # 'options' => ['rows' => 6], // no need. textarea is hidden.
        ]) ?>

you can also customize:

use dosamigos\ckeditor\CKEditor;

<?php $form = ActiveForm::begin(['id' => 'help-form']); ?>

    <?= $form->field($model, 'title')->textInput(); ?>

    <?= $form->field($model, 'body')->widget(CKEditor::className(), [
        'preset' => 'custom',
        'clientOptions' => [
        # 'extraPlugins' => 'pbckcode', *//Download already and in the plugins folder...*
            'toolbar' => [
                [
                    'name' => 'row1',
                    'items' => [
                        'Source', '-',
                        'Bold', 'Italic', 'Underline', 'Strike', '-',
                        'Subscript', 'Superscript', 'RemoveFormat', '-',
                        'TextColor', 'BGColor', '-',
                        'NumberedList', 'BulletedList', '-',
                        'Outdent', 'Indent', '-', 'Blockquote', '-',
                        'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'list', 'indent', 'blocks', 'align', 'bidi', '-',
                        'Link', 'Unlink', 'Anchor', '-',
                        'ShowBlocks', 'Maximize',
                        // 'pbckcode', 
                    ],
                ],
                [
                    'name' => 'row2',
                    'items' => [
                        'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Iframe', '-',
                        'NewPage', 'Print', 'Templates', '-',
                        'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-',
                        'Undo', 'Redo', '-',
                        'Find', 'SelectAll', 'Format', 'Font', 'FontSize',
                        'base64image',
                    ],
                ],
            ],
        ],
    ]);
    ?>

    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?>
    </div>

<?php  ActiveForm::end();?>

OR

'clientOptions' => [
                        // 'skin'=> $type,
                        'toolbar' => [
                            ['items' => [
                                    'Source', '-',
                                ] ],
                            ['items' => [
                                    'Bold', 'Italic', 'Underline', 'Strike', '-',
                                    'NumberedList', 'BulletedList', '-',
                                ] ], .........

For other skins, you can manually download skins or packages from here And replace at the following address:

...\vendor \ ckeditor \ ckeditor

You can use several skins dynamically.

$type = moono-dark;
#code...
      'skin'=> $type,

Inline:

<?php \dosamigos\ckeditor\CKEditorInline::begin(['preset' => 'custom', 'clientOptions' => [
    'extraPlugins' => 'pbckcode',
    'toolbarGroups' => [
        ['name' => 'undo'],
        ['name' => 'pbckcode'] // NEW PLUGIN!
    ]
]]) ?>

Answer 2

<?=    
use zxbodya\yii2\tinymce\TinyMce;

        $form->field($model, 'content')->widget(TinyMce::className(), [
            'options' => ['rows' => 15],
            'fileManager' => [
                'class' => \zxbodya\yii2\elfinder\TinyMceElFinder::className(),
                'connectorRoute' => 'el-finder/connector',
            ],
            'settings' => [
                'valid_elements' => '*[*]'
            ],
        ])
        ?>

Answer 3

Add the beginning of your codes

use mihaildev\ckeditor\CKEditor;

Answer 4

Two example of editor showing 1) yii2-ckeditor-widget 2) vova07 / yii2-imperavi-widget

A) yii2-ckeditor-widget

Go to your root directory. Like, my Yii Project is in htdocs/Yii.

So, type this in command.

Step - 1) root@stackinfo-desktop:~# cd /opt/lampp/htdocs/yii

Step - 2) root@stackinfo-desktop:~# cd /opt/lampp/htdocs/yii# php composer.phar require "2amigos/yii2-ckeditor-widget" "*"

It will Show like :

./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) Nothing to install or update Writing lock file Generating autoload files

OR

Step - 2) Go to htdocs/Yii/composer.json file

composer.json

Find, 'require' section. Add this line "2amigos/yii2-ckeditor-widget" : "*" to it.

"require": {
        .
        .
        "2amigos/yii2-ckeditor-widget" : "*"
    }

So, now extension is installed

Step - 3) Go to your page where you have to use it.

<?
use dosamigos\ckeditor\CKEditor;

.
.
// Your code.
.
.
<?= $form->field($model, 'description')->widget(CKEditor::className(), [
    'options' => ['rows' => 6],
    'preset' => 'basic'
]) ?> 

---

B) vova07 / yii2-imperavi-widget

Go to your root directory. Like, my Yii Project is in htdocs/Yii.

So, type this in command.

Step - 1) root@stackinfo-desktop:~# cd /opt/lampp/htdocs/yii

Step - 2) root@stackinfo-desktop:~# cd /opt/lampp/htdocs/yii# php composer.phar require --prefer-dist vova07/yii2-imperavi-widget "*"

It will Show like :

./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) - Installing vova07/yii2-imperavi-widget (1.2.10)
Downloading: 100%

Writing lock file Generating autoload files

OR

Step - 2) Go to htdocs/Yii/composer.json file

composer.json

Find, 'require' section. Add this line "vova07/yii2-imperavi-widget": "*" to it.

"require": {
        .
        .
        "vova07/yii2-imperavi-widget": "*"
    }

So, now extension is installed

Step - 3) Go to your page where you have to use it.

<?
use vova07\imperavi\Widget;

.
.
// Your code.
.
.
<?= $form->field($model, 'description')->widget(Widget::className(), [
    'settings' => [
    'lang' => 'ru',
    'minHeight' => 200,
    'plugins' => [
      'clips',
      'fullscreen'
    ]
  ]
]);?>

[NOTE : 'description' is nothing but your attribute.]

Answer 5

make sure that You tell us what error says, You can compare Your code with this working sample:

<?php    
use dosamigos\ckeditor\CKEditor;

    $form = ActiveForm::begin();
    echo $form->field($model, 'attribute_name')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'advanced'
    ]);

Widget installed by

composer require 2amigos/yii2-ckeditor-widget:~1.0