How to disable CKEditor dialog skin?
Question
I hope somebody can give me some idea on this. I have a CKEditor 3.6 dialog which contains a single element of type html and loads an external page (or actually it's body html content). The style sheet for that page is loaded by MediaWiki 1.17 resource loader. My problem is that CKEditor skin takes priority over my style sheet. In firebug I can even disable CKEditor styles and see how the page gets it's original shape. Is there a way maybe to disable CKEditor style sheet for this dialog or lower its priority? Or any other way to solve this? Any ideas will be appreciated.
Update: so simpler question is how can I remove inherited CSS properties which break my design?
1 answers
solution1
1 2011-10-08 04:21:14
Please check something with Firebug:
Open your dialog window and right click in the HTML element that contains the external content, then select "Inspect Element".
In Firebug, select the HTML panel, then select the Style pane on the right side and make sure that the "Only Show Applied Styles" option is Not checked.
Look at the right side of the style pane where the source file for each style block is shown, do you see that your style sheet (from the resource loader) is providing some of the styles?
Do the styles from your style sheet all have lines through them to indicate that they've been overridden?
In the past, I've used the information from the HTML and Style panes to create more targeted selectors for the styles, you may be able to over-ride the editor styles using that approach.
Please provide the code being used:
What is the structure of the external HTML content (including any classes and ids or styles)?
Is the entire block enclosed in a container (div or table)?
Are any of your styles targeted through the <body> tag of the external page?
For the dialog code, you can strip out any functionality, unless it's pertinent like .addClass() . Just show the structure of the tab like so:
CKEDITOR.dialog.add( 'Plugin Name', function( editor )
{
return {
title : Plugin.title,
minWidth : 350,
minHeight : 230,
contents : [
{
id : 'TabId',
label : Lang.TabId,
title : Lang.TabId,
elements :
[
{
id : 'ElementId',
type : 'html',
label : Lang.ElementId,
title : Lang.ElementId,
style : 'text-align: center;',
html : '<div>' + Some Content + '</div>',
children :
[
Viewing the code will make it easier to answer your question.
Be Well,
Joe
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.