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.
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>
Hence, this was about adding WYSIWYG editor on the Magento 2 frontend. Alternatively, you can check out other related blogs
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!
In the world of business, understanding financial metrics is crucial for making informed decisions and…
Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…
In this era, businesses are always on the lookout for ways to engage with their…
Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…