How to Install and Use TinyMCE Editor in Laravel

In the past, I have published an article How to use CKEditor in Laravel. In reference to that article, many readers asked to write the post on how to use TinyMCE editor in Laravel. TinyMCE is also one of the popular WYSIWYG HTML editors like CKEditor. In this article, we study how to install and use the TinyMCE editor in the Laravel application.

While working on the web, sometimes we 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 you to use different HTML tags. The textarea tag of HTML is not user-friendly when it comes to writing content including HTML elements. This is where you should use web text editors.

TinyMCE and CKEditor are popular editors. It is up to you to choose either one. Both WYSIWYG(what you see is what you get) editors are light-weight and work perfectly for web applications.

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

Install and Use TinyMCE Editor in Laravel

To integrate TinyMCE editor in Laravel, I am going to use the npm package for TinyMCE. Laravel provides built-in support for npm. All you need to make sure Node.js is installed on your system. Open the terminal in your project root directory and run the command to 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 directory ‘node_modules/tinymce’ you will see 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.

webpack.mix.js

....
....
mix.copyDirectory('node_modules/tinymce/icons', 'public/node_modules/tinymce/icons');
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/jquery.tinymce.js', 'public/node_modules/tinymce/jquery.tinymce.js');
mix.copy('node_modules/tinymce/jquery.tinymce.min.js', 'public/node_modules/tinymce/jquery.tinymce.min.js');
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, we are using Compiling Assets(Mix) feature of Laravel.

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

npm run dev

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

<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>

You should now see the TinyMCE editor on your page just like the below screenshot.

TinyMCE

Install TinyMCE using CDN

So far we have seen how to install TinyMCE editor using npm which is a recommended way. Another way to use TinyMCE 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.

The user can use TinyMCE through CDN as follows.

<textarea class="description" name="description"></textarea>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

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.

Related Articles

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

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

  1. 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.

Leave a Reply

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