Comment vérifier si CKEditor contient du texte?

Question

J'ai un formulaire HTML avec quelques champs. L'un d'eux est une zone de texte gérée par CKEditor.

Lorsque l'utilisateur veut soumettre le formulaire, je veux vérifier s'il a entré des valeurs dans tous les champs.

Je sais comment je peux vérifier si le contrôle CKEditor contient quelque chose, mais il peut s'agir de balises HTML "vides" sans aucun texte.

Comment vérifier le texte? Côté serveur J'utilise quelque chose comme le trim de PHP (strip_tags ($ content)), donc je voudrais avoir la même chose en JavaScript.

Une solution utilisant jQuery serait également utilisable.

Answer 1

Cela fonctionne:

$("#editorContainer iframe").contents().find("body").text(); 

qui contiendra uniquement le texte, et aucune des balises HTML.

MISE À JOUR

Il fonctionne sans aucun doute sur la CKEditor demo page. Utilisez Firefox et Firebug, accédez à la console Firebug, et tapez:

$("#demoInside iframe").contents().find("body").text(); 

La console affichera le texte dans l'éditeur, sans balises html. Assurez-vous que le sélecteur est correct dans votre application particulière. Vous pouvez tester votre sélecteur comme ceci:

$("#demoInside iframe").contents().find("body").length; 

Cela devrait être égal à 1. Si c'est 0, votre sélecteur est faux.

MISE À JOUR 2

Encore une fois, mon code est toujours correct, et il fonctionne toujours sur cette page. Vous avez juste besoin du bon sélecteur. Sur la page que vous avez consulté, il s'agit d'un <span> avec l'identifiant cke_editor1. Cette page particulière n'utilise pas jQuery, il faut donc du travail supplémentaire pour prouver que cet exemple fonctionne. Installez FireQuery, "jqueryify" la page, puis faites-le dans la console Firebug (notez que vous devez utiliser jQuery et non $. C'est comme ça que fonctionne FireQuery).

jQuery("#cke_editor1 iframe").contents().find("body").text(); 

En bref, assurez-vous que vous avez le sélecteur droit d'accéder à votre iframe. Si vous créez votre CKEditor à partir d'un <div> ou d'un <textarea> n'est pas important. Tant que vous pouvez sélectionner le que CKEditor injecte dans le DOM, vous pouvez utiliser .contents().find("body").text() pour obtenir le texte de cette iframe. Avez-vous testé votre sélecteur jquery pour voir si .length == 1?

Answer 2

Nous utilisons prototype, avec cette bibliothèque et l'ajout suivant:

Element.addMethods({ 
    getInnerText: function(element) { 
    element = $(element); 
    return element.innerText && !window.opera ? element.innerText 
     : element.innerHTML.stripScripts().unescapeHTML().replace(/[\n\r\s]+/g, ' '); 
    } 
}); 

(Merci à Tobie Langel)

j'ai pu utiliser la fonction suivante pour déterminer si un texte réel était à l'intérieur CKEditor:

function editorEmpty(instanceName){ 

    var ele = (new Element('div')).update(CKEDITOR.instances[instanceName].getData()); 

    return (ele.getInnerText() == '' || innerText.search(/^( )+$/i) == 0); 
} 

Notez le test   aussi bien - souvent quand l'éditeur semble vide, il contient en fait somethin g comme: <p>&nbsp;</p>.

Answer 3

CKeditor a sa propre fonction intégrée pour la récupération de données dans un éditeur de texte:

function CheckForm(theForm) 
{ 
    textbox_data = CKEDITOR.instances.mytextbox.getData(); 
    if (textbox_data==='') 
    { 
     alert('please enter a comment'); 
    } 
} 

Documentation

Answer 4

Vous pouvez utiliser l'extrait ci-dessous pour vérifier si le ckeditor a un texte. Ne semble pas fonctionner, je reçois une chaîne vide même si j'ai du texte tapé dans le contrôle

var _contents = CKEDITOR.instances.editor1.document.getBody().getText(); 
if (_contents == '') { 
    alert('Please provide the contents.') ; 
}