Menu Close
    Searching for an experienced Magento 2 Development Company ?

    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.

    For Magento 2.3.X and above please follow this wysiwyg-magento-2.3.x

    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
            );
    });
    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.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    13 comments

  • vishal
    That above code is not working give me error :Uncaught ReferenceError: tinyMceWysiwygSetup is not defined
  • Sagar Vasani
    This solution is not working in Magento 2.3.2
  • Ratna Jain
    I’m getting error – Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

    for magento 2.3.2 version.

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

    any solution for this?

    • Anuj Gupta (Moderator)
      Please specify the Magento version which you are using for the same.
      • Ram
        magento 2.3.0.
        can please share your code to [email protected]?
      • 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 (Moderator)
          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 (Moderator)
      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.
  • Back to Top