0

In Magento 2.3.2, I have added the wysiwyg editor in frontend PHTML file with the following codes.

HTML:

<form class="form" action="<?php echo $block->escapeUrl($block->getSavePostUrl()); ?>" method="post" id="post-form" enctype="multipart/form-data">
<fieldset class="fieldset">
    <div class="field required">
        <label class="label" for="Post Name"><span><?php echo $block->escapeHtmlAttr(__('Post Name')); ?></span></label>
        <div class="control">
            <input type="text" name="post_name" value="" title="<?php echo $block->escapeHtmlAttr(__('Post Name')); ?>" class="input-text required-entry" id="post_name">
        </div>
    </div>
    <div class="field required">
        <label class="label" for="Post Content"><span><?php echo $block->escapeHtmlAttr(__('Post Content')); ?></span></label>
        <div class="control">
            <textarea name="post_content" title="<?php echo $block->escapeHtmlAttr(__('Post Content')); ?>" class="input-text required-entry" id="post_content">
            </textarea>
        </div>
    </div>
</fieldset>
<div class="actions-toolbar">
    <div class="primary">
        <button type="submit" class="action save primary" title="<?php echo $block->escapeHtmlAttr(__('Save Post')); ?>">
            <span><?php echo $block->escapeHtml(__('Save Post')); ?></span>
        </button>
    </div>
</div>
</form>

Javascript:

<script type="text/javascript">
require([
    'jquery',
    'mage/mage',
    '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');

    var postForm = jQuery('#post-form');
    postForm.mage('validation', {});
});
</script>

With the above code, post_name textbox validates for required-entry but post_content editor doesn’t.

Am I missing anything or Is there any other way to validate editor in frontend PHTML file?

0

I have got the solution from https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/ to validate wysiwyg editor in frontend PHTML file.

Following is the complete code for that.

HTML:

<form class="form" action="<?php echo $block->escapeUrl($block->getSavePostUrl()); ?>" method="post" id="post-form" enctype="multipart/form-data">
<fieldset class="fieldset">
    <div class="field required">
        <label class="label" for="Post Name"><span><?php echo $block->escapeHtmlAttr(__('Post Name')); ?></span></label>
        <div class="control">
            <input type="text" name="post_name" value="" title="<?php echo $block->escapeHtmlAttr(__('Post Name')); ?>" class="input-text required-entry" id="post_name">
        </div>
    </div>
    <div class="field required">
        <label class="label" for="Post Content"><span><?php echo $block->escapeHtmlAttr(__('Post Content')); ?></span></label>
        <div class="control">
        <textarea name="post_content" title="<?php echo $block->escapeHtmlAttr(__('Post Content')); ?>" class="input-text required-entry" id="post_content">
        </textarea>
        </div>
    </div>
</fieldset>
<div class="actions-toolbar">
    <div class="primary">
        <button id="save-post" type="button" class="action save primary" title="<?php echo $block->escapeHtmlAttr(__('Save Post')); ?>">
            <span><?php echo $block->escapeHtml(__('Save Post')); ?></span>
        </button>
    </div>
</div>
</form>

Javascript:

require([
'jquery',
'mage/mage',
'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');

var postForm = jQuery('#post-form');
postForm.mage('validation', {});

jQuery(document).ready(function() {
    jQuery('#save-post').click(function (e) {
        var validContent = 1;

        if (jQuery('#post_content_ifr').length) {
            var text = jQuery('#post_content_ifr').contents().find('#tinymce').text();
            jQuery('#post_content-error').remove();
            if (text === '' || text === null) {
                validContent = 0;
                jQuery('#post_content').parent().append('<div id="post_content-error" class="mage-error" generated="true">' + jQuery.mage.__('This is a required field.') + '</div>');
            }
        }

        if (jQuery('#post-form').valid() !== false && validContent) {
            jQuery('#post-form').submit();
        }
        else if (validContent == 0) {
            jQuery('#post_content-error').show();
        }
    });
});
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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