CKEditor control always loading ckeditor.js

Geplaatst op: 29 July 2012 | Geen reacties
Van de wysiwyg redactie

Quite often when I run into a problem while doing some web development work there is always a blog post hidden in the hundreds of Google results that have the solution. Now I run into a problem with CKEditor under ASP.NET, I thought I can perhaps return the favour as not that much was available about the issue I had.

I was using the Pingdom Full Page Test tool to analyse how I can optimise a website that I work on and notice that for every visited the CKEditor JS library ckeditor.js is being downloaded that, with around 300kB in size, has quite an impact on the load time of the website, even with a decent connection that can be noticed. The website is running an internally developed CMS in ASP.NET. Every page consists of ‘modules’, which are in fact ASP.NET usercontrols. Most pages have HTML modules, logged in users with the right permissions will see a small edit button in order to edit the HTML content of that module, with CKEditor used as control. Switching to the edit mode of the control is being done with the MultiView control.

So what is the problem then? If the view with the CKEditor control is not active, it will probably also not load the ckeditor.js? Well, this turns out to be not true, even if the control is not visible, it will insert some lines of code to load the JS library. I thought of some solutions:

  • Usage of ckeditor_basic.js, which is lighter and will load ckeditor.js only if needed. Unfortunately, this can’t be changed when using the control, and I didn’t want to step away from using the control, since that would force me to change a lot of code on different places and I was not sure if it wouldn’t cause problems because of dependency.
  • disable the control and enable when switching to the ‘edit’ view. Tested and didn’t help!
  • Using a PlaceHolder control and add the CKEditor control dynamically when changing view. Works, and quite easy to implement

See some sample code to be put in the codebehind, after you replaced the CkEditor control with a PlaceHolder control:

editor = new CKEditor.NET.CKEditorControl();
				editor.ID = "webContent";
				editor.Toolbar = "Full";

Accessing the control after adding in other parts of the code can be easy:

CKEditor.NET.CKEditorControl editor = (CKEditor.NET.CKEditorControl)webContentPlaceHolder.FindControl("webContent");

Note that you also need to re-add the control in the Page_Load() if IsPostBack is true in order to access the control again and for example read out the content when you do postback (i.e. save)

Happy coding!



Welcome! On this blog I post stuff that might be interesting for others or just random posts on daily life stuff. Some of my posts are in English, maar soms ook gewoon in het Nederlands, net waar ik zin in heb. Enjoy!

RSS feed

Last(.fm) played songs

  • Kensington - Rivals
  • Kensington - Word You Don't Know
  • Kensington - Little Light

140 characters