I'm sure this has been solved or discussed before as I would have thought it is a common need especially if one is using fck within a content management application. However, I could only find one thred and that didn't solve my problem... so I am hoping there are folks out there who have already crossed this bridge.
Here is the scenario.
You have a page with an arbitrary background.
You want to invoke the editor and load some arbitrary html which has a transparent body. The idea being that you can edit the html in situ and see the background of the page show though.
I have used iframes with transparency multiple times in normal coding without issue. Just to make sure I had coded the HTML (that I am passing to the editor value) correctly, I coded a simple dummy page with an iframe with ALLOWTRANSPARENCY="true" set and loded my HTML into the iframe. As expected I could view the background of the dummy page through my HTML and the iframe it was within.
So initially I went to the fck_editorarea.css file and change the background value to transparent. Of vourse that didn't work so then I started poking around in fckeditor.html and saw where it was setting up the tables and whatnot to hold the tool bar and the editing area and I changed the <body> to <body style="background-color: transparent"> which is normally what I would do to ensure that HTML loaded into a transparent capable iframe would have a transparent background.
Of course that also did not work, so then I figured that probably the issue was that when fck was creating the iframe to hold the editor it was not creating it with ALLOWTRANSPARENCY="true" and that would explain the behavior. So after looking though various files I found to areas where it seems to be creating iframes.
1) In fckeditingarea.js
FCKEditingArea.prototype.Start = function( html, secondCall )
{
var eTargetElement = this.TargetElement ;
var oTargetDocument = FCKTools.GetElementDocument( eTargetElement ) ;
// Remove all child nodes from the target.
while( eTargetElement.childNodes.length > 0 )
eTargetElement.removeChild( eTargetElement.childNodes[0] ) ;
if ( this.Mode == FCK_EDITMODE_WYSIWYG )
{
// Create the editing area IFRAME.
var oIFrame = this.IFrame = oTargetDocument.createElement( 'iframe' ) ;
oIFrame.src = 'javascript:void(0)' ;
oIFrame.frameBorder = 0 ;
oIFrame.width = oIFrame.height = '100%' ;
So I added..
oIFrame.allowTransparency = true ;
oIFrame.style.backgroundColor='transparent';
2) In fckeditor.js
FCKeditor.prototype._GetIFrameHtml = function()
{
var sFile = 'fckeditor.html' ;
try
{
if ( (/fcksource=true/i).test( window.top.location.search ) )
sFile = 'fckeditor.original.html' ;
}
catch (e) { /* Ignore it. Much probably we are inside a FRAME where the "top" is in another domain (security error). */ }
var sLink = this.BasePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.InstanceName ) ;
if (this.ToolbarSet) sLink += '&Toolbar=' + this.ToolbarSet ;
return '<iframe id="' + this.InstanceName + '___Frame" src="' + sLink + '" width="' + this.Width + '" height="' + this.Height + '" frameborder="0" scrolling="no"></iframe>' ;
}
so I added ALLOWTRANSPARENCY="true" style="background-color:transparent;" to the return '<iframe line to get...
return '<iframe id="' + this.InstanceName + '___Frame" src="' + sLink + '" width="' + this.Width + '" height="' + this.Height + '" ALLOWTRANSPARENCY="true" style="background-color:transparent;" frameborder="0" scrolling="no"></iframe>' ;
I was somewhat hopefull that this would work but alas not.
So after a day of messing around I decided to get advice of those more experienced than I.
Any thoughts or suggestions would be most welecome. I know this has to be possible as fundementially the editor window is just an iframe and should be capable of transparency. I'm obviously missing something somewhere.
Thanks in advance for any help provided.
Here is the scenario.
You have a page with an arbitrary background.
You want to invoke the editor and load some arbitrary html which has a transparent body. The idea being that you can edit the html in situ and see the background of the page show though.
I have used iframes with transparency multiple times in normal coding without issue. Just to make sure I had coded the HTML (that I am passing to the editor value) correctly, I coded a simple dummy page with an iframe with ALLOWTRANSPARENCY="true" set and loded my HTML into the iframe. As expected I could view the background of the dummy page through my HTML and the iframe it was within.
So initially I went to the fck_editorarea.css file and change the background value to transparent. Of vourse that didn't work so then I started poking around in fckeditor.html and saw where it was setting up the tables and whatnot to hold the tool bar and the editing area and I changed the <body> to <body style="background-color: transparent"> which is normally what I would do to ensure that HTML loaded into a transparent capable iframe would have a transparent background.
Of course that also did not work, so then I figured that probably the issue was that when fck was creating the iframe to hold the editor it was not creating it with ALLOWTRANSPARENCY="true" and that would explain the behavior. So after looking though various files I found to areas where it seems to be creating iframes.
1) In fckeditingarea.js
FCKEditingArea.prototype.Start = function( html, secondCall )
{
var eTargetElement = this.TargetElement ;
var oTargetDocument = FCKTools.GetElementDocument( eTargetElement ) ;
// Remove all child nodes from the target.
while( eTargetElement.childNodes.length > 0 )
eTargetElement.removeChild( eTargetElement.childNodes[0] ) ;
if ( this.Mode == FCK_EDITMODE_WYSIWYG )
{
// Create the editing area IFRAME.
var oIFrame = this.IFrame = oTargetDocument.createElement( 'iframe' ) ;
oIFrame.src = 'javascript:void(0)' ;
oIFrame.frameBorder = 0 ;
oIFrame.width = oIFrame.height = '100%' ;
So I added..
oIFrame.allowTransparency = true ;
oIFrame.style.backgroundColor='transparent';
2) In fckeditor.js
FCKeditor.prototype._GetIFrameHtml = function()
{
var sFile = 'fckeditor.html' ;
try
{
if ( (/fcksource=true/i).test( window.top.location.search ) )
sFile = 'fckeditor.original.html' ;
}
catch (e) { /* Ignore it. Much probably we are inside a FRAME where the "top" is in another domain (security error). */ }
var sLink = this.BasePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.InstanceName ) ;
if (this.ToolbarSet) sLink += '&Toolbar=' + this.ToolbarSet ;
return '<iframe id="' + this.InstanceName + '___Frame" src="' + sLink + '" width="' + this.Width + '" height="' + this.Height + '" frameborder="0" scrolling="no"></iframe>' ;
}
so I added ALLOWTRANSPARENCY="true" style="background-color:transparent;" to the return '<iframe line to get...
return '<iframe id="' + this.InstanceName + '___Frame" src="' + sLink + '" width="' + this.Width + '" height="' + this.Height + '" ALLOWTRANSPARENCY="true" style="background-color:transparent;" frameborder="0" scrolling="no"></iframe>' ;
I was somewhat hopefull that this would work but alas not.
So after a day of messing around I decided to get advice of those more experienced than I.
Any thoughts or suggestions would be most welecome. I know this has to be possible as fundementially the editor window is just an iframe and should be capable of transparency. I'm obviously missing something somewhere.
Thanks in advance for any help provided.
RE: transparent editor area
Probably the better way to do what you want is to specify a css file with this background.
RE: transparent editor area
You've almost did it
I've spent 2 days trying to make transparency work in IE. In addition to your updates,
you also need
Index: editor/skins/default/fck_editor.css
===================================================================
--- editor/skins/default/fck_editor.css (revision 114)
+++ editor/skins/default/fck_editor.css (working copy)
@@ -31,13 +31,14 @@
body
{
+ background-color: transparent;
padding: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
}
#xEditingArea
{
- border: #696969 1px solid;
+ border: 0px solid transparent;
}
Index: editor/css/fck_editorarea.css
===================================================================
--- editor/css/fck_editorarea.css (revision 114)
+++ editor/css/fck_editorarea.css (working copy)
@@ -38,7 +38,7 @@
body
{
- background-color: #ffffff;
+ background-color: transparent;
padding: 5px 5px 5px 5px;
margin: 0px;
}
By the way, you don't need these (you'd better style with stylesheets as above):
style="background-color:transparent;"
oIFrame.style.backgroundColor='transparent';
It worked for me