Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-hyperlocal-marketplace-guide

    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.


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


    Now you can see editor on textarea field at front end

    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.

     

    . . .

    Comments (9)

    Add Your Comment

  • Neeraj
    I want to set character limit.

    Limit the number of character in tinyMCE4

    • ashutosh srivastava
      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
    How to make this editor as required element?
    • Rani Priya
      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
        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
          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
            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
            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
            Your above solution works.
            Thanks.
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close