W jaki sposób sprawdzić poprawność edytora tinyMCE, jeśli jest pusta, dodając ciąg obok?

Question

Muszę zweryfikować formularz. Formularz ten ma kilka list rozwijanych i edytor tinyMCE, sprawdzam poprawność tego formularza, dołączając ciąg "Wymagany" po każdym polu, jeśli jest pusty, jednak nie jestem w stanie zweryfikować edytora tinyMCE, jeśli edytor jest pusty, próbowałem coś takiego jak

tinyMCE.get('tinyedotor').getContent(); 

ale bez powodzenia.

Oto moja fiddle

Answer 1

getContent() powinno działać dobrze. Twoje skrzypce nie zawierają kodu walidacyjnego formularza dla wartości edytora, co jest tutaj bardzo istotne. Spróbuj tego:

var editorContent = tinyMCE.get('tinyeditor').getContent(); 
if (editorContent == '') 
{ 
    // Editor empty 
} 
else 
{ 
    // Editor contains a value 
} 

Forked fiddle

Należy również pamiętać, masz zadeklarowane wielu id „s dla select listy rozwijanej.

Edit: można uzyskać id pojemnika edytora z metodą getContainer(): tinyMCE.get('tinyeditor').getContainer(). Wkładanie komunikat o błędzie po edytorze będzie wówczas mniej więcej tak:

$('<span class="error">Editor empty</span>').insertAfter($(tinyMCE.get('tinyeditor').getContainer())); 

To jednak spowoduje utworzenie nowego span każdym razem, gdy użytkownik kliknie przycisk Prześlij, więc prawdopodobnie będziesz chciał mieć komunikat o błędzie pojemnik z unikalnym id i sprawdź, czy kontener już istnieje przed włożeniem go.

Edytuj 2: Updated fiddle.

Answer 2

getContent() jest droga. Możesz po prostu użyć obiektu tinyMCE.activeEditor i zadzwonić pod numer getContent() lub pobrać instancję edytora według id, tak jak robisz.

Wygląda na to, że masz identyfikator w swoim identyfikatorze, który prawdopodobnie powoduje problem.

tinyMCE.get('tinyedotor').getContent(); 

powinny prawdopodobnie:

tinyMCE.get('tinyeditor').getContent(); 

Answer 3

Co chcesz, możesz łatwo zrobić. Jej jest link to a fiddle z moim rozwiązaniem.

Answer 4

Można to zrobić, aby sprawdzić, czy zawartość jest pusta bez parsowania HTML:

var content = tinymce.get('tinymceEditor').getContent({format: 'text'}); 
if($.trim(content) == '') 
{ 
    // editor is empty ... 
} 

Answer 5

Używanie getContent() jest właściwa droga, ale co zrobić, jeśli użytkownik wprowadzi przestrzeń !! ??
Oto kompletne rozwiązanie z regex -

var content = tinyMCE.get('tinyeditor').getContent(), patt; 

      //Here goes the RegEx 
      patt = /^<p>(&nbsp;\s)+(&nbsp;)+<\/p>$/g; 

      if (content == '' || patt.test(content)) { 
       $('.bgcolor').css("border", "1px solid Red") 
       return false; 
      } 
      else { 
       $('.bgcolor').removeAttr("style") 
       return true; 
      } 

Uwaga: („.bgcolor”) to nic innego div wokół «tinyeditor» mieć czerwone obramowanie, gdy wystąpi walidacji.