This is the second post about CKEditor, be sure to read first the prerequisites to use CKEditor.
As explained in the integration guide you must add the CKEditor library to the head of your document. I would like to add a little remark for the moment: instead of ckeditor.js you can use ckeditor_basic.js if you don't need the features before the page is loaded, it will load only a small stub and delay the full load to make the page ready quicker. I explain this feature in detail here.
So go ahead and add it:
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
Now the CKEDITOR object is ready to be used in your page. This is the entry point for all the CKEditor functionality.
The most common situation is to use a textarea for your content and replace it with CKEditor:
<textarea cols="80" id="editor1" name="editor1" rows="10"> <p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">CKEditor</a>.</p> </textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
This approach means that if the user is using an old browser that it's not supported by CKEditor, or they have disabled javascript they will get a plain textarea and they can still use your site.
Ok, so far I haven't said anything interesting, but I think that it's better to start step by step, reviewing what's available before explaining new things. So the next step is to look at the CKEDITOR object.
What about automatically converting the textareas to CKEditors without any javascript (besides the library of course)?
You just need to add the class "ckeditor" to you textareas and you're done! Look at the _samples/replacebyclass.html file.
If you want to the magic to work with other class names then you must use the replaceClass property. This is how your page would look if you have already some textareas with the class "html" and you want to use now CKEditor without any further changes:
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <script type="text/javascript"> CKEDITOR.replaceClass = 'html'; </script> ...
As you can see, with minimal changes to your existing pages you can use CKEditor.
Other times you might want to use CKEditor in all the textareas of your page, no matter what are their classes. Then replaceAll is your friend. As the replace call, you must use it only after your textarea, or if you must add it in the head of the document, use the document "onload" event (be careful: if you assign directly document.onload other script might want to also use it in the same "stupid" way and will erase your listener, or you could erase that other listener)
In fact, the replaceClass and replaceByClassEnabled is just some syntactic sugar to easily use the replaceAll at page load with a className.
The replaceAll method can be called in three ways:
- No parameters: All the textareas are replaced
- A string parameter: Only the textareas that have their class matching that parameter will be replaced
- A function parameter: This is the most powerful option, each textarea will be passed to that function, along an empty config object that can be used to apply custom configuration options to each instance.
So if you want to replace all the textareas in the page, except those that have a class of "text" or whose id is "summary" you should use this code at the end of the page (or on the onload event):
<script type="text/javascript">
CKEDITOR.replaceAll( function(textarea, config) {
if (textarea.className=="text") return false;
if (textarea.id=="summary") return false;
return true;
});
</script>
Finally there's the appendTo method, but for the moment I can't figure out why that is interesting, so I won't bother to explain it need to study it better to give my impressions about it.
