Add WYSIWYG Editor at Front End in Magento2.3

Add WYSIWYG Editor at Front End in Magento2.3:- In this blog I’ll explain you that how we can add editor at front end in magento2.3 version.

For magento2.2 or less version please follow this blog

So, First of all you have to create a text area field like below.

<textarea id="company_description" name="company_description">
</textarea>

Then add below script to load jQuery and WYSIWYG editor and then assign to
textarea having id company_description.

<script>
    require([
    "jquery", 
    "mage/translate", 
    "mage/adminhtml/events", 
    "mage/adminhtml/wysiwyg/tiny_mce/setup"
    ], function(jQuery){
        wysiwygcompany_description = new wysiwygSetup("company_description", {
            "width":"99%",  // defined width of editor
            "height":"200px", // 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",
            }
        });
        wysiwygcompany_description.setup("exact");
    });
</script>

Now you can see editor on textarea field at front end

Searching for an experienced
Magento 2 Company ? Find out More

In this way we can add editor at front end in magento 2.3 version. Hope it will be helpful for you.

Thanks and if have any query then comment below.

Rani Priya

6 Badges

28 Feb, 2024
Updated by - Abhishek Saini
2 Sep, 2020
Updated by - Ashutosh Srivastava

9 comments

Neeraj 6 years ago

I want to set character limit.

Limit the number of character in tinyMCE4

ashutosh srivastava (Moderator) 6 years ago
hi you can add max_chars in the tinymce config to limit the characters and to check on it use setu callback :
wysiwygcompany_description = new wysiwygSetup(“company_description”, {
“max_chars”:”1000″,
setup: function (ed) {ed.on(“keyup”, function(e) {
let content = tinyMCE.activeEditor.getContent();
//put your login here
})},
“width”:”99%”, // defined width of editor
“height”:”200px”, // 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”,
}
});

Sagar Vasani 7 years ago

How to make this editor as required element?

Rani Priya (Moderator) 7 years ago
Hi Sagar,

To make this field as required you just need to initialise validation widget in form tag then add “required-entry” class in textarea tag. for ex: form tag will be like
<form action=”” enctype=”multipart/form-data” method=”post” id=”” data-form=”” data-mage-init='{“validation”:{}}’></form>
and textarea tag will be like
<textarea name=”” class=”required-entry input-text” id=”” rows=”5″ cols=”75″ ></textarea>

- Sagar Vasani 7 years ago
  I have done the required changes in my code. But no success.
  Please check my code snippet at https://magento.stackexchange.com/questions/284035/magento-2-how-to-validate-wysiwyg-editor-in-frontend-phtml-file
  
  - Rani Priya (Moderator) 7 years ago
    It’s working fine for me https://prnt.sc/omthzf
    
    Code snippet:
    
    <form class=”form” action=”” method=”post” id=”post-form” enctype=”multipart/form-data” data-mage-init='{“validation”:{}}’>
    <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>
    <button type=”submit” class=”action save primary” >
    <span><?php echo $block->escapeHtml(__(‘Save Post’)); ?></span>
    </button>
    </form>
    
    - Sagar Vasani 7 years ago
      https://d.pr/Bhud6P
      https://d.pr/YY38K8
      
      Please check above screenshots.
      If I have textarea then validation works fine.
      But if I have editor then validation doesn’t work.
    - Rani Priya (Moderator) 7 years ago
      You can write custom validation on this field
      
      For ex:
      
      $(‘#btn-id’).click(function (e) {
      if ($(“#form-id”).valid()!==false) {
      if ($(‘#textarea-id_ifr’).length) {
      var text = $(‘#textarea-id_ifr’).contents().find(‘#tinymce’).text();
      $(‘#textarea-id-error’).remove();
      if (text === “” || text === null) {
      $(‘#textarea-id-error’).remove();
      $(‘#textarea-id’).parent().append(‘This is a required field.’);
      } else {
      $(‘#form-id’).submit();
      }
      }
      }
      });
    - Sagar Vasani 7 years ago
      Your above solution works.
      Thanks.

Add WYSIWYG Editor at Front End in Magento2.3

Leave a Comment Cancel Reply

9 comments