editor. Redactor is a newer library but is very well coded and has gained quite a bit of
popularity in a short amount of time. For this recipe, we’ll apply Redactor to our Laravel form,
and create routes to allow for image uploads through Redactor.
We need to download a copy of Redactor from https://github.com/dybskiy/
redactor-js/tree/master/redactor. Download redactor.min.js and save it to the
public/js directory. Download redactor.css and save it to the public/css directory.
How to do it…
To complete this recipe, follow these steps:
1. Create a route in our routes.php file to hold our form with the redactor field:
2. Create a view in our app/views directory and name it as redactor.php:
<title>Laravel and Redactor</title>
<link rel=”stylesheet” href=”css/redactor.css” />
<?= Form::open() ?>
<?= Form::label(‘mytext’, ‘My Text’) ?>
<?= Form::textarea(‘mytext’, ”, array(‘id’ =>
<?= Form::submit(‘Send it!’) ?>
<?= Form::close() ?>
3. Make a route that will handle the image upload:
$rules = array(
‘file’ => ‘image|max:10000’
$validation = Validator::make(Input::all(), $rules);
$file = Input::file(‘file’);
if ($file->move(‘files’, $file->
return Response::json(array(‘filelink’ =>
‘files/’ . $file->getClientOriginalName()));
4. Create another route to show our form input after it’s submitted:
How its works..
After creating our form route, we create the view to hold our form HTML. In the head of the
page, we load in the redactor CSS, the jquery library (using Google’s CDN), and the redactor
Our form will only have one field, a text area named mytext. In our script area, we initialize
Redactor on the text area field and set the imageUpload parameter to a route or controller
that will accept the image upload. Ours is set to redactorupload, so we create a route for it
that accepts post data.
In our redactorupload route, we do some validation and, if everything is okay, the image
will upload to our images directory. To get the image to display in our text area, it needs a
JSON array with a file link as the key and the image path as the value. For this, we’ll use
Laravel’s built-in Response::json method, and pass in an array with the image’s location.
On our form page, if the image validated and uploaded correctly, Redactor will display the image
inside the text area. If we submit, we’ll see the text included the <img> tag and the image path.