Laravel and Redactor

by terry

I’ve been working on this book thing, and the bit I wrote about using Laravel with Redactor is quite nice.. if I do say so myself.  Here’s a bit…

First, WYSIWYG text editor javascript libraries are pretty hit and miss. But Redactor is brilliant. It looks good, it’s coded well, and it just works. Using it with Laravel is a PHP dev’s dream.  So to start, we need to make sure we have a copy of Redactor and have Laravel all set up.

In our routes.php file, we create a route to hold our form with the Redactor field

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

 

Then create a view named redactor.php.  I’m using straight PHP for the form, but Blade would work just as well.

<!DOCTYPE html>
<html>
   <head>     
         <title>Laravel and Redactor</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="css/redactor.css" />
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
         <script src="js/redactor/redactor.min.js"></script>
   </head>
   <body>
         <?php echo Form::open() ?>
         <?php echo Form::label('mytext', 'My Text') ?>
         <br>
         <?php echo Form::textarea('mytext', '', array('id' => 'mytext')) ?>
         <br>
         <?php echo Form::submit('Send it!') ?>
         <?php echo Form::close() ?>
         <script type="text/javascript">
               $(function() {
                     $('#mytext').redactor({
                           imageUpload: 'redactorupload'
                     });
               });
         </script>
   </body>
</html>

So we created a textarea with the name ‘mytext’, and make the id of that field the same as the name.  So to target it, and add Redactor to it, just use

$('#mytext').redactor();

In the imageUpload parameter, we pass the URL path where we post the image. In this case, it’s routing to ‘redactorupload’.  So let’s create that route.

Route::post('redactorupload', function()
{
   $rules = array(
         'file' => 'image|max:10000'
   );

   $validation = Validator::make(Input::all(), $rules);
   $file = Input::file('file');
   if ($validation->fails())
    {
        return FALSE;
    }
    else
    {
         if (Input::upload('file', 'public/images', $file['name']))
         {
            return Response::json(array('filelink' => 'images/' . $file['name']));
         }
         return FALSE;
    }
});

The image will automatically POST here. So we want to make sure it’s actually an image and is less than 10 megabytes… so we run those validations. If everything validates, we move it to its permanent location, and send out a json response.  Redactor expects the json key to be ‘filelink’ and the value to be the path to the image.  If everything worked, when you add the image, it will display in your Redactor textarea.

We can check what the code output looks like by creating a route to accept the Redactor data.

Route::post('redactor', function()
{
    return dd(Input::all());
});

File uploads through redactor are done pretty much the same way, except with the fileUpload parameter… and the json output should also include a ‘filename’ key.

Leave a Reply