codeignitertinymcecodeigniter-3parsley.js

How can I get Parsley to detect the content in a tinyMCE form?

I have a form that is generated by Codeigniter and I have attached tinymce editor to a text editor within in. This all works fine but when I submit the form the content entered isn't being detected and the form is rejected by parsley. See below:

tinyMCE & Parsley form

The following is the js in the header of the page:

<script type="text/javascript">
  tinymce.init({
      selector: '#mytextarea',
      height: 500,
      menubar: false,
      plugins: "lists",
      toolbar: 'undo redo | ' +
              'bold italic bullist numlist | alignleft aligncenter ' +
              'removeformat | help'
    });
</script>

And this is the html for the text area:

<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="notes">Notes <span class="required">*</span></label>
    <div class="col-md-6 col-sm-6 col-xs-12">
            <textarea name="note" cols="40" rows="10"  id="mytextarea" required="required" class="form-control" name="note" rows="4"></textarea>
    </div>
</div>

For completeness this is the PHP to create the form (taken from the Smarty template):

<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="notes">Notes <span class="required">*</span></label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        {php}
            echo form_textarea('note', '', array('id'=>"mytextarea", 'required'=>"required", 'class'=>"form-control", 'name'=>"note", 'rows'=>"4"));
        {/php}
        {php}
            echo form_error('note');
        {/php}
    </div>
</div>

What do I need to do to get Parsley to realise that there is something in the form?

Solution

  • When TinyMCE is on the page it (visually) replaces the textarea with a series of div elements (menu, toolbars, statusbar) and an iframe (content editing area). What this means is that as you type in TinyMCE you are actually not updating the textarea at all.

    Depending on how you are validating the form you may first need to tell TinyMCE to update its related textarea via the triggerSave() API call.

    For example:

    tinymce.triggerSave();

    That form of the command will cause all TinyMCE instances to update their underlying textareas.

    https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#triggersave