Hello Guys,

Today I am coming with a very interesting topic named ‘Rich Text Editor’. As textarea is a common requirement in frontend form, but in textarea, we can use only normal text. Sometimes we have a requirement to use text editor where we can use text in bold, Italian, anchor link, text formate and many more so in the same case we can use the Rich text editor.

The rich text editor is simple to integrate and use. I am going to create it using javascript library called TinyMCE. It can be also integrated with Grails plugin in an easy way. For implement in grails please click here.

You can create Rich text editor using three step. So, Let’s start the session.

1. First step:-
First of all, you have to download two javascript files first one is the tinymce.min.js file and the second one is jquery js file and link both of them into the head part of your HTML page.

For Example:-
<script src=”${request.contextPath}/js/tinymce/tinymce.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>

2. Second step:-
The second step is to include simple textarea field like below:-

<div class=”form-group”>
        <label for=”comment”>Comment:</label>
         <textarea name=”comment” class=”form-control” rows=”5″ cols=”36″ id=”commentTextArea” placeholder=”Demo textArea formate template”></textarea>
</div>

3. Third step:-
The third and last step is to write javascript code under the script tag which can be load on the time of page loading.

<script type=”text/javascript”>
$(document).ready(function () {
   tinymce.init({
          selector: ‘textarea’,
          height: ‘auto’,
          menubar: false,
          forced_root_block: “”,
          plugins: [
                 ‘lists link image charmap preview anchor’,
                 ‘fullscreen’,
                 ‘media table contextmenu paste’
          ],
        toolbar: ‘undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image’
   });
})
</script>

Happy learning.