Plugins adds css Files to the head of surrounding docuement Solved
JS+
11:56 Apr 21, 2015
Hello,
Yes, we know about this problem but it is more complicated.
You can switch to behavior you want very easy by adding this to 'config.js':
...but: all dialogs which use Foundation styles will not have access to these styles. For example Foundation Button will unable to display Foundation buttons after doing that due to CKEditor has API which creates dialogs in the global document not in isolated iframes.
We will think to embed some Foundation styles to all out plugins which use them, but this will broke all support of custom Foundation styles. So its not simple choice.
Right now I can just recommend you to adopt your global stylesheet to override Foundation styles. This will give you correctly rendered document in any case. If you have another ideas we are opened to them.
Yes, we know about this problem but it is more complicated.
You can switch to behavior you want very easy by adding this to 'config.js':
config.doksoft_foundation_include_to_global_doc_too = false;
...but: all dialogs which use Foundation styles will not have access to these styles. For example Foundation Button will unable to display Foundation buttons after doing that due to CKEditor has API which creates dialogs in the global document not in isolated iframes.
We will think to embed some Foundation styles to all out plugins which use them, but this will broke all support of custom Foundation styles. So its not simple choice.
Right now I can just recommend you to adopt your global stylesheet to override Foundation styles. This will give you correctly rendered document in any case. If you have another ideas we are opened to them.
Ramon T.
09:14 Apr 27, 2015
Thanks for the answer and explanation,
You probably need to compile a foudnation css with only /buttons/panels/alert-boxes components enabled and put an table.cke_dialog_contents selector around it, so it will only get applied to the dialog div and not to the rest of the document.
If you need to include the css in head, it would probably be better to prepend it instead of appending it, as this makes it easier to overwrite.
Using the config option you mentioned above I can do it myself that way, but it would be nice if the plugin did not have an impact on the rest of the page.
You probably need to compile a foudnation css with only /buttons/panels/alert-boxes components enabled and put an table.cke_dialog_contents selector around it, so it will only get applied to the dialog div and not to the rest of the document.
If you need to include the css in head, it would probably be better to prepend it instead of appending it, as this makes it easier to overwrite.
Using the config option you mentioned above I can do it myself that way, but it would be nice if the plugin did not have an impact on the rest of the page.
JS+
08:30 May 03, 2015
Thank you for hint. Something like this was my first idea for workarounding this issue, but as I have said we have not implemented it before because it will broke custom user styles (for example if you redefined Foundation buttons' styles for your pages). We will try to implement it in next releases.
I am using the Foundation plugins. For some reason the plugins add /..../ckeditor/plugins/doksoft_foundation_advanced_blocks/style.css and //cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css to the head of the sourrouding document instead of adding them to the head of the CKEDITOR iframe on CKEDITOR.replace.
This is annoying as is messes up the current page (e.g. the backend), as soon as the affected plugins are loaded.
This is unwanted behaviour. A CKEditor plugin does not need to change the complete Website CSS. In case of inline usage the CSS needs to be there anyways in order to get applied when no CKEditor is attached. In case of replace there is no need to add the CSS to the sourrounding document. Also CKEditor content CSS can be set with the CKEDITOR.config.contentsCss key either in config.js or on replace.