*** PROBLEM 1 ****
I have a pluging that creates a custom combo box which
are to list some stylesheets that I would like to change dynamically.
When I select a new stylesheet from the combo this code is run in the plugin:
txtHTML = FCK.GetHTML();
alert("HTML:"+txtHTML);
// FCK.Config["EditorAreaCSS"] = "/styles/style2.css";
FCK.EditorAreaCSS = "/styles/style2.css";
alert("AFTER EditorAreaCSS");
FCK.SetHTML('NEW TEXT INSERTED');
Looks like all is executed smoothly except that the styles for the editor does not change.
Either this is wrong syntax:
FCK.EditorAreaCSS = "/styles/style2.css";
or it need an aditional ?? function call to make the editor load the new stylesheet.
or I'm on a wrong track here... and this may not be possible.
Would appreciate some feedback.
I really want this to work. Would be so cool to be able to switch the whole stylesheet on runtime.
I also want to use real stylesheets with the switcher, stylesheets that I use elsewhere on the site.
*** PROBLEM 2, related to 1 ****
I'm using:
function FCKeditor_OnComplete( editorInstance ){
editorInstance.Events.AttachEvent( 'OnBlur' , FCKeditor_OnBlur ) ;
editorInstance.Events.AttachEvent( 'OnFocus', FCKeditor_OnFocus ) ;
}
function FCKeditor_OnBlur( editorInstance ){
editorInstance.ToolbarSet.Collapse() ;
}
function FCKeditor_OnFocus( editorInstance ){
editorInstance.ToolbarSet.Expand() ;
}
as well as this in fckconfig.js
FCKConfig.ToolbarStartExpanded = false ;
to make the editors load without displaying the toolbar, but then when I enter the editor, the toolbar gets visible and when I leave the editor, the toolbar gets hidden (nice feature by the way, especially when using lots of multiple editors in same page.... and did I say the multiple editors loads superfast 
)....
Then other problem I have with my custom combo style switcher is that when the code that change the style has run the editor hides the toolbar.
Is there any code I can add to the plugin to prevent this to happen?
Thu, 12/28/2006 - 07:07
#1
RE: Custom StyleSheet switcher not working?
Did some more testing yesterday and finally found a way to switch stylesheets in FCKeditor.
Since I have not seen this mentioned anywhere else in this forum I post my findings here.
Others may find it useful to.
As I posted in my original question in this thread I wanted to use a custom combo (listbox) in the editor to switch between available stylesheets.
I found some code on how to make that custom combo plugin here:
https://sourceforge.net/tracker/index.p ... tid=737639
The above link just create a combo in the editor with content of your choise and when you select another
value then a custom function in the plugin is fired.
I used the above and just changed the function to suit my needs.
Now to how to switch the stylesheets.
It's done by using DOM.
Got the idea from this thread:
https://sourceforge.net/forum/forum.php ... _id=379487
where Alfonso Marinez stated that it might be doable using DOM.
A nice read a about W3C DOM compatibilaty can be found here:
http://www.quirksmode.org/dom/w3c_css.html
And this is where I found what I could use to make this work.
What I really wanted was to be able to switch the whole stylesheet in one go.
Actually this is doable in IE (not on MAX though) using this syntax
document.styleSheet[0].href
According to http://www.quirksmode.com this is readonly for IE on MAC as well as in Mozilla and Safari.
So we have the option to use
document.styleSheet[0].href in explorer 5 and 6 (on windows).
If you are able to fetch each rule in a given stylesheet then:
we can use this for IE (5 and 6 on windows).
To add a rule to first stylesheet:
document.styleSheets[0].addRule('PRE', 'font: 14px verdana');
To remove first rule from first stylesheet:
document.styleSheets[0].removeRule(0);
And we can use this syntax for mozilla:
To add a rule to first stylesheet:
var x = document.styleSheets[0];
x.insertRule('PRE {font: 14px verdana}',x.cssRules.length);
To remove first rule from first stylesheet:
document.styleSheets[0].deleteRule(0);
In my combo plugin, in the function that is called when I change the value in the custom combo, I just created some quick and dirty code to test this to see how it worked.
And hurray, it is working.
So for those of you that can make use of this, enjoy (code below).
// **** START STYLE SWITCHING CODE EXAMPLE ****
// code below tested in IE 6.0, FF 2.0.0.1 and NE 8.3
// worked in all exept a minor bug in NE, where the editor toolbar gets hidden after the style changes are made
// Note that I only tested with a stylesheet that had one rule only, so for this to work better create a for loop to delete all the rules
// in the real world this rules would probably be fetched from database using AJAX like coding
css1 = "body { font-family:arial,sans-serif; background-color: #000; color: #fff; font-size:10px; font-weight:normal; }";
css2 = "body { font-family:arial,sans-serif; background-color:blue; color:gray; font-size:20px; font-weight:bold; }";
css3 = "body { font-family:arial,sans-serif; background-color:yellow; color:black; font-size:12px; font-weight:bold; }";
css1name = "body";
css1data = "font-family:arial,sans-serif; background-color: #000; color: #fff; font-size:10px; font-weight:normal;";
css2name = "body";
css2data = "font-family:arial,sans-serif; background-color:blue; color:gray; font-size:20px; font-weight:bold;";
css3name = "body";
css3data = "font-family:arial,sans-serif; background-color:yellow; color:black; font-size:12px; font-weight:bold;";
// get a reference to editorDocument
ed = FCKeditorAPI.GetInstance(FCK.Name).EditorDocument;
if (document.all){
// delete current rules,
ed.styleSheets[0].removeRule(0);
// get ref to stylesheet
var x = ed.styleSheets[0];
if (itemText == 'style1'){
x.addRule(css1name, css1data);
} else if (itemText == 'style2'){
x.addRule(css2name, css2data);
} else if (itemText == 'style3'){
x.addRule(css3name, css3data);
}
} else {
// delete current rules: change laiter to a for loop
ed.styleSheets[0].deleteRule(0);
// get a reference to the stylesheet
var x = ed.styleSheets[0];
if (itemText == 'style1'){
x.insertRule(css1, x.cssRules.length);
} else if (itemText == 'style2'){
x.insertRule(css2, x.cssRules.length);
} else if (itemText == 'style3'){
x.insertRule(css3, x.cssRules.length);
}
}
// i display the FCKeditor(s) where toolbar is collapsed, this is a cool feature, especially if many editors on same page
// when you enter the editor the toolbar will be visible and when you leave, toolbar hides.... nice feature
// and according to fckeditor wiki pages this was only available if using the javascript API (if I'm not mistaken), I found it to work nicely using the PHP API as well.
// so the next line is to make sure the toolbar does not collapse after I have changed the value in my custom combo (by some reason that failed in my netscape browser though... but then who uses that?)
FCK.Focus();
// **** END CODE EXAMPLE ***
Now I really look forward to version 2.4 where the FCKeditor inventor promises that the enter key behaviour will be handled the same in all browsers.
Nice work Frederico... keep up the good work
At last: if some FF developer are reading this:
please make the href writable so we can use:
document.styleSheet[0].href to switch our stylesheets.
For those of you that only want it to work with IE that might be a cleaner way to do it.