Sunday, April 14, 2024

Tech News, analysis, updates, comments, reviews

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.


.... .... 
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>
    width: 900,
    height: 300

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=""></script>>
    width: 900,
    height: 300

That’s it! We hope you understand how to install and use TinyMCE editor in Laravel.

Get notified whenever we post something new!


Migrate to the cloud

Make yourself future-proof by migrating your infrastructure and services to the cloud. Become resilient, efficient and distributed.

Continue reading

A Rant: Stripping Privacy in This Era

The world has a privacy problem. Everything connected to the Internet (which is almost everything today), is for the taking. Looking around an average person's daily routine, it exposes the enlarging attack surface with each device we purchase, each...

Unveiling the Future: AI Breakthroughs and Their Impact

Welcome to the era where science fiction meets reality – the world of Artificial Intelligence (AI). In this exploration, we embark on a journey through recent AI breakthroughs, uncovering the marvels of advanced image recognition and natural language understanding....

 Navigating the Ethical Landscape of Artificial Intelligence

Introduction Welcome to a critical exploration of the brave new world of Artificial Intelligence (AI), where innovation and ethics intertwine. In this thought-provoking piece, we delve deep into the ethical considerations surrounding AI technologies. From the responsible use of AI...

Enjoy exclusive discounts

Use the promo code SDBR002 to get amazing discounts to our software development services.