Request Quote

Add WYSIWYG Editor on Front end Form In Magento 2

Today, we will see how to add WYSIWYG editor on Front-end Forms. Sometimes it is required to add the WYSIWYG editor to collect data from the user.
In frontend suppose we want WYSIWYG-editor on a Textarea.
Step1# create textarea tag in the form

<textarea id="short_description" name="short_description"></textarea>

Step2# The below script to load jQuery and WYSIWYG and assign to textarea having id short_description.

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(
        'short_description',
        config
    );
    editor.turnOn();
    jQuery('#short_description')
        .addClass('wysiwyg-editor')
        .data(
            'wysiwygEditor',
            editor
        );
});

Now, You will able to get the editor in the form.

As per your need, you can update the WYSIWYG configuration.
You can also learn How to get the WYSIWYG editor in admin forms from another post- https://webkul.com/blog/how-to-get-wysiwyg-editor-on-admin-forms-in-magento-2/.

Hope it will help you. Thank you.

. . .

Comments (7)

Add Your Comment

  • Ram
    I got an error like
    managetemplate:1009 Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

    any solution for this?

    • Anuj Gupta
      Please specify the Magento version which you are using for the same.
      • Ram
        magento 2.3.0.
        can please share your code to ramakrishna.s@exinent.com?
      • Ram

        require([
        ‘jquery’,
        ‘mage/adminhtml/wysiwyg/tiny_mce/setup’
        ], function(jQuery){

        var config = {},
        editor;

        jQuery.extend(config, {
        settings: {
        mode: ‘textarea’,
        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(
        ‘presonal_message’,
        config
        );
        editor.turnOn();
        jQuery(‘#presonal_message’)
        .addClass(‘wysiwyg-editor’)
        .data(
        ‘wysiwygEditor’,
        editor
        );
        });

        added the code like this in .phtml file but it its display an editor.
        can u please help on this?

        • Anuj Gupta
          Yes, it will display the WYSIWYG editor.
          what do you want to show there?
  • Bill
    Just wondering what file do you update or add?
    • Anuj Gupta
      I have added the WYSIWYG editor in the template file on the frontend.
      This code will work for frontend template files, It can be edit or add file.
  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close