[FCKeditor] How to use its own css

Hi,

I want to use my own css file in FCKeditor.

In Administration/configuration I defined :

Path to CSS file: /assets/sites/style.css
Toolbar set: standard and advanced

But when I click on "style" I can not choice my class defined in style.css

Thank’s

Aour

In Administration/configuration I defined :

Path to CSS file: /assets/sites/style.css

This is not active by default

You need to edit certain files to make this work because of how FCKeditor was designed. To use a style sheet the way you are describing you must edit /assets/plugins/fckeditor/fckstyles.xml and /assets/plugins/fckeditor/editor/css/fck_editorarea.css.

Put the css in the css file and use the FCKeditor XML syntax to add it to the list in the fckstyles.xml.

The simplest way is to just use Xinha which has native CSS file support (NO XML FILE).

Best of luck.

You have to be possible with applying CSS styles to rich text editors though. If you don’t have the surrounding DIVs as part of the eidtable content, you could easily wind up with some unexpected results. For example, to get around the way IE 5 handled automatic margins, designers frequently apply the text-align: center to a style sheet, followed by text-align: left on a site-wrapper div. This could make it so that all the text in your FCK instances winds up being centered. Just something to consider.

Hi,

Thank you for your answers

I do not want to use positionning CSS in the editor. They are in the template with <DIV>
It’s just to apply specific css font or text.

Perhaps, I can use [*#events*] and create a a class .events

Aour

Ryan, FCKeditor does NOT use the built in "Path to CSS" in the settings, so unless you edit the files FCKeditor will NOT inherit any styling from divs, only its finished output will.

@aour Just do this to make it work

You need to edit certain files to make this work because of how FCKeditor was designed. To use a style sheet the way you are describing you must edit /assets/plugins/fckeditor/fckstyles.xml and /assets/plugins/fckeditor/editor/css/fck_editorarea.css.

Put the css in the css file and use the FCKeditor XML syntax to add it to the list in the fckstyles.xml (you can look this up at the FCKeditor WIKI site).

The simplest way is to just use Xinha which has native CSS file support (NO XML FILE) since a plugin is floating around these forums.

Best of luck.

Correct Mark. But if you DO set it to use the styles, then it CAN cause issues like I described and more.

Hi,

@mark : my css file change each day actually. It’s not friendly to copy/past each time the css modification.

TinyMce USE the built in "Path to CSS" but it’s very slow to appear.

Xinha seems very interesting but we have to wait TP4 to have the plugin.

I think that I will create my site without editor, and wait the next version of modx to integrate another editor.

I love notepad, so i will do copy/paste in the content window

Aour

More I practise, more I like Modx. I wait SMF plugin and I open my french Modx Website

Quote from: aour at Oct 03, 2005, 09:49 AM

@mark : my css file change each day actually. It’s not friendly to copy/past each time the css modification.

You can use an @import but that CSS file is the one that controls how the styles are DISPLAYED in FCKeditor!!!!!!!
The xml file controls how the XHTML is styled via inline styles, divs, spans, etc.

Quote from: aour at Oct 03, 2005, 09:49 AM

Xinha seems very interesting but we have to wait TP4 to have the plugin.

No, it works fine. See http://modxcms.com/forums/index.php/topic,563.msg3710.html#msg3710

Re

Xinha plugin is installed

I search now how to define the css file to use in http://xinha.python-hosting.com/

I have modified plugin.xinha.tpl

French language :


And uncomments the plugins CSS and Dynamic CCS:



When I launch Xinha I do not see any modification, always in english and no dropdown menu of CSS

Thank’s

Aour

Sent you a PM aour.......

I would be glad to give you a hand but having access to your manager would make this go ALOT faster.