如何在 yii2 中创建 Ckeditor

Question

使用下面的代码

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

它显示错误（#1）。

使用以下位置下载 ckeditor zip 文件 https://github.com/MihailDev/yii2-ckeditor

请帮助任何人......

Answer 1

确保您告诉我们错误是什么，您可以将您的代码与此工作示例进行比较：

<?php    
use dosamigos\ckeditor\CKEditor;

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

由

安装的小部件

composer 需要 2amigos/yii2-ckeditor-widget:~1.0

Answer 2

两个显示1) yii2-ckeditor-widget 2) vova07 / yii2-imperavi-widget的编辑器示例

A) yii2-ckeditor-widget

转到您的根目录。比如，我的 Yii 项目在htdocs/Yii.

所以，在命令中输入这个。

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

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

它会显示如下：

./composer.json 已更新 包信息更新依赖（包括require-dev） 无需安装或更新写作 锁定文件生成自动加载文件

或

步骤 - 2) 转到 htdocs/Yii/composer.json 文件

composer.json

查找“require”部分。将这一行 "2amigos/yii2-ckeditor-widget" : "*" 添加到它。

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

所以，现在扩展安装了

步骤 - 3) 转到您必须使用它的页面。

<?
use dosamigos\ckeditor\CKEditor;

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

---

B) vova07 / yii2-imperavi-widget

转到您的根目录。比如，我的 Yii 项目在htdocs/Yii。

所以，在命令中输入这个。

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

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

它会显示如下：

./composer.json 已更新 包信息更新依赖（包括require-dev） - 安装 vova07/yii2-imperavi-widget (1.2.10)
下载：100%

写入锁定文件生成自动加载文件

或

步骤 - 2) 转到 htdocs/Yii/composer.json 文件

composer.json

查找“需要”部分。将这一行 "vova07/yii2-imperavi-widget": "*" 添加到它。

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

所以，现在扩展安装了

步骤 - 3) 转到您必须使用它的您的页面。

<?
use vova07\imperavi\Widget;

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

[注意：“描述”只是您的属性。]

Answer 3

因为是手动下载的，所以无法通过“autoload”加载Widget。

您必须通过 Composer 安装它。教程here.

在命令中输入这个。在项目的根目录：

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

或者编辑 composer 文件夹中的 autoload_psr4 和 ... 文件（录制键），不推荐。

对于预设，除了标准 - BASIC - 已满，

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

您还可以自定义：

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();?>

或

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

对于其他皮肤，您可以从here手动下载皮肤或包 并在以下地址替换：

...\vendor\ckeditor\ckeditor

您可以动态使用多个皮肤。

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

内联：

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

Answer 4

添加代码的开头

use mihaildev\ckeditor\CKEditor;

Answer 5

<?=    
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' => '*[*]'
            ],
        ])
        ?>