KindEditor for Yii2

A Yii2 widget wrapper for the KindEditor WYSIWYG HTML editor, with file upload and file-manager endpoints included.

Note: This fork patches several Linux-specific bugs that the upstream YiiChina package could not be updated with. Please follow the usage instructions in this README — examples elsewhere may contain typos that cannot be corrected there.

---

Languages: English · 中文

---

Table of Contents

• Features
• Requirements
• Installation
• Quick Start
• Editor Types
• Configuration
• Upload Action Options
• Testing
• Contributing
• License
• 中文文档

---

English

Features

• Full Yii2 InputWidget integration — works with or without an ActiveForm model.
• Six editor modes: full rich-text editor, upload button, color picker, file manager, image dialog, file dialog.
• Bundled upload + file-manager action with extension whitelisting and size limits.
• Ships the complete KindEditor 4.x assets (plugins, themes, i18n).

Requirements

Component	Version
PHP	>= 5.6 (7.4+ recommended)
Yii2	^2.0

Installation

Install via Composer:

composer require pjkui/kindeditor "*"

Or add the following to the require section of your composer.json:

"pjkui/kindeditor": "*"

Manual installation (not recommended)

If you copy the package into vendor/ without Composer, add the following line to vendor/composer/autoload_psr4.php so the classes are autoloaded:

'pjkui\\kindeditor\\' => array($vendorDir . '/pjkui/kindeditor'),

Quick Start

1. Register the upload action in your controller:

public function actions()
{
    return [
        'Kupload' => [
            'class' => 'pjkui\kindeditor\KindEditorAction',
        ],
    ];
}

⚠️ The action id must be Kupload — the widget hard-codes this route when generating uploadJson / fileManagerJson URLs.

2. Render the widget in your view:

use pjkui\kindeditor\KindEditor;

// Standalone
echo KindEditor::widget([]);

// Bound to a model attribute
echo $form->field($model, 'content')->widget(KindEditor::class, [
    'clientOptions' => [
        'allowFileManager' => 'true',
        'allowUpload'      => 'true',
    ],
]);

Editor Types

Set editorType to switch between rendering modes:

editorType	Description
(default)	Full rich-text editor on a <textarea>
uploadButton	Text input + "Upload" button for single-file upload
colorpicker	Text input + button that opens a color picker
file-manager	Text input + button that opens the server file browser
image-dialog	Text input + button that opens the image upload dialog
file-dialog	Text input + button that opens the generic file dialog

Example — image upload dialog bound to an article_pic attribute:

echo $form->field($model, 'article_pic')->widget(KindEditor::class, [
    'clientOptions' => [
        'allowFileManager' => 'true',
        'allowUpload'      => 'true',
    ],
    'editorType' => 'image-dialog',
]);

Configuration

All editor options are passed through the clientOptions array. See the official KindEditor documentation for the full list.

Full example with a custom toolbar:

use pjkui\kindeditor\KindEditor;

echo KindEditor::widget([
    'id' => 'thisID', // id of the generated textarea
    'clientOptions' => [
        'height' => '500',
        'items'  => [
            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code',
            'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',
            'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',
            'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|',
            'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', '|',
            'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough',
            'lineheight', 'removeformat', '|',
            'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr',
            'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about',
        ],
    ],
]);

Upload Action Options

KindEditorAction accepts the following properties when registered in actions():

Property	Default	Description
php_path	@webroot/	Server filesystem path used as the PHP root
php_url	@web/	URL that maps to php_path
root_path	{php_path}upload/	Upload root on the filesystem
root_url	{php_url}upload/	Upload root URL
save_path	{root_path}	Where new files are written
save_url	{root_url}	URL prefix for new files
max_size	1000000 (bytes)	Maximum upload size
ext_arr	see source	Allowed extensions keyed by image/flash/media/file

Example — override the upload directory:

public function actions()
{
    return [
        'Kupload' => [
            'class'     => 'pjkui\kindeditor\KindEditorAction',
            'root_path' => Yii::getAlias('@webroot') . '/attached/',
            'root_url'  => Yii::getAlias('@web')    . '/attached/',
            'max_size'  => 5 * 1024 * 1024, // 5 MB
        ],
    ];
}

Testing

This repository uses PHPUnit for unit tests.

composer install
composer test
# or run directly:
vendor/bin/phpunit

Contributing

Bug reports and pull requests are welcome on GitHub. Please make sure composer test passes before opening a PR.

License

Released under the MIT License. KindEditor itself is distributed under its original LGPL license.

---

中文

Yii2 专用的 KindEditor 富文本编辑器封装，内置上传与文件管理 Action。

说明： 本分支修复了一些 Linux 环境下的 Bug，由于 Yii China 无法更新上游，请以本 README 为准。

环境要求

组件	版本
PHP	>= 5.6（推荐 7.4+）
Yii2	^2.0

安装

推荐使用 Composer：

composer require pjkui/kindeditor "*"

或将以下内容加入 composer.json 的 require 部分：

"pjkui/kindeditor": "*"

手动安装（不推荐）

如果直接把包放入 vendor/，需在 vendor/composer/autoload_psr4.php 中添加：

'pjkui\\kindeditor\\' => array($vendorDir . '/pjkui/kindeditor'),

快速开始

1. 在控制器中注册上传 Action：

public function actions()
{
    return [
        'Kupload' => [
            'class' => 'pjkui\kindeditor\KindEditorAction',
        ],
    ];
}

⚠️ Action 名字必须是 Kupload，因为 Widget 在生成上传 URL 时硬编码了这个名字。

2. 在视图中渲染：

use pjkui\kindeditor\KindEditor;

echo KindEditor::widget([]);

// 或绑定到模型字段
echo $form->field($model, 'content')->widget(KindEditor::class, [
    'clientOptions' => [
        'allowFileManager' => 'true',
        'allowUpload'      => 'true',
    ],
]);

editorType 配置

editorType	说明
(默认)	富文本编辑器
uploadButton	自定义文件上传按钮
colorpicker	取色器
file-manager	文件管理器
image-dialog	图片上传对话框
file-dialog	文件上传对话框

示例 —— 图片上传对话框：

echo $form->field($model, 'article_pic')->widget(KindEditor::class, [
    'clientOptions' => [
        'allowFileManager' => 'true',
        'allowUpload'      => 'true',
    ],
    'editorType' => 'image-dialog',
]);

完整示例

use pjkui\kindeditor\KindEditor;

echo KindEditor::widget([
    'id' => 'thisID',
    'clientOptions' => [
        'height' => '500',
        'items'  => [
            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code',
            'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',
            'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',
            'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|',
            'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', '|',
            'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough',
            'lineheight', 'removeformat', '|',
            'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr',
            'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about',
        ],
    ],
]);

更多 clientOptions 参数请参考 KindEditor 官方文档。

测试

composer install
composer test

许可证

MIT License，详见 license.txt。