Quickly Integrate Baidu UEditor into Laravel 5 with Cloud Storage Support

Introduction

Many developers need a rich‑text editor for article publishing, and integrating one often leads to compatibility issues. This guide recommends Baidu's UEditor for Laravel 5 because it can be added in minutes and supports local or Qiniu cloud storage.

Installation

Add the package to composer:

"riverslei/laravel-ueditor": "*"

Then run:

composer install

or

composer update

Register the service provider in config/app.php :

Riverslei\UEditor\UEditorServiceProvider::class,

Publish the assets:

php artisan vendor:publish

Configuration

The command creates config/ueditor.php . Important settings include:

core.baseurl – the site root URL (required unless using Qiniu).

core.mode – upload mode, local or qiniu .

Qiniu credentials: accessKey , secretKey , bucket , url .

Various upload limits and path formats for images, videos, scrawls, etc.

Usage

Create a controller, e.g. php artisan make:controller PhotoController , and add a route:

Route::get('/', 'PhotoController@index');

In the controller return the view provided by the package:

/**
 * Test method
 * @return \Illuminate\Http\Response
 */
public function index()
{
    return view('vendor.UEditor.test');
}

In the Blade view include the editor assets and initialize UEditor:

@include('UEditor::head')
<form method="post">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <textarea id="container" name="content">Your initial content</textarea>
    <input type="submit" value="Submit">
</form>
<script type="text/javascript">
    var ue = UE.getEditor('container', {
        initialFrameWidth : 1200,
        initialFrameHeight : 350,
    });
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
    });
</script>

Adjust /public/laravel-ueditor/ueditor.config.js to hide unwanted toolbar buttons if needed.

Conclusion

Following these steps you can quickly embed a fully functional rich‑text editor in a Laravel project, with optional cloud storage for uploaded media.