Magento 2 – How to Add WYSIWYG Editor in Frontend PHTML File

frontendmagento2wysiwyg

I have one inquiry form on frontend custom module.
I wanted to use wysiwyg editor in frontend PHTML file.
I have read many thread on community which have tutorials for adding wysiwyg in backend form.
I am finding way for displaying them in frontend form.

Thanks.

Best Answer

Suppose you have a textarea:

<textarea name="comment" id="comment" class="input-text"></textarea>

then to add wysiwyg editor to the textarea, you just need to write following code in Javascript file or tag:

 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
        );
});
Related Topic