1

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.

3 Answers 3

6

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
        );
});
16
  • @dsmagento, have you tried above solution? Commented Jul 6, 2018 at 13:27
  • @dsmagento, did the solution work for you? Commented Jul 9, 2018 at 6:18
  • Yes thanks I got it but i am not able to write anything in it. :( Commented Jul 9, 2018 at 10:08
  • I think there may be some other reason like JS conflict, ID mismatch etc. because it is working fine here. Please check nimb.ws/zFTScA Commented Jul 9, 2018 at 10:30
  • actually at first load cursor is not blinking in side if i press any button like bold, or for alignment then cursor appears. Commented Jul 9, 2018 at 10:54
5

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>
2
  • not working on 2.3.5 and 2.4 ver. can you help
    – niceonelee
    Commented Oct 21, 2020 at 6:50
  • Thanks but data not load in wysiwyg
    – Himanshu
    Commented Feb 7, 2021 at 7:44
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.