Hi there,
i'm writing an app in which a journalist should be able to switch the css-stylesheet for the fckeditor. after that the wysiwyg-area should "reload" its content to visualize the styles.
the application is realised with AJAX.
The Form has a selectbox for changing the stylesheets:
<label for="style">Stilanzeige</label>
<select name="style" id="style" onchange="switchFckStyle('content_test',this[this.selectedIndex].value)">
<option value="design_01.css">DESIGN 1</option>
<option value="design_02.css">DESIGN 2</option>
<option value="design_03.css">DESIGN 3</option>
<option value="design_04.css">DESIGN 4</option>
</select>
The corresponding js-function looks like this:
var switchFckStyle = function(instancename,url){
var oEditor = FCKeditorAPI.GetInstance(instancename);
alert(oEditor.Config['EditorAreaCSS']);
oEditor.Config.EditorAreaCSS = url;
oEditor.Focus();
}
But fck don't re-render the content with the new styles. Is there a possibility to do this without a request?
Cheers, Patrick
i'm writing an app in which a journalist should be able to switch the css-stylesheet for the fckeditor. after that the wysiwyg-area should "reload" its content to visualize the styles.
the application is realised with AJAX.
The Form has a selectbox for changing the stylesheets:
<label for="style">Stilanzeige</label>
<select name="style" id="style" onchange="switchFckStyle('content_test',this[this.selectedIndex].value)">
<option value="design_01.css">DESIGN 1</option>
<option value="design_02.css">DESIGN 2</option>
<option value="design_03.css">DESIGN 3</option>
<option value="design_04.css">DESIGN 4</option>
</select>
The corresponding js-function looks like this:
var switchFckStyle = function(instancename,url){
var oEditor = FCKeditorAPI.GetInstance(instancename);
alert(oEditor.Config['EditorAreaCSS']);
oEditor.Config.EditorAreaCSS = url;
oEditor.Focus();
}
But fck don't re-render the content with the new styles. Is there a possibility to do this without a request?
Cheers, Patrick
RE: Changing stylesheet at Runtime (Ajax)
I had this exact same solution partially working last week and just decided it was getting a little untidy. Luckily I have a backup of what I did, so hopefully it helps you.
What I found was that oEditor.Config['EditorAreaCSS'] accepts an array of style sheets, so I loaded an array and then disable all but the one stylesheet I want to start with. Then when triggered by the user drop-down selection I would enable the new css.
The one problem I had was instead of FCKeditor adding <link> tags for each css in the array, it for some reason loaded one <link> tag with the href="css1,css2,css3" - that is, they were being comma separated. This was very strange and I couldn't find where or why it was doing this.
I was only working on FF so I don't know if it'd work for other browsers.
Anyway, some code snippets that might help you...
/*
set up the EditorAreaCSS configuration
This loads all css files into the document body. It's supposed to put them in individual <link>'s, inspect the results to make sure it is.
*/
var editor = FCKeditorAPI.GetInstance('myeditor');
var s = editor.GetXHTML( true );
var tmp = new Array();
tmp[0] = 'path/to/fck_editorarea.css';
tmp[1] = 'path/to/custom1.css';
tmp[2] = 'path/to/custom2.css';
editor.Config['EditorAreaCSS'] = tmp;
//which css file to load
var cssToUse = 'custom2';
/*
enable or disable each available css.
This wasn't quite working as desired. You'll need to put some in some debugging (firebug will help heaps).
I found the "title" attribute setting wasn't available but when I manually had it enabling and disabling the stylesheets it did apply the changes to the editor
I got this snippet for A List Apart - http://alistapart.com/stories/alternate/
*/
var i, a;
for(i=0; (a = editor.EditorDocument.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == cssToUse)
a.disabled = false;
}
}
//reload the editor content
editor.SetHTML( s );
I do hope this helps you. If you get it working please post the final solution to the forums, or better still create a plugin. The world will love you for it
Cheers,
Marcus