Tinymce editor style sheet

gwmbox

Is it possible to enable the TinyMCE editor to look for an editor style sheet in the sites theme folder? So for example I include a content.css file in my theme folder which over-rides the editors content.css file. This will enable people like me to set the editors base text size to 14px for people like me with poor eyesight

Cheers

GW

sbillard

Not the theme folder, but in the user plugin folder as from the current deveopment builds.

gwmbox

ok so I place it in a tinymce folder inside the plugin folder or just in the plugins folder directly?

Cheers

GW

acrylian

I think sbillard confuses this with the configuration files. A content.css must be within a TinyMCE theme which must be within `tiny_mce/themes//skins`.

Zenphoto/Zenpage use the advanced theme with different configurations.

I think it is not possible to define a theme being called from elsewhere without hacking TinyMCE itself, I thinks:

See: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme

gwmbox

If you go to this page http://tinymce.moxiecode.com/examples/full.php and select the tab view source you will see the lines

19. // Example content CSS (should be your site CSS)
20. content_css : "css/example.css",

This is where you can assign an external style sheet to be used for the editor, this is also shown in the wiki at http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css

Currently you do not have this defined in your tinymce code so it defaults to the tinymce folder, where in fact it should, or could, be defined to be from the theme folder with the content.css file in there.

Cheers

GW

sbillard

Which, of course, you can place in the custom config file that you can put in the plugins/tiny_mce/config folder and select from the plugin options.

gwmbox

['you can place in the custom config file that you can put in the plugins/tiny_mce/config']?

Is that within the zp-zore folder or within the plugins folder from root? So we create the config folder? Meaning I add a new folder for tinymce in the root plugins folder and then a what, a config folder or config file? Sorry not very clear?

However the point I was trying to make is that it can be managed and contained within the users 'theme' folder and have no need to venture into the tinymce plugins folder, that way there is no accidental editing of the wrong files or overwriting of the files through an update etc.

acrylian

Thanks for the note, seems I missed that you can indeed use external css files.

Actually he refers to the zp-core folder. I don't see (or I miss it) any code to retrieve config files from the root plugins folder.

sbillard

No, I refer to the user plugin folder. You can place editor config files therein. The editor file you create can configure tinyMCE however you want. It is really not appropritate to place these config files in the theme folder since (at least with the standard use) tinyMCE is a back-end feature.

gwmbox

sbillard, you are confusing me a bit here? acrylian seems just as confused as I do from his response too.

So where do I place the config file?
Where is the user plugin folder?
What do I call the config file?
Is there a base config file to work from?

Surely it would just be easier to add an external css reference to the existing tinymce config in the zp-core/zp-extensions....tinymce...

Then all we as users need to do is create the external style sheet (if we want one) and it will then use it. You could include a blank external style sheet by default in the theme folder so that it exists for tinymce.

Not trying to be difficult but trying to work out a way that is simple.

Thanks

GW

acrylian

Well, I didnt know that new feature was already there. Sbillard and I are in different time zones so I sometimes miss what he does and vice versa.

The user plugin folder is the root plugins folder. You can now either place the config file there or in the tiny_mce plugin folder within zp-core. I haven't tried it myself yet but In the user plugin folder you probably have to create a folder setup `tiny_mce/config/` to place the file(s) in, so that the plugin discovers them. That is how it works with other plugins.

The reason for this is that we provide 4 predefined tinymce config files (2 for gallery items and 2 for Zenpage items). You or any other user might want to configure Tinymce differently. If you place these within the zp-extensions/tiny_mce folder it most likely gets accidentally deleted on updates.

For this reason the user plugin folder was introduced a while back.

gwmbox

Ok, that sounds fine, but to be clear if you can tell me.

I wish to add the use of an external css file, of which is not a plugin. However if we can use our own config for tinymce I can set where that css file is. You say to create a new folder structure in the root plugin folder ['tiny_mce/config/'], which is fine, but what do I call the 'config' file to get tinymce to use that over the current config? Also by doing that how do I set it to continue to use the existing theme in use but also to use an external css file.

I know this seems like I am going around in circles but I am just trying to understand the process properly.

Thanks

GW

gwmbox

It is OK, found it and having a test of it now. cheers

GW

gwmbox

OK, tested and it works a treat. For anyone else following this thread, the process is;

1. Create in the root plugins folder a new folder called `tiny_mce`

2. Inside the new tiny_mce folder create a new folder called `config`

3. Go to `zp-core\zp-extensions\tiny_mce\config` and copy any or all of the existing config files to get you started.

4. Place the copied files in your new `\plugins\tiny_mce\config\` folder

5. Rename your copied config file(s) to something unique for each file, e.g. add a prefix like `my` or anything else you wish to use.

6. Open the new renamed config file and ensure the first javascript line is pointing to the correct location of the normal tiny_mce.js file, by default this should be
`/tiny_mce/tiny_mce.js">`

7. Make any further edits you wish to make within the config file.

8. If you want to use your own CSS file for the editor add a new line after the last `theme_advanced_****` item and enter
`content_css : "<?php echo WEBPATH; ?>/themes/yourthemename/content.css",` <- make sure you have the comma at the end.

9. Create your own content.css file in your theme folder or copy one of the tiny_mce theme css files located in
`\zp-core\zp-extensions\tiny_mce\themes\advanced\skins\default` and place that in your theme folder and then edit it to your desired requirements and styles.

10. Upload the new tiny_mce folder (and its contents) in the plugins directory and your new theme content.css file to your zenphoto site.

11. Login to your zenphoto admin and go to Options, Plugins, Tiny_mce and then select from the drop down selects your new tiny_mce config files and apply (save).

Your tiny_mce editor for your articles etc should now be working and using your own config files and content.css file.

For more information of config options for tiny_mce go to http://tinymce.moxiecode.com/ and have a look at some of the examples to see what you can do.

I hope this helps someone

Cheers

GW

acrylian

Thanks...:-) I guess I'll make a troubeshooting entry out of this.

melbe

Hi, I just wanted to add something - I hope its okay that I do it here. I found your explanation here: http://www.zenphoto.org/news/how-to-create-custom-tinymce-configurations first, and wondered why I didn't work.

Don't want to be picky, but in your troubleshooting entry (URL above) two things were missing - maybe you want to update it?
Step 8.
`content_css : "/themes/yourthemename/content.css",`

did not work for me - neither did

`content_css : "<?php echo WEBPATH; ?> /themes/yourthemename/content.css",`

This line worked:
`content_css : "<?php echo FULLWEBPATH; ?>/themes/yourthemename/content.css",`

Furthermore its important to put it below (or instead of) the this definition:
`content_css: "<?php echo FULLWEBPATH.'/'.ZENFOLDER.'/'.PLUGIN_FOLDER; ?>/tiny_mce/config/content.css",`

not below the last `"theme_advanced..."` entry, otherwise the CSS will be overruled by the one in the original config folder... Hope its clear what I mean

Just wanted to add this - maybe you want to update the troubleshooting entry Thanks!

acrylian

Yes, you are right FULLWEBPATH is needed. Thanks.

Edit: Article has been updated.