Wednesday, October 16, 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

The Tor Project + Tails, A Game-Changing Merger for Privacy Advocates

In a significant development for digital privacy enthusiasts, the Tor Project and Tails have merged their operations, uniting two of the most trusted tools in the fight against online surveillance. This merger, announced this month, combines the power of...

Concerns about the ICT Bill 2024 in Kenya

Kenya's tech industry has been a beacon of innovation and growth, thanks in part to a regulatory environment that has allowed startups and innovators to thrive. However, the proposed ICT Bill 2024 raises concerns about the future of this...

AI Overlords are no longer an Internet meme

The AI boom might be slowing down finally, and a few companies have cemented themselves as the go-to defacto owners of the space. OpenAI is leading the race, backed my #Microsoft and Google follows closely behind. Nvidia is the...

Enjoy exclusive discounts

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