Posted in Laravel

How to Install and Use CKEditor 4 in Laravel

   Updated on October 12, 2021  53 Comments

Do you want to install CKEditor in Laravel? CKEditor is a WYSIWYG(what you see is what you get) HTML editor that allows us to write rich text formats. In this article, I show you how to install and use CKEditor in Laravel. I will also explain how one can upload images in CKEditor.

Why Need to Use CKEditor?

A rich text editor is necessary to write rich content for your pages or articles. On the website, we need to have different elements like images, paragraphs, links, etc. All these different elements can be easily added using the CKEditor.

HTML provides a textarea element for writing description. But, it comes with limitations. In textarea, it’s not easy and user-friendly to write other HTML elements like p, div, img, etc.

To overcome such limitations, you can use CKEditor which itself is a rich text editor. It allows us to insert HTML elements between content. Our final editor will look like the below screenshot.

Laravel CKEditor

Install CKEditor in Laravel

There are 2 ways to install CKEditor in Laravel – CDN or CKEditor package. You can get both resources from their official download page.

The CDN link is //cdn.ckeditor.com/4.16.2/standard/ckeditor.js. If you go for CDN you don’t need to download anything from the CKEditor website.

You may want to install CKEditor without CDN. In that case, download the package(Standard Package recommended) on your machine. Next, create a folder ckeditor under the public directory of your Laravel project. And inside this ckeditor folder copy below files and folders from the downloaded package.

CKEditor Files

How to Use CKEditor in Laravel

At this stage, you are done with installing the CKEditor. Now let’s see how to use the CKEditor.

Let’s say you have a <code>textarea</code> that should get replaced by CKEditor. To do so I am adding an id  summary-ckeditor to the  textarea.

<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea>

Next, you need to include ckeditor.js file and write a JavaScript code that replaces textarea with CKEditor.

<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>

Above JavaScript code replaces textarea with the CKEditor. If you want to use CDN then the above code would be as follow:

<script src="//cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>

Now if you go to the browser you should be able to see the CKeditor. You can add your content to the editor and use it on your website. To get the content added in CKEditor use the statement below.

$content = $request->input(‘summary-ckeditor’);

Upload and Insert Image in CKEditor

CKEditor by default does not give the option to upload the image. If you want this option then keep reading. It needs to add a Laravel route, write a code for image upload, and some JavaScript. First, to enable the image upload option you need to call CKEditor in the following way.

<script>
CKEDITOR.replace( 'summary-ckeditor', {
    filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
    filebrowserUploadMethod: 'form'
});
</script>

Here for the key filebrowserUploadUrl I passed the route URL and csrf token. Let’s define the route upload as follows.

Route::post('ckeditor/image_upload', 'CKEditorController@upload')->name('upload');

Reload the page. Now if you click on CKEditor’s image icon you will see the image upload option as shown below.

Image Upload in CKEditor

In order to insert the uploaded image in CKEditor, you need to upload the image on the server and send back an image URL. For storing an image on a server, I’ll use Laravel storage. For this, I need to create a symbolic link(symlink) of a storage folder. Run the command below to create a symlink:

php artisan storage:link

The route ‘upload’ map with the upload method of CKEditorController. Create a controller CKEditorController and define upload method in it as follows:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class CKEditorController extends Controller
{
    public function upload(Request $request)
    {
        if($request->hasFile('upload')) {
            //get filename with extension
            $filenamewithextension = $request->file('upload')->getClientOriginalName();
      
            //get filename without extension
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
      
            //get file extension
            $extension = $request->file('upload')->getClientOriginalExtension();
      
            //filename to store
            $filenametostore = $filename.'_'.time().'.'.$extension;
      
            //Upload File
            $request->file('upload')->storeAs('public/uploads', $filenametostore);
 
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('storage/uploads/'.$filenametostore);
            $msg = 'Image successfully uploaded';
            $re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
             
            // Render HTML output
            @header('Content-type: text/html; charset=utf-8');
            echo $re;
        }
    }
}

That’s it! Now try to upload the image from CKEditor’s built-in image option and you will get the image added in the editor.

I hope you understand how to install and use CKEditor in Laravel. Please share your thoughts and suggestions in the comment below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

53 thoughts on “How to Install and Use CKEditor 4 in Laravel”

  1. sorry i put facebook url, cause i haven’t website.

    i want ask how if error when i send it to the server in image upload and error is HTTP error occurred during file upload (error status: 405). in header response the message error is “The POST method is not supported for this route. Supported methods: GET, HEAD.”

    Reply

  9. I try this one on windows, then it functions well but when i put it on linux server the image upload does not function.
    can some one help me?

    Reply

  10. Good system, but I need code highlighting for programming languages. Please tell me how to implement code highlighting in ckeditor, for example php, css, sql, html. P.S. everything is simple: 1) add a plugin to ckeditor. 2) add the language selection button to the ckeditor panel. 3) Then add everything to the vendor. http: / / ckeditor. com / ke4/addon/prism

    Reply

  17. I save the images to the Storage folder and they are physically deposited there, already run in CMD $ php artisan storage: link, the folder pointing to storage was created, but even so when I enter the URL of the uploaded image it marks me 404 error, I’m sure the route is correct

    Reply

  19. Not Found
    The requested URL /blog/ckeditor/image_upload was not found on this server.

    Apache Server at localhost Port 80

    Reply

    1. I don’t have their full package so never tested with it. But I believe you need to copy files, folders from your full package to public/vendor/unisharp/laravel-ckeditor directory.

      Reply

    1. Image upload feature does not come default in CKEditor. It needs customization. We’ll try to publish an article on this topic soon.

      Reply

  26. hello
    editor worked and save data in database , but when i want show text on front page . show html tag in page
    like ” some ting ”
    don’t hidden html tag .
    how i can fix that problem ?

    Reply

  27. i use ck editor for in laravel but i have a problem is aries . all the tag are display in the view hoe to hide such display tab in my view page

    Reply

  29. The Editor works okay but is saving the HTML tags as well to the Database. Is there a way to trim of the HTML tags when rendering the Database response in the blade view?

    Reply

  31. i keep on getting this error
    Class ‘Unisharp\Ckeditor\ServiceProvider::class’ not found
    how can this be fixed?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *