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!
