As I mentioned in the post explaining the way to create an CKEditor instance, now instead of including the normal ckeditor.js file, you can use ckeditor_basic.js file, a bootstrap that contains just the core functionality so the rest of the code can be loaded at a later time, avoiding delaying the initial load of the page.
You just need to replace
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
with
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor_basic.js"></script> </head>
By default (you could alter the packaged contents to remove/add plugins), ckeditor.js weights 260KiB, but ckeditor_basic.js is only 7KiB, so the advantage is that if you don't need to create an instance of CKEditor right from the start you can save those 260KiB in the initial load (of course you should have http compression enabled on the server, so the download size is smaller, but let's focus on the raw numbers to ease understand it)
When is loaded the rest of ckeditor?
At any time you can call CKEDITOR.loadFullCore() to get the full functionality ready. Before the page is loaded, you can set in CKEDITOR.loadFullCoreTimeout the number of seconds to wait before the core is automatically loaded, the default value is 0, meaning that it won't be loaded automatically.
If you try to create an instance of CKEditor before the Full Core has been loaded, then it will be loaded at that time, so the user will have to wait a little to get the full core and then the editor will be created.
If you are using the automatic replacement of textareas with class ckeditor (or defined with replaceClass), then if no matching textareas are found the core won't be loaded. The same thing happens if you use replaceAll.
How to use this info:
If you know that the page will always use some instance of CKEditor right from the start, then just forget about this, it won't help you, it's an extra http request and 7KiB downloaded that are wasted.
If you expect that the full functionality of CKEditor won't be used most of the time, you can use ckeditor_basic.js and then let code take care of loading the rest only when it's needed.
If you know that you don't need it at page load, but that usually an instance will be created shortly after, you can set some seconds in the CKEDITOR.loadFullCoreTimeout property.
If you are able to know that after some command the user will need CKEditor, you can load the full core at that time (remember that this method destroys itself after it has been called, so you must always use it detecting its presence as it's in the example):
// Check if the full core code has been loaded and load it.
if ( CKEDITOR.loadFullCore )
CKEDITOR.loadFullCore();
But these are just some guidelines, you should be the one that knows your app, how it's being used, and of course remember that browsers have caches, so those 260KiB aren't so terrifying after you realize that on second load it's a hit in the cache and in fact it might be better from a point of view to use the full core in most situations. On the other hand, you might want to merge the basic code into the rest of the javascript of the page, and then it's just a little increase in the size of that javascript and CKEditor will load itself only when it's needed
Caution with the filenames
The loadFullCore just tries to load the file CKEDITOR.basePath + 'ckeditor.js', so if you want to use this boostrap technique you must leave the name as is, also if you try to embed the file into some system (like Asp.Net the WebResource.axd) then it will also fail, and there is no provision to make it work in those situations.
If you have renamed the ckeditor.js (if you don't use this bootstrap system) or ckeditor_basic.js (or have merged into other file), you might need also to do some adjustments, like setting CKEDITOR_BASEPATH (because the detection of CKEditor.basePath is based on the name "ckeditor"), and some times provide a CKEDITOR_GETURL implementation for the getUrl method. But this is too much for this post, someone that uses it might explain it better.
So if you find that something isn't working, be sure to use the default filenames, and if you can't then remember that you'll need to specify some data by yourself.
4 comments:
How to create ckeditor instance.
help me above issue
Nice, very clear, very helpful. Thanks for posting.
How do you accomplish this with the .NET control? Since it automatically sets the path and the file name of ckeditor?
I'm not sure that it makes sense to delay the load of CKEditor if you're using the .net wrapper.
With the .Net wrapper you create an instance right from the start, so it should be available to the user as soon as he loads the page.
The delayed loading is useful when you are creating instances on the fly using the javascript API, so the page loads fast, and some time later when the user creates something like "edit this" you create an instance, but that's javascript, not .Net
Am I wrong?
Post a Comment