AngularJS + TinyMCE: ng-maxlength non funziona su <textarea>

Question

Desidero limitare la lunghezza massima del testo in modo che non superi la lunghezza di una colonna in un DB. Ho messo questa limitazione sul backend e ora voglio applicarla sul frontend.

Io uso TinyMCE v4.3.3 con angular-ui-tinymce plug-in v0.0.12 e AngularJS v1.4.6.

JS:

var tinymceOpts = { 
    toolbar: false, 
    menubar: false, 
    // do not add <p></p> from the start: 
    forced_root_block: '' 
} 

HTML:

<textarea ui-tinymce="tinymceOpts" 
      ng-model="body" 
      name="body" 
      ng-maxlength="100" 
      required> 
    {{ body }} 
</textarea> 
<span ng-show="form.body.$error.maxlength" class="error"> 
    Reached limit! 
</span> 

Come potete vedere, io uso ng-maxlength attribuire qui per limitare una lunghezza di <textarea>.

Risultato atteso: ingresso viene convalidato e viene visualizzato il messaggio di errore solo se lunghezza del contenuto (con le etichette inclusa) ha superato il limite (100 caratteri in questo caso).

Risultato effettivo: stato dell'ingresso

modulo è impostato su non valida quando l'ingresso contiene del testo (non importa quale sia la lunghezza).

---

Numero di caratteri (nell'angolo in basso a destra) è calcolato per il test:

this.getCharCount = function() { 
    var tx = editor.getContent({format: 'raw'}); 
    return tx.length; 
}; 

Answer 1

Il problema qui è che TinyMCE utilizza una propria per modificare i contenuti di testo e scrive di nuovo al vostro <textarea> su eventi speciali. Non c'è da meravigliarsi se ng-maglength non funziona qui.

Per ottenere ciò che si desidera, è necessario controllare il contenuto dell'editor stesso e non consentire l'immissione di più caratteri nel caso in cui venga raggiunta la lunghezza massima.