How to Add WYSIWYG Editor in Magento 2 Frontend?

Hello Magento Friends,

Today I am going to explain How to Add WYSIWYG Editor in Magento 2 Frontend?

What You See Is What You Get (WYSIWYG) Editor shows exactly what the input will look like. Sometimes while collecting data from users, you need to provide a WYSIWYG editor instead of a simple textarea. For that, let’s learn How to Add WYSIWYG Editor in Magento 2 Frontend.

Steps to Add WYSIWYG Editor in Magento 2 Frontend:

Step 1: First, we need to create a textarea field in custom phtml

<textarea id="post_description" name="post_description" type="text"></textarea>
<input name="image" type="file" id="upload" style="visibility:hidden;">

Step 2: After that, we need to add script tag for that textarea

<script type="text/javascript">
require([
        'jquery',
        'mage/adminhtml/wysiwyg/tiny_mce/setup'
    ], function($){
    tinymce.init({
    selector: "#post_description",
    theme: "modern",
    paste_data_images: true,
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    menubar: false,
    image_advtab: true,
    file_picker_callback: function(callback, value, meta) {
        if (meta.filetype == 'image') {
            $('#upload').trigger('click');
            $('#upload').on('change', function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                callback(e.target.result, {
                alt: ''
            });
            };
            reader.readAsDataURL(file);
            });
        }
    }
});
});
</script>

Conclusion:

Hence, this was about adding WYSIWYG editor on the Magento 2 frontend. Alternatively, you can check out other related blogs

• Add WYSIWYG Editor in Admin Configuration in Magento 2
• Configure WYSIWYG Editor in Magento 2
• Replace Simple Textarea with WYSIWYG Editor for Contact us page in Magento 2
• Add WYSIWYG Editor in Magento 2 Admin Form

If you have any doubts about the above steps, let me know through the comment box. Stay in touch with us for more tutorials.

Happy Coding!