CSS in the FCK Editor

How do I incorporate my sites CSS into the FCK Editor so that when editing a document, it appears as it does on the site?
-Joshua Fisher

I dont think so if FCKEditor support this behaviour, but after editing the XML file of FCK styles, which is pretty difficult task for ordinary user. Instead that, I will suggest you to use TinyMCE editor, in TinyMCE, you just need to input your CSS file path in system configuration, and it will load your CSS file in editing envoiroment automatically, also it will populate the "Styles" drop down menu with the styles defined in your CSS file.

Hope it helps.

regards,

zi

Hi Zi,

I installed TinyMCE, which works fine - even the first editor which displays behind our company’s firewall! Except the picture manager unfortunatly, which is filtered because of "potentially File Write Access operations"

Regarding the Styles dropdown, it looks like TinyMCE only uses classes like .class, but no ids like #id - do you know of any workaround other then changing my css?

Cheers!
Frisco

Quote from: Frisco at Apr 11, 2006, 03:02 PM

...
Regarding the Styles dropdown, it looks like TinyMCE only uses classes like .class, but no ids like #id - do you know of any workaround other then changing my css?
....

sorry bro, there is no work around exists for this as far as I know, but you should check TinyMCE forums

regards,

zi

Is there a way to link a document to a selected CSS document from within Modx ?

ie

doc 1 (page)
linked to doc2 (css)

I tried to use meta keywords but that didin’t work,

Quote from: joshlfisher at Apr 11, 2006, 02:27 AM

How do I incorporate my sites CSS into the FCK Editor so that when editing a document, it appears as it does on the site?
-Joshua Fisher

Set the path to your CSS file in the manager settings: Administration -> System configuration -> Interface & editor settings -> Path to CSS file

Quote from: bugsmi0 at Jun 27, 2006, 08:43 PM

Is there a way to link a document to a selected CSS document from within Modx ?

Do you mean that you want to specify the CSS file to use per document basis? In this case you could create a TV what holds the url of the CSS file.

so in the TV Input Option Values:: we would put the url to the css ?

how would we link the document with the tv css

First create the TV. If you want the css files to be selected from a list when creating documents, use "DropDown List Menu" as the Input Type and "css1==css1-document-alias.css||css2==css2-document-alias.css" as the Input Option Values (not including quotes). If you want to write the urls/aliases to the css files by your self when creating documents use "Text" as the input type. You can also set the default value for the tv to the Default Value field.

Then tag the templates what will be using this TV. Then go an edit your template and use the created template variable for the css file location, like:

<style type="text/css">
@import url(’[(site_url)][*name_of_tv*]’);
</style>

Then create a document using this template and you should see the TV at the document where you can select which CSS file to use.. Not sure if this all works, didn’t test it, but it should go something like that

cool thanks, a couple of more questions

will this import call work inside a chunk or doc as is ?
<style type="text/css">
@import url(’[(site_url)][*name_of_tv*]’);
</style>

also

css1==css1-document-alias.css

is css1-document-alias.css the path to the css or do we need to include css1-document-cssfile.css

update:

I see the dropmenu with the css list but the styles are not being activated, should I also see this in the source code ? I don’t see any reference to the css

wonder if we could link to a css doc inside the manager using the tv

Quote from: bugsmi0 at Jun 28, 2006, 02:20 PM

cool thanks, a couple of more questions

will this import call work inside a chunk or doc as is ?
<style type="text/css">
@import url(’[(site_url)][*name_of_tv*]’);
</style>

Put that to you’re template as is.

Quote from: bugsmi0 at Jun 28, 2006, 02:20 PM

also

css1==css1-document-alias.css

is css1-document-alias.css the path to the css or do we need to include css1-document-cssfile.css

css1-document-alias.css is the alias of the modx document what is used as css file.

Quote from: bugsmi0 at Jun 28, 2006, 02:20 PM

update:

I see the dropmenu with the css list but the styles are not being activated, should I also see this in the source code ? I don’t see any reference to the css

Not sure if I get what you’re saying.. when you have added the css import code above to your template, you should see it when viewing source.

Quote from: bugsmi0 at Jun 28, 2006, 02:20 PM

wonder if we could link to a css doc inside the manager using the tv

Didn’t understand.. this is what we are doing right now?