Laravel‑KindEditor: Installation, Configuration, and Usage Guide

The Laravel‑KindEditor package wraps the KindEditor HTML editor for use in Laravel projects, supporting local, Qiniu, and Alibaba Cloud OSS storage.

Update Log 2018‑06‑15 Release v1.0.0 – completed the KindEditor core and integrated local, Qiniu, and OSS storage.

Installation Methods

1. Add the package to composer.json:

require:{
    "chenhua/laravel5-kindeditor": "~1.0"
}

Then run composer update.

2. Or install directly via Composer: composer require chenhua/laravel5-kindeditor 3. Register the service provider in config/app.php:

Chenhua\Kindeditor\KindeditorServiceProvider::class,

4. Publish the configuration file: php artisan vendor:publish --tag=kindeditor 5. Edit config/kindeditor.php to set the default driver and connection details (local, Qiniu, or Aliyun):

<?php
return [
    "default" => "local",
    "driver" => [
        "local" => [
            "prefix" => "uploads/kindeditor",
        ],
        "qiniu" => [
            "access_key" => "",
            "secret_key" => "",
            "bucket" => "",
            "prefix" => "",
            "domain" => "",
        ],
        "aliyun" => [
            "ak_id" => "",
            "ak_secret" => "",
            "bucket" => "",
            "end_point" => "",
            "prefix" => "",
        ],
    ],
];

Usage in Blade Templates

Add a textarea where the editor will be rendered:

<textarea id="editor_id" name="content" style="width:700px;height:300px;">HTML内容</textarea>
@{{ include('kindeditor::editor', ['editor' => 'editor_id']) }}

Include the required scripts:

<script src="/vendor/kindeditor/kindeditor-all-min.js"></script>
<script src="/vendor/kindeditor/lang/zh-CN.js"></script>

Initialize the editor with custom options:

KindEditor.ready(function(K) {
    window.editor = K.create('#' + '{{$editor}}', {
        uploadJson: "/org/upload_images",
        allowFileManager: false,
        formatUploadUrl: false,
        filePostName: 'file',
        allowImageUpload: true,
        extraFileUploadParams: { _token: '{{ csrf_token() }}' },
        items: [
            'undo','redo','justifyleft','justifycenter','justifyright','justifyfull',
            'insertorderedlist','insertunorderedlist','|','fontname','fontsize','|',
            'forecolor','bold','italic','underline','strikethrough','|','image',
            'pagebreak','link','unlink'
        ],
        afterBlur: function(){ this.sync(); }
    });
});

Backend JSON Response for Image Upload

$data = [
    'error' => 0, // success code
    'url'   => $imgUrl // OSS returned path
];
return json_encode($data);

Following these steps creates an HTML editor with id="editor_id" that supports real‑time preview and uploads images to the configured storage backend.