Tuesday, May 21, 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.

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.

TinyMCE

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.

Get notified whenever we post something new!

spot_img

Migrate to the cloud

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

Continue reading

Google I/O 2024 Unveils the Future?

Google I/O 2024 was an impressive showcase of how Google continues to push the envelope with artificial intelligence. This year's event introduced significant advancements across multiple services and platforms, demonstrating Google's commitment to an AI-first future. Below, I try...

On-Premises vs. Cloud Security

As usual, we begin by championing cybersecurity. It stands as the foremost concern for organizations striving to safeguard their sensitive data and digital assets. Among the many strategies available, two dominant paradigms have emerged: on-premises security and cloud security....

Regulation Insights from Starlink’s in Zimbabwe

In recent times, the journey of Starlink, Elon Musk's ambitious satellite internet venture under SpaceX, has been marked by regulatory challenges, particularly in Zimbabwe. Meanwhile the Posts and Telecommunications Regulatory Authority of Zimbabwe (POTRAZ) issued a directive instructing Starlink...

Enjoy exclusive discounts

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