Code Monkey home page Code Monkey logo

kindeditor's Introduction

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. uploadButton Kindediotr 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
]);

kindeditor's People

Contributors

pjkui avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

kindeditor's Issues

Missing required parameter "id" when instantiating "pjkui\kindeditor\KindEditorAction".

不知道哪里错了,把view里面的kindeditor相关内容删除后还是报错。
其他都是按照步骤来的啊。

Invalid Configuration – yii\base\InvalidConfigException
Missing required parameter "id" when instantiating "pjkui\kindeditor\KindEditorAction".

1. in /opt/lampp/htdocs/www/pgxt/vendor/yiisoft/yii2/di/Container.php at line 451
442443444445446447448449450451452453454455456457
        protected function resolveDependencies($dependencies, $reflection = null)
        {
            foreach ($dependencies as $index => $dependency) {
                if ($dependency instanceof Instance) {
                    if ($dependency->id !== null) {
                        $dependencies[$index] = $this->get($dependency->id);
                    } elseif ($reflection !== null) {
                        $name = $reflection->getConstructor()->getParameters()[$index]->getName();
                        $class = $reflection->getName();
                        throw new InvalidConfigException("Missing required parameter \"$name\" when instantiating \"$class\".");
                    }
                }
            }
            return $dependencies;
        }
    }

不好意思,这个是抄错了。测试良好。

上传图片总是失败

view中:
echo $form->field($model, 'content')->widget('pjkui\kindeditor\KindEditor',[
'clientOptions' => [
'allowUpload'=>'true',
'uploadJson' => '/media/index/upload',
]
]);

form表单也是这个上传地址:
<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="kindeditor_upload_iframe_1446532148134" action="/media/index/upload?dir=image"><div class="ke-dialog-row">

总是提示400报错

提个修改意见

在KindEditorAction文件中,指定了8个参数,分别是 :$config;$php_path;$php_url;$root_path;$root_url;$save_path;$save_url;$max_size;
这些参数目前您已经写在了初始化函数中,而且写死了,开发者很难修改。为了方便开发者对这些参数自定义,建议把初始化函数中的方法进项稍微修改,
比如定义save_url方法时可以:$this->save_url= $this->save_url?$this->save_url:$this->php_url . 'upload/';
这样的话,开发者在编写的时候,就可以在代码中这样直接定义: 'Kupload' => [ 'class' => 'pjkui\kindeditor\KindEditorAction', 'save_path'=>"/app/imgs", 'save_url'=>'http://imgs.test.dev/' ]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.