ADD WYSIWYG TOOLBOX IN MAGENTO 2 FOR FORMS ON THE FRONTEND

The WYSIWYG component is an adapter from the TinyMCE editor. We have seen the WYSIWYG toolbox and the editor on the backend on various interfaces. However, today we will 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 were some other ways to add WYSIWYG on the frontend, but in v2.3.0, TinyMCE was added as 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 the 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).