Add WYSIWYG Editor on Front end Form In Magento 2

Today, we will see how to add a WYSIWYG editor on Front-end Forms. Sometimes it is required to add the WYSIWYG editor to collect data from the user.
In front 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 a 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.