Add WYSIWYG toolbox in Magento 2 for forms on the frontend

Add WYSIWYG toolbox in Magento 2 for forms on the frontend

The WYSIWYG component is an adapter from the TinyMCE editor. We have seen WYSIWYG toolbox and the editor on the backend on various interfaces, however, today we are going to learn how to integrate this WYSIWYG part on the frontend forms.

In order to integrate the WYSIWYG component on the frontend, we will need to add some JS and bind the component in the script with our forms.

Step1: create textarea in the form

 <textarea name="comment" id="comment" title="What’s on your mind?" class="input-text" cols="5" rows="3" ></textarea> 

Step 2: Here prior to 2.3.0 there are some other ways to add WYSIWYG on the frontend but in the v2.3.0, TinyMCE was added as the part of the update. So there are some steps to add WYSIWYG on the frontend form.

Add this script after your custom form

For Magneto 2.2

 <script> require([ 'jquery', 'mage/adminhtml/wysiwyg/tiny_mce/setup' ], function(jQuery){ var config = {}, editor; jQuery.extend(config, { settings: { theme_advanced_buttons1 : 'bold,italic,|,justifyleft,justifycenter,justifyright,|,' + 'fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code', theme_advanced_buttons2: null, theme_advanced_buttons3: null, theme_advanced_buttons4: null } }); editor = new tinyMceWysiwygSetup( 'comment', config ); editor.turnOn(); jQuery('#comment') .addClass('wysiwyg-editor') .data( 'wysiwygEditor', editor ); }); </script> Here comment is id of textarea  For Magneto 2.3.0 <script> require([ "jquery", "mage/translate", "mage/adminhtml/events", "mage/adminhtml/wysiwyg/tiny_mce/setup" ], function(jQuery){ wysiwygcomment' = new wysiwygSetup("comment'", { "width":"99%", // defined width of editor "height":"200px", // height of editor "plugins":[{"name":"image"}], // for image "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table", } }); wysiwygcomment'.setup("exact"); }); </script> 

Here comment is id of textarea


And done you will see WYSIWYG in your custom form.



The upper image is of Magento 2.3.0. For Magneto 2.2.X it will look something like this (Some old-fashioned editor).