How to Install and Use TinyMCE Editor in Laravel

Recently I published an article on using CKEditor in Laravel. I got a few comments from readers asking me to write a post on how to use TinyMCE editor in Laravel. Like CKEditor, TinyMCE is also one of the popular WYSIWYG HTML editors. In this article, we study how to install and use the TinyMCE editor in the Laravel application.

While working on the websites, sometimes you need to store long content, images, and rich snippets in the database. This content can be a biography, product summary, page content, etc. All these formats require the use of different HTML tags. The textarea tag of HTML is not user-friendly when it comes to writing rich content including HTML elements. This is when you should use web text editors.

CKEditor and TinyMCE are popular editors among developers. It is up to you to choose one of them. Both WYSIWYG(what you see is what you get) editors are lightweight and work perfectly for web applications.

TinyMCE editor is free to use with limited tools. If one wishes to use their premium plugins then check out the pricing page.

Install and Use TinyMCE Editor in Laravel

To integrate the TinyMCE editor in Laravel, I am going to use this npm package for TinyMCE. Laravel provides built-in support for npm. It requires you to have Node.js installed on your system.

Next, open the terminal in your project root directory and install npm dependencies first.

npm install

After this install TinyMCE using npm by the command:

npm i tinymce

Upon completion, if you head over to the node_modules/tinymce directory, you will find a few files and folders. We need to copy some of them and place them inside the public directory. To do so, open the webpack.mix.js file and add the below code in it.

…
…
mix.copyDirectory('node_modules/tinymce/icons', 'public/node_modules/tinymce/icons');
mix.copyDirectory('node_modules/tinymce/models', 'public/node_modules/tinymce/models');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/node_modules/tinymce/plugins');
mix.copyDirectory('node_modules/tinymce/skins', 'public/node_modules/tinymce/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/node_modules/tinymce/themes');
mix.copy('node_modules/tinymce/tinymce.js', 'public/node_modules/tinymce/tinymce.js');
mix.copy('node_modules/tinymce/tinymce.min.js', 'public/node_modules/tinymce/tinymce.min.js');

In the above code, I am using the Compiling Assets(Mix) feature of Laravel.

Next, run the command which copies given files and folders from node_modules/tinymce to the public directory.

npm run dev

Now we are ready to use the TinyMCE editor in Laravel. Include the tinymce.js file in your blade and call the editor as follows.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TinyMCE in Laravel</title>
</head>
<body>
    <textarea class="description" name="description"></textarea>
    <script src="{{ asset('node_modules/tinymce/tinymce.js') }}"></script>
    <script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
    </script>    
</body>
</html>

Access this page on the browser and you should see the TinyMCE editor similar to the below screenshot.

TinyMCE editor just replaces your textarea tag. It means to access the content of the editor, you have to follow the same operation you apply to the textarea. For example, you can print the content of the editor using the below statement.

echo $request->input('description');

Install TinyMCE using CDN

We have seen the recommended way of installing a TinyMCE editor using npm. Another way to integrate the TinyMCE editor is through CDN. Using CDN, you don’t need to keep library files on your server. It directly includes required files from a hosted server. However, this approach has one drawback. If in the future the CDN path is changed by service providers, your editor will no longer work. You have to then update the new path yourself.

The user can use TinyMCE through CDN as follows.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TinyMCE in Laravel</title>
</head>
<body>
    <textarea class="description" name="description"></textarea>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>
    <script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
    </script>    
</body>
</html>

That’s it! I hope you understand how to install and use the TinyMCE editor in Laravel. I would like to hear your thoughts and suggestions in the comment section below.

7 thoughts on “How to Install and Use TinyMCE Editor in Laravel”

JJ de Jong says:
February 22, 2021 at 2:56 pm
OK, this allows you to fill the text area with rich text. But how do you save the rich text in the database?
1. Sajid says:
  February 22, 2021 at 3:41 pm
  Using $request->input('description') in your controller.
pgtemplates says:
April 24, 2020 at 3:24 am
very nice
Hannah Nicole says:
July 2, 2019 at 8:09 am
Thank you so much, but it’s not How to Installation, it’s just Embeded guide.
Camilo says:
May 21, 2019 at 8:14 am
This is not “installing” tinymce since all you’re doing is using their CDN version, so if tomorrow they change the address or remove the remote files, your application will stop working.
A better idea would be to integrate the editor as a module using NPM, would be interesting to read how to do that as well.
1. Sajid says:
  July 20, 2019 at 6:36 am
  I updated the article with npm installation. Thanks for the suggestion. It’s enlightened me.
Prasad Pawar says:
March 12, 2019 at 6:48 pm
Great Article Dude. you saved my day!
Thanks a ton !