Ben Ben - 6 months ago 120
PHP Question

FrozenNode Laravel-Administrator add image manager to wysiwyg field

So far I really love all the features of FrozenNode Laravel Administrator.

For a new project in Laravel 5.1 I need a simple CMS -
add/edit a page, add images and videos.

But the wysiwyg field does not include any type of media management.
Can I add it in some way?

The documentation doesn't offer this, but I think this requirement must be pretty common.

I am thinking about expanding the existing image selector functionality, but instead of URL I would like a "Choose Image" Button, which opens a popup or overlay where I can choose the image from a folder or upload a new image to that folder.
Similar to like its done in Wordpress.
Another possible way would be to just put an jquery file uploader there.

Is there a way to do this?enter image description here

So far I tried using CKEditors plugins, but the ones including browse/upload dont really work well with Laravel mostly because of routes.

Ben Ben
Answer

Solved it:

  1. Find the right ckeditor directory (my Laravel Webroot had more than 1): in my case packages/frozennode/administrator/js/ckeditor/
  2. Install http://imageuploaderforckeditor.altervista.org/ 2.a edit config.js as per instructions, again in the right directory
  3. Edit routes.php to forward to the proper url within Laravel, and at the same time attach a security token...

    Route::group(['middleware' => 'auth'], function () {
    
    // Redirect for ckeditor imageupload with token
    Route::any('admin/YOURTABLE/ckeditor/plugins/imageuploader/{subURL}', function ($subURL) {
    return redirect("packages/frozennode/administrator/js/ckeditor/plugins/imageuploader/".$subURL.'?'.$_SERVER['QUERY_STRING'].
    '&username='. urlencode(Auth::user()->email) .
    '&token='. md5( $tokenstring = Auth::user()->email. 'YOURKEY'. date('d.m.Y')));
    });
    

    });

Make sure to replace YOURTABLE and YOURKEY 4. edit imgbrowser.php, remove check for username and login and instead check the token:

if( !isset($_GET['username']) || !isset($_GET['token']) ) {
die('username / token missing');
} elseif( !($_GET['username']) || !($_GET['token']) ) {
    die('username / token missing');
} elseif( $_GET['token'] != ($tokenq = md5( $tokenstring = $_GET['username']. 'YOURKEY'. date('d.m.Y')))  ) {
    die('Token wrong.'. $tokenq. ' '.$tokenstring);
} else {
    $_SESSION["username"] = $_GET['username'];
}

Again make sure to replace YOURKEY

Thats it. Now you can upload, browse and select images in Laravel Frozennode Administrator! I really wished they would include this or something similar in the package by default, this is really basic wysiwyg stuff.

wysiwyg editor afterwardsimage selector and uploader