Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Another way to go about this which gives you more control is in the TinyMCE initialization. This works well except for one case: the last TinyMCE instance you exit does not trigger the onDeactivate event within TinyMCE (it is only trigger when you go to another TinyMCE instance). So here is a way to work around this -- so far it seems to work well but YMMV.</p> <p>Note: I would use this in conjunction with the accepted answer. This code triggers the validation as content is being edited in TinyMCE.</p> <pre><code>tinyMCE.init({ ... setup: ValidationTinyMceSetup }); </code></pre> <p>And our setup method:</p> <pre><code>function ValidationTinyMceSetup(editor) { var $textarea = $('#' + editor.editorId); // method to use to save editor contents to backend input field (TinyMCE hides real input and syncs it up // with values on form submit) -- we need to sync up the hidden input fields and call the valid() // method from jQuery unobtrusive validation if it is present function save(editor) { if (editor.isDirty) { editor.save(); var $input = $('#' + editor.editorId); if (typeof $input.valid === 'function') $input.valid(); } } // Save tinyMCE contents to input field on key/up down (efficiently so IE-old friendly) var typingTimerDown, typingTimerUp; var triggerDownSaveInterval = 1000; // time in ms var triggerUpSaveInterval = 500; // time in ms editor.onKeyDown.add(function (editor) { clearTimeout(typingTimerDown); typingTimerDown = setTimeout(function () { save(editor) }, triggerDownSaveInterval); }); editor.onKeyUp.add(function () { clearTimeout(typingTimerUp); typingTimerUp = setTimeout(function () { save(editor) }, triggerUpSaveInterval); }); // Save tinyMCE contents to input field on deactivate (when focus leaves editor) // this is via TAB editor.onKeyDown.add(function (editor, event) { if (event.keyCode === 9) save(editor); }); // this is when focus goes from one editor to another (however the last one never // triggers -- need to enter another TinyMCE for event to trigger!) editor.onDeactivate.add(function (editor) { save(editor); }); } </code></pre> <p>Finally, a bonus item that is completely unrelated: you can add a character counter by including this function in your JavaScript source:</p> <pre><code>function CharacterCountDisplay(current, max) { if (current &lt;= max) { return current + ' of ' + max + ' characters max'; } else { return '&lt;span style="color: red;"&gt;' + current + '&lt;/span&gt; of ' + max + ' characters'; } } </code></pre> <p>And in the above <code>ValidationTinyMceSetup</code> method add:</p> <pre><code>// check for character count data-val var character_max = $textarea.attr('data-val-lengthignoretags-max'); if (typeof character_max === 'undefined' || character_max === false) { character_max = $textarea.attr('data-val-length-max'); } if (typeof character_max !== 'undefined' &amp;&amp; character_max !== false) { var character_count = function (editor) { var currentLength = $(editor.getDoc().body).text().length; editor.dom.setHTML(tinymce.DOM.get(editor.id + '_path_row'), CharacterCountDisplay(currentLength, character_max)); }; // on load show character count editor.onInit.add(character_count); // while typing update character count editor.onKeyUp.add(character_count); } </code></pre> <p>To use simply add a <code>data-val-length-max="250"</code> to your textarea tag or whatever it is you're using TinyMCE on!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload