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.
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 ); }); If your Magento version is 2.3.x then use the following code to add wysiwyg editor in frontend PHTML file.
Add Textarea:
<textarea name="post_content" class="input-text" id="post_content"></textarea> Now replace textarea with wysiwyg editor by adding following code at bottom of your PHTML file.
<script type="text/javascript"> require([ 'jquery', 'mage/adminhtml/wysiwyg/tiny_mce/setup' ], function(jQuery){ wysiwyg = new wysiwygSetup('post_content', { 'width':'100%', // defined width of editor 'height':'300px', // height of editor 'plugins':[{'name':'image'}], // for image 'tinymce4':{'toolbar':'formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap','plugins':'advlist autolink lists link charmap media noneditable table contextmenu paste code help table' } }); wysiwyg.setup('exact'); }); </script> The code above from Sagar is good. For those who can't get it to work, there might be a typo in the example.
new wysiwygSetup expects a field id, not a field name. So if you pass post_content to the editor constructor and post_content is an element id, it should work.
Just make sure you add id="post_content" to the textarea HTML tag.
