Updating a 10 year old Laravel post

by terry

In November of 2012, I had a short blog post about using Laravel (at the time v3) with the Redactor javascript code for wysiwyg textareas. It’s not bad, but could use an update.

First, I see “classic” Redactor is deprecated in favor of Redactor X, and they want you to pay for it. Since I don’t plan on actually using, I’m going to assume the docs work as expected. Second, Laravel is now on version 9, which is a long way from version 3. Though interestingly, the syntax is not that wildly different.

Begin by updating initial route, now located in “/routes/web.php”. Instead of the View facade, we can do this:

Route::get('redactor', function() {
    return view('redactor');
});

Easy! We could’ve left it as is, since View::make() still works (!!!) but this is a bit nicer.

Next, we can update the HTML for that view. In the original, it was using a non-Blade view which is a bit silly in 2022. Also, the Form facade was removed from Laravel in version 5, so you either use plain-old HTML form tags, or the HTML package from Laravel Collective, which is what I did.

<!DOCTYPE html>
<html>
   <head>     
         <title>Laravel 9 and Redactor</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="css/redactorx.min.css" />
   </head>
   <body>
         {!! Form::open() !!}
         {!! Form::label('mytext', 'My Text') }
         <br>
         {!! Form::textarea('mytext', '', ['id' => 'mytext']) !!}
         <br>
         {!! Form::submit('Send it!') !!}
         {!! Form::close() !!}
         <script src="js/redactorx.min.js"></script>
         <script type="text/javascript">
                RedactorX('#mytext', {
                    image: {
                        upload: '/redactorupload/'
                    }
                });
         </script>
   </body>
</html>

No more jQuery and fancy Blade code!

Then we update the route that will accept the upload, and again, it’s still pretty close to the original:

Route::post('redactorupload', function(Request $request) {
    $validation = Validator::make($request->all(), [
        'file' => 'image|max:10000'
    ]);

    if ($validation->fails()) {
        return false;
    }

    $filePath = $request->file('file')->store('public/images');
    if (empty($filePath)) {
        return false;
    }

    return response()->json(['filelink' => Storage::url($path)]);
});

The biggest difference is the Input facade was removed in favor of using the Request object in the closure. I also removed an unneeded else statement.

The final bit of code was simply echoing out the form input if you submitted it. Instead of doing a dd() (which still works), we can update it like so:

Route::post('redactor', function(Request $request) {
    return $request->all();
});

That’s it. Now we have updated some 10 year old code!

Leave a Reply