How To Install And Use TinyMCE – WYSIWYG HTML Editor In Laravel

In past, as a developer, I’ve always wanted the WYSIWYG editor in my projects, both peronal and for my clients. I’ve always have had a hard time deciding on how to go about it, and I always hard coded HTML5 tags to paragraphs and text areas, which is a bad practice, of course. Then I switched from using vanilla PHP entirely, to incorporating Laravel in my projects. Laravel is an awesome PHP framework, and I’d recommend it to anyone.

Then my problem of text editing followed me. Then I found TinyMCE. TinyMCE is also one of the popular WYSIWYG HTML editors like CKEditor. In this article, we study how to use TinyMCE in your Laravel application.

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

TinyMCE and CKEditor are two of my favorite 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 wish to use their premium plugins then please checkout their pricing page.

Install And Use TinyMCE In Laravel

To integrate TinyMCE editor in Laravel, we will use the npm package for TinyMCE. Laravel provides built-in support for npm as like Composer. All you need to make sure is 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 the above command install TinyMCE using npm by the command:

npm i tinymce

Now if you head over to the directory node_modules/tinymce you will see few files and folders. We need to copy some of them and place inside our 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/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.

Now, run the command below which copy files and folders from node_modules/tinymce to the public directory.

npm run dev

Next, to use the TinyMCE in your blade file, include the tinymce.js file and call it 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>

Add the above code wherever you want and you should see TinyMCE editor like below screenshot.

Install TinyMCE using CDN

So far we have seen how to install TinyMCE using npm which is a recommended way. Another way to use TinyMCE is including it through CDN. Using CDN, you don’t need to keep library files on your server. It directly includes required files from a hosted server.

<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! We hope you understand how to install and use TinyMCE editor in Laravel.