javascript - How to make textarea filed mandatory when I've applied TinyMCE

Question

I want to make textarea filed mandatory when I've applied TinyMCE.

If I add required attribute to <textarea>, it causes that I cannot submit the form even if I fill in the form!

How can I solve this problem?

tinymce.init({
    selector: '#summaryId',
    max_chars: 255, // max. allowed chars
    plugins: "paste",
    setup: function (ed) {
        var allowedKeys = [8, 37, 38, 39, 40, 46]; // backspace, delete and cursor keys
        ed.on('keydown', function (e) {
            if (allowedKeys.indexOf(e.keyCode) != -1) return true;
            if (tinymce_getContentLength() + 1 > this.settings.max_chars) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
            return true;
        });
        ed.on('keyup', function (e) {
            tinymce_updateCharCounter(this, tinymce_getContentLength());
        });
    },
    init_instance_callback: function () { // initialize counter div
        $('#' + this.id).prev().append('<div class="char_count" style="text-align:left; color:grey;"></div>');
        tinymce_updateCharCounter(this, tinymce_getContentLength());
    },
    paste_preprocess: function (plugin, args) {
        var editor = tinymce.get(tinymce.activeEditor.id);
        var len = editor.contentDocument.body.innerHTML.length;
        var textLen = args.content.length;// $(args.content).text();
        if (len + textLen > editor.settings.max_chars) {
            alert('Pasting this exceeds the maximum allowed number of ' + editor.settings.max_chars + ' characters.');
            args.content = '';
        } else {
            //tinymce_updateCharCounter(editor, len + text.length);
        }
    }
});

in cshtml file:

<textarea asp-for="Article.Summary" class="form-control" id="summaryId" maxlength="255"></textarea>

Answer 1

There are two issues you will have to address here...

1 - The required attribute on the <textarea>

When you invoke TinyMCE the original <textarea> you have on the page is hidden and TinyMCE places a chunk of HTML onto the page. The editing rectangle is an <iframe> and the menus/toolbars are HTML that surrounds that <iframe>.

Because the original <textarea> is now hidden, making it required is an issue and the browser will complain that you have a hidden form element marked as required.

Bottom line for this first issue is you can't mark a hidden <textarea> as required.

2 - TinyMCE and the <textarea>

TinyMCE does not keep the underlying <textarea> in sync at all times - for most use cases this would add unneeded overhead to the page while someone is creating content.

If you are using a standard HTML form post, when you post the form, TinyMCE will update the <textarea> before the form is posted. Unfortunately, most modern frameworks don't use a standard HTML form post but instead do something using JavaScript/AJAX. You can use the following API call to force TinyMCE to update the <textarea>:

tinymce.triggerSave();

This will force TinyMCE to update the <textarea> when it is called. You can either:

• Do this in the onsubmit event of the form

• Do this in the TinyMCE init:

  tinymce.init({
      selector: "textarea",
      setup: function (editor) {
          editor.on('change', function () {
              tinymce.triggerSave();
          });
      }
  });