Context Navigation

← Previous Ticket
Next Ticket →

#7452 confirmed Bug

bodyClass and bodyId not applied to combobox (e.g. styles or format)

Reported by:	Paul Stone	Owned by:
Priority:	Normal	Milestone:
Component:	Core : Styles	Version:
Keywords:	HasPatch	Cc:	akeusch@…

Description

When the styles combobox is created, it loads the stylesheet specified in config.contentsCss. However, the body element in the combobox iframe doesn't have the class or ID specified in config.bodyClass/bodyId. As a result the styles previews aren't shown properly as my CSS assumes that the bodyClass will be present.

This is a regression from FCKeditor 2.x.

Attachments (2)

bodyId and bodyClass.patch (3.4 KB) - added by Josh S. 14 years ago.: pass the editor variable to getHolderElement()
bodyId and bodyClass (2).patch (1.7 KB) - added by Josh S. 14 years ago.: Pass bodyId and bodyClass values in defintion

Download all attachments as: .zip

Change History (17)

comment:1 Changed 14 years ago by Sa'ar Zac Elias

Status:	new → confirmed

For now, one could use the cke_format or cke_styles class.

comment:2 Changed 14 years ago by Josh S.

This appears to be a duplicate of bug #7151

And I believe I have the fix, except for one piece of information. Here's what I have so far:

At about line 147 of CKEditor/trunk/_source/plugins/panel/plugin.js

var config = CKEDITOR.instances[--editor_instance--].config
;

var body_class = 'cke_' + dir + ' cke_panel_frame ' + CKEDITOR.env.cssClass + ( config.bodyClass ? ' ' + config.bodyClass + '' : '' );


var data =
 '<!DOCTYPE html>' +

	'<html dir="' + dir + '" class="' + className + '_container" lang="' + langCode + '">' +

		'<head>' +

			'<style>.' + className + '_container{visibility:hidden}</style>' +

		'</head>' +

		'<body' + ( config.bodyId ? ' id="' + config.bodyId + '"' : '' ) +

		' class="' + body_class + '" style="margin:0;padding:0"' +

		' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');"></body>' +

		// It looks strange, but for FF2, the styles must go

		// after <body>, so it (body) becames immediatelly

		// available. (#3031)

		CKEDITOR.tools.buildStyleHtml( this.css ) +

	'<\/html>';

The biggest problem of course is the first line which was just used to verify the rest of it.

Last edited 14 years ago by Josh S. (previous) (diff)

comment:3 Changed 14 years ago by Sa'ar Zac Elias

Marked #7151 as a dup, because this one contains some more information.
@oyejorge thanks!

comment:4 Changed 14 years ago by alexk

Cc:	akeusch@… added

comment:5 follow-up: 6 Changed 14 years ago by Josh S.

Any suggestions on how to get the correct config settings?

comment:6 in reply to: 5 Changed 14 years ago by Frederico Caldeira Knabben

Keywords:	HasPatch added

Replying to oyejorge:

Any suggestions on how to get the correct config settings?

The problem here is that getHolderElement is assynchronous and generic, so it doesn't receive the editor parameter.

One idea would be setting the bodyId and bodyClass as "data-xyz" attributes in the <div> element (line 84), retrieving it later inside getHolderElement - parentDiv.getParent().getAttribute( 'data-xyz' ) -. This may work.

comment:7 Changed 14 years ago by Josh S.

I wasn't able to get anywhere using the getAttribute(..) call.

I played around some more and got it to work by passing the editor variable to getHolderElement() from the richcombo::createPanel() method. This required modifying four different plugin files though.

Patch to follow.

Changed 14 years ago by Josh S.

Attachment:	bodyId and bodyClass.patch added

pass the editor variable to getHolderElement()

comment:8 Changed 14 years ago by Josh S.

Ok, I didn't like the first patch, so I dug around a little more and I think I have something that works much better.

This time, only two plugin files were modified and the bodyId and bodyClass are passed in a similar manner to the paths of the css files.

Changed 14 years ago by Josh S.

Attachment:	bodyId and bodyClass (2).patch added

Pass bodyId and bodyClass values in defintion

comment:9 Changed 14 years ago by Strodtbeck

I have to say that this bug is a very big pain when working with CKEditor to create a theme that uses inline wysiwyg editing.

If the body tag has a background-image or background-color applied to it CKEditor applies them to its drop-down menus even though the specified area being edited has a different image &/or color--you have to specify a bg color and no image to each div that CKEditor is styling to work around this--also true for things like box-shadow.

Furthermore, if you apply background color, box-shadow, etc to a table within the content div area that is styled by CKEditor for editing it will apply the table styles to the whole area being edited by CKEditor and to CKEditor's dialogue for table properties => a mess. In other words, CKEditor is pulling styles and applying them to areas (parent &/or child) when editing and to its own dialogues & drop-down menus which can cause a very messy wysiwyg editing area, thus creating a theme that uses CKEditor for true inline WYWIWYG editing of a page is a real pain.

I hope this is fix soon.

Thanks to those submitting this bug and patch!

comment:10 Changed 14 years ago by Josh S.

Ok, after some more tests with a variety of css files, I'm now of the opinion that a fix for this bug needs to go in the opposite direction. Instead of assigning the bodyId and bodyClass, the fix needs to remove the use of the custom style sheet specified in config.contentsCss.

comment:11 Changed 12 years ago by klemens_u

Please look into this. It would make handling styles much easier if we could set a body css class for the styles dropdown!

comment:12 Changed 12 years ago by Nathan Bunney

I have a simple end user fix that works for me. I simply make config.contentsCss an array and create another CSS file (loaded last in the array) that undoes anything I don't like in body in my main css file. For me that looks like...

contentsCss : [window.subdir+'/css/bootstrap.min.css', window.subdir+'/css/site.css', window.subdir+'/css/editor.css']

Last edited 12 years ago by Nathan Bunney (previous) (diff)

comment:13 Changed 11 years ago by Jakub Ś

#10978 was marked as duplicate.

Same thing can be reproduced in CKEditor 4.x

The Styles and Format Combobox doesn't inherit the bodyId. So if the custom css file is using an backgroud Image in the Body tag it makes the two comboxes unreadable.

Version 1, edited 11 years ago by Jakub Ś (previous) (next) (diff)

comment:14 Changed 11 years ago by Jakub Ś

Summary:	bodyClass and bodyId not applied to styles combobox → bodyClass and bodyId not applied to combobox (e.g. styles or format)

comment:15 Changed 8 years ago by Alexander Obuhovich

I've submitted Pull Request for CKEditor 4.x, that should solve that problem: https://github.com/ckeditor/ckeditor-dev/pull/297

Note: See TracTickets for help on using tickets.

Download in other formats: