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
|
1 2 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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!
