Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check whether CKEditor has some text in it?

Tags:

I have an HTML form with a few fields. One of them is a textarea managed by CKEditor.

When the user wants to submit the form, I want to check whether he entered values in all the fields.

I know how I can check if CKEditor control has anything in it, but it could be "empty" HTML tags without any text in it.

How do I check for text?

Server side I'm using something like PHP's trim(strip_tags($content)), so I'd like to have the same in JavaScript.

A solution using jQuery would also be usable.

like image 250
Milan Babuškov Avatar asked Jul 18 '10 21:07

Milan Babuškov


People also ask

How do I get CKEditor text?

Ckeditor will replace your textarea with it's own elements and that is where you will need to get the html from. If you inspect the original textarea you will find it empty, the content is actually elsewhere within a bunch of html generated by the editor.

How do I get CKEditor value?

you can add the following code : the ckeditor field data will be stored in $('#ELEMENT_ID'). val() via each click. I've used the method and it works very well. ckeditor field data will be saved realtime and will be ready for sending.

How do I know what version of CKEditor I have?

Look inside the ckeditor/ckeditor. js file. At the top of the file, you can find the version.

What is CKEditor with ID or class?

CKEditor docs says the replace method takes an element argument : element : Object/String The DOM element (textarea), its ID, or name. So, you can use document. getElementById to select your textarea and then use CKEditor.


1 Answers

This will work:

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

That will contain only the text, and none of the html tags.

UPDATE

It definitely works on the CKEditor demo page. Use Firefox and Firebug, go to the Firebug console, and type in:

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

The console will print out the text in the editor, with no html tags. Make sure you have the selector correct in your particular application. You can test your selector like this:

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

That should equal 1. If it's 0, your selector is wrong.

UPDATE 2

Again, my code is still correct, and it still works on that page. You just need the right selector. On the page you linked to, it is a <span> with id cke_editor1. That particular page does not make use of jQuery, so it requires some additional work to prove this sample works. Install FireQuery, "jqueryify" the page, and then do this in the Firebug console (note you have to use jQuery and not $. That's how FireQuery works).

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

In short, make sure you have the right selector to get to your iframe. Whether you create your CKEditor from a <div> or a <textarea> is not important. As long as you can select the <iframe> that CKEditor injects into the DOM, you can use .contents().find("body").text() to get the text of that iframe. Have you tested your jquery selector to see if .length == 1?

like image 170
Samuel Meacham Avatar answered Sep 19 '22 12:09

Samuel Meacham