Using wysiwyg editor on frontend templates in magento 2

Question

I found so many articles about how to use wysiwyg editor in admin pages, and I was wondering if I could use it in the frontend templates. if yes, please tell me how. I'm using magento 2.1.5.

Answer 1

In frontend suppose we want wysiwyg-editor on a textarea and textarea having id : description

<textarea id="description" name="textarea_name"></textarea>

and use below script to load jquery and wysiwyg tiny_mce and assign to #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,|,',
            theme_advanced_buttons2: null,
            theme_advanced_buttons3: null,
            theme_advanced_buttons4: null,
            theme_advanced_statusbar_location: null
        },
        files_browser_window_url: false
    });
    editor = new tinyMceWysiwygSetup(
        'description',
        config
    );
    editor.turnOn();
    jQuery('#description')
        .addClass('wysiwyg-editor')
        .data(
            'wysiwygEditor',
            editor
        );
});

As per your's need you can update wysiwyg tiny_mce configuration. above one just an example.