JavaScript PHP CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples first commit Mar 4, 2015
lang
php first commit Mar 4, 2015
plugins
themes
KindEditor.php
KindEditorAction.php
KindEditorAsset.php
README.md
Services_JSON.php
composer.json
kindeditor-all-min.js
kindeditor-all.js
kindeditor-min.js
kindeditor.js
license.txt

README.md

KindEditor

修复了linux下的一些bug,由于Yii China 无法更新这些信息,抱歉。使用方法务必参考本文,YiiChina上的方法有拼写问题,因为无法修改,所以一定要看这个!!!*

中文的使用说明在页面下部

install

Either run

$ php composer.phar require pjkui/kindeditor "*"

or add

"pjkui/kindeditor": "*"

to the require section of your composer.json file.

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

Usage example

add an actions() method in controller

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

##used in view :


echo \pjkui\kindeditor\KindEditor::widget([]);

or :

echo $form->field($model,'colum')->widget('pjkui\kindeditor\KindEditor',[]);

or :

<?= $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',
['clientOptions'=>['allowFileManager'=>'true',
'allowUpload'=>'true']]) 
?>

configure

you can configure clientOption and editorType to change the kindeditor's preference, the detail configure see the official websiteKindEditor website

###editorType configure

  1. Work as text editor,default configure.

usage:

 <?= $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',
        ['clientOptions'=>['allowFileManager'=>'true',
                            'allowUpload'=>'true'
                            ]
        ]) ?>
  1. uploadButtonKindediotr work as a upload file button ,can upload file/picture to the server automatic usage:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                    ['clientOptions'=>[
                                        'allowFileManager'=>'true',
                                        'allowUpload'=>'true'
                                        ],
                    'editorType'=>'uploadButton
                    ]) 
?>
  1. colorpickerkindeditor work as color picker usage:
<?= $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',
                                                    'editorType'=>'colorpicker'])
        ?>
  1. file-managerkindeditor work as file manager,can view and select the file which uploaded by it . usage:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                    ['clientOptions'=>[
                                'allowFileManager'=>'true',
                                'allowUpload'=>'true'
                                    ],
                        'editorType'=>'file-manager'
                        ]) 
        ?>
  1. image-dialogkindeditor work as image upload dialog. usage:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                        ['clientOptions'=>['allowFileManager'=>'true',
                                            'allowUpload'=>'true'
                                            ],
                        'editorType'=>'image-dialog'
                        ]) 
?>
  1. file-dialogkindeditor work as file upload dialog. usage:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                                ['clientOptions'=>['allowFileManager'=>'true',
                                                    'allowUpload'=>'true'],
                                'editorType'=>'file-dialog'
                                ])
    ?>

simple demo:

use \pjkui\kindeditor\KindEditor;
echo KindEditor::widget([
    'clientOptions' => [
        //editor size
        'height' => '500',
        //custom menu 
        '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'
        ]
]);

KindEditor中文手册

如何安装

第一种方法: 如果装了composer,可以运行这个命令

$ php composer.phar require pjkui/kindeditor "*"

第二种方法: 将

"pjkui/kindeditor": "*"

加入到项目 composer.json 文件的require 部分。

第三种方法: 直接将程序文件放到系统的vendor下面,其实建议用compaser,这个是比较方便和规范的安装方法,如果是拷贝的话,有一个文件需要修改,以保证这个kindeditor类被加载。 这个文件是/vendor/composer/autoload_psr4.php.添加一行

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

使用方法

##控制器:
在控制器中加入这个方法:

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

##视图:
先在视图中加入


echo \pjkui\kindeditor\KindEditor::widget([]);

或者:

echo $form->field($model,'colum')->widget('pjkui\kindeditor\KindEditor',[]);

或者:

<?= $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',
['clientOptions'=>['allowFileManager'=>'true',
'allowUpload'=>'true']]) 
?>

具体相关功能配置

编辑器相关配置,请在view 中配置,参数为clientOptions,比如定制菜单,编辑器大小等等,具体参数请查看KindEditor官网文档

editorType配置

  1. 配置为富文本编辑器,默认配置

示例:

<?= $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',
        ['clientOptions'=>['allowFileManager'=>'true',
                            'allowUpload'=>'true'
                            ]
        ])
 ?>
  1. 这时候配置kindeditor为上传文件按钮,可以自动上传文件到服务器 示例:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                    ['clientOptions'=>[
                                        'allowFileManager'=>'true',
                                        'allowUpload'=>'true'
                                        ],
                    'editorType'=>'uploadButton
                    ]) 
?>
  1. 配置kindeditor为取色器 示例:
<?= $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',
                                                    'editorType'=>'colorpicker'])
        ?>
  1. 配置kindeditor为文件管理器,可以查看和选着其上传的文件。 示例:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                    ['clientOptions'=>[
                                'allowFileManager'=>'true',
                                'allowUpload'=>'true'
                                    ],
                        'editorType'=>'file-manager'
                        ]) 
        ?>
  1. 配置kindeditor为图片上传对话框。 示例:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                        ['clientOptions'=>['allowFileManager'=>'true',
                                            'allowUpload'=>'true'
                                            ],
                        'editorType'=>'image-dialog'
                        ]) 
?>
  1. 配置kindeditor为文件上传对话框。 示例:
<?= $form->field($model, 'article_pic')->widget('pjkui\kindeditor\KindEditor',
                                ['clientOptions'=>['allowFileManager'=>'true',
                                                    'allowUpload'=>'true'],
                                'editorType'=>'file-dialog'
                                ])
    ?>

简单 示例:

use \pjkui\kindeditor\KindEditor;
echo KindEditor::widget([
    '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'
       ],
       'id'=>'thisID',//填写你想给textarea的id
]);