Recently, I’ve been working on a web-development project (Which I’m omitting from this post), which uses the popular WYSIWYG editor, CKEditor.
A popular issue with WYSIWYG editors, is even though they have display a very accurate depiction of what the content will look like as pure HTML, the content still looks different from what it will be when it’s actually injected into your page, this is typically because your page has CSS and JS to aid in styling, where as the WYSIWYG editor does not.
Like CKEditor, most of the common RTE’s use an iFrame for the content, which is why the CSS/JS is not reflected in the content. I think this actually is done intentionally, to show what it will look like as html exactly, and only html, without any outside interference.
However, I wanted the CSS/JS inside the content. After looking a little bit, I did find a plugin on the CKEditor website, called CKEditor Include CSS & JS, which seemed to accomplish exactly what I wanted.
Two problems with this plugin…
- I don’t like to pay for such little software packages. I don’t at all mind paying for things like Jira for example, but this just seemed to minor
- We aren’t absolutely sure if the project I’m working on will be Open Source or not, or a mixture. If it’s not, then this would need to be a factor in any 3rd party software, and if I move forward as if its going to be Open Source, and its not, then that means I would have to go back and re-factor a lot of code.
So, I decided to just do it myself, which was actually just as easy as it sounds. I can’t believe people pay for software like this, lol.
Before I show the code below and explain it, let me stress that I am NOT a professional web developer, I’m a Linux Engineer, I just so happen to know a good amount of web development skills…
How to use…
- Set the ckeditor_id value to the ID of the textarea using CKEditor
- Set the value of container_classes to whatever classes the final HTML will be displayed in when displayed on the web-page. Since the ALL CSS/JS of the page will be reflected in the content of the textarea, it’s important to set this value correctly, or it may look completely different.
- Copy/Paste the code to wherever you want it to execute.
Whats it do…
- Look through the current page for any CSS files, specifically looking for any <link> tags that have the attribute/value of type=”text/css”, which if done properly, all of the link tags should have (if loading CSS), load the value of href into an array.
- Find the CKEditor instance by looking for an instance named by the value of the variable ckeditor_id
- If you have any extra CKEditor settings, apply them here….
- Waits for the CKEditor instance to be fully initialized, this takes longer than window.load or document.ready, so wait for CKEditors instanceReady event handler.
- Once initialized, look for the correct frame associated to the CKEditor you specified in the ckeditor_id variable. This will look for the correct iframe, not just any iframe. Then create a handler referencing the <head> of that iframe
- Loop through the array created earlier with the CSS files and create a new <link> tag with the stylesheet source as the source collected earlier
And finally, you can view the code HERE, or view it below: