Add tinyMCE text editor to textarea

This snippet will teach you how to integrate thinyMCE text editor to any textarea element

In this snippet I will teach you how to integrate tinyMCE text editor on any textarea field 

First Step : 

1- Create an account on https://www.tiny.cloud/

2- go to Dashboard get API Key 


Second Step :

include tinyMCE CDN script and change no-api-key with the generated API key from your Dashboard when you create your user account like this

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> 



// change no-api-key with your API key generated on your dashboard when creating your account

Third Step :

add textarea field and assign this script like this

<div class="form-group col-sm-12 col-md-12 mt-2">

       <label class="mb-1">Description</label>

       <textarea class="border p-2 form-control" name="description" id="description" cols="30" rows="15" placeholder="Description"></textarea>

</div>





// Script

<script>

        tinymce.init({

            selector: '#description',

            plugins: [

                'advlist autolink link image lists charmap print preview hr anchor pagebreak',

                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',

                'table emoticons template paste help'

            ],

            toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +

            'bullist numlist outdent indent | link image | print preview media fullscreen | ' +

            'forecolor backcolor emoticons | help',

            menu: {

                favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}

            },

            menubar: 'favs file edit view insert format tools table help',

            content_css: 'css/content.css'

        });

</script>

Mahmoud Anwar

Back End Developer with a passion for developing innovative web applications that expedite the efficiency and effectiveness of organizational success. Well-versed in technology and writing code to create systems that are reliable and user-friendly. Also has the proven ability to motivate, educate, and collaborate effectively to build web applications and effectively track changes. Confident communicator, strategic thinker, and innovative creator to develop software that is customized to meet a company’s organizational needs, highlight their core competencies, and further their success.