AutoCSS: Auto-inject all CSS from host page into ckeditor

Looks at all css files included via <link rel="stylesheet"> and injects them into editor.config.contentsCSS.

Makes for even better WYSIWYG!

License

Licensed under the terms of any of the following licenses at your choice: GPL, LGPL and MPL.

Download

AutoCSS v0.1
Download
GitHub

Installation

1. Extract the contents of the file into the "plugins" folder of CKEditor.
2. In the CKEditor configuration file (config.js) add the following code:

config.extraPlugins = 'autocss';

Fri, 02/24/2012 - 19:43

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: AutoCSS: Auto-inject all CSS from host page into ckedito

This might be interesting to some people, but I wonder why are you using the whole Sizzle there
Isn't it enough to use just this as the whole plugin? (untested)

CKEDITOR.plugins.add('autocss', {
    init: function(editor) {
            var customCssForCkeditor = [];
            var stylesheets = document.styleSheets;
            for (var i = 0; i < stylesheets.length; i++) {
                  var sheet = stylesheets [ i ],
                         node = sheet.ownerNode || sheet.owningElement;

                var href = node.getAttribute('href');
                if (!href) continue;

                // skip ckeditor
                if (href.indexOf('ckeditor') === -1)
                {
                    customCssForCkeditor.push(href);
                }
            }
            editor.config.contentsCss = customCssForCkeditor;
          }
});

Tue, 03/20/2012 - 20:54

apinstein2

Joined: 24/02/2012

Posts: 2

Re: AutoCSS: Auto-inject all CSS from host page into ckedito

I did just inline Sizzle because it was the easiest way I could find to do cross-platform selectors. I don't mind the slight loading hit vs the time it would take me to optimize it in a cross-browser way.

In fact, I just updated it to use all of jQuery instead of just Sizzle, so I made the problem worse

However my goal was to get the editor to use the same background-color as is in effect where the textarea is, giving you true WYSIWYG editing.

I had originally done this by making the skin transparent, but that only worked on the legacy skin (v2) and also failed pretty badly when the editor was maximized. This approach of sampling the background-color from the actual web page seems to work much better.

Tue, 03/20/2012 - 21:52

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: AutoCSS: Auto-inject all CSS from host page into ckedito

Er...

In my code above I showed you how to get all the stylesheets data in a cross browser way without using any library just those few lines of code (DOM0).

And if you want to get a cross browser getComputedStyle, given that you're already loading CKEditor you can use http://docs.cksource.com/ckeditor_api/s ... putedStyle

That way you'll get a small plugin without any 3rd party dependencies.