nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

tinyMCE and unique style sheets

mdemeny

We're considering switching over to tinyMCE from VFE - namely because we have enough Firefox and Mac users to make it worthwhile.

All is going swimmingly, except for one thing - you can only have one content CSS style sheet defined for all templating (custom_content.css) it seems...

This is an issue, since our various websites of course have different CSS style sheets.

There is a support article with a compelling title; Configuring Tiny MCE with Unique Style Sheets for Editors in Different Branches (https://support.interwoven.com/kb/kb_show_article2.asp?ArticleID=59825) but this means custom CSS classes for users making content, and not different CSS sheets for displaying it in tinyMCE. We tend to use standard HTML to markup content (i.e. h1, h2, etc.) so having different custom classes doesn't help us.

Ideally, we want to define one CSS for each custom config we setup in custom_config.js - but even a kludge like

myconfig.h1{
font-size:15px;
font-weight: bold;
color: #121212;
margin:10px 0px 5px 10px;
}

(where myconfig is the custom config) would work...

Any ideas?

Thanks in advance!

Find more posts tagged with

Comments

Frederik

FWIW, I have a feature request 71519 open for this thing. Anyone interested should ask Support to be added to that FR.

One day I should make a summary about all the things that I find bad about TinyMCE as implemented in TS6.7.1 ... it's not pretty :-(

---
From Support:

This is with regards to: CEC: TinyMCE: css separated per project.

This has been registered under Feature request 71519

Part of my input on that case:

To be clear:

VisualFormat allows per textarea:
- specific CONFIG (via separate file)
- specific CSS definition (via separate file)

TinyMCE allows :
- specific CONFIG per textarea (good) but all configs reside in same global file (bad)
- one global CSS definition for the entire TS server (very bad)

So bottom line, TinyMCE does not allow to nicely separate projects, and to let each project live independently without needing to worry about each other. VisualFormat does.

==>

Q: Please register this as a bug (feature disappearance) or feature request -> TinyMCE configuration (config+css) should be possible in an independent way, meaning that 2 instances of TinyMCE textarea can be differently configured and are assured not to be in (naming) conflict. Suggest to look at VisualFormat config for inspiration (separate files).

moonkhanna

I feel, I saw one KB article as well on Pros and Cons of VFE vs Tiny MCE.. May like to check that as well on the Support Site

jbonifaci

TinyMCE allows :
- specific CONFIG per textarea (good) but all configs reside in same global file (bad)
- one global CSS definition for the entire TS server (very bad)

I know this is a year old, but I'm on 6.7.1 SP1 and both of the above are not true.

You can get around the first instance by including each textarea's js file in the custom_config.js and can then control it from the included js from there on out:

document.write("<script src='/iw/SomeFolder/CustomTinyMceConfig.js' type='text/javascript'></script>\n");

Your second point isn't true either. You can do the following to include a custom css per editor id:

IWTinyMCECustomConfig("editor_id","content_css","/iw/SomeFolder/CustomStyle.css");

If there's something I'm missing or this has been fixed since this post and I'm just being a donk, please feel free to correct me.

~Jeff

Bjorn

Your second point isn't true either. You can do the following to include a custom css per editor id:
IWTinyMCECustomConfig("editor_id","content_css","/iw/SomeFolder/CustomStyle.css");

Jeff - Do you mean "editor_id" or "config_id"? I'm on 6.7.1 SP1 as well and cannot get this to work using the "config_id", but cannot figure out how to implement it if it is the editor_id (like I'm used to using in a plugin).

jbonifaci

Whatever you call it, it should match whatever you're putting in you external-editor-config attribute.

If it's not working, how is it not working? What are you expecting to happen that isn't happening? Are you sure the path to your style sheet is correct?

~Jeff

Bjorn

Whatever you call it, it should match whatever you're putting in you external-editor-config attribute.

If it's not working, how is it not working? What are you expecting to happen that isn't happening? Are you sure the path to your style sheet is correct?

~Jeff

Your 1st paragraph answers my question - thx. Just gotta play with the path I suppose.

motlnt

I know this is a year old, but I'm on 6.7.1 SP1 and both of the above are not true.

You can get around the first instance by including each textarea's js file in the custom_config.js and can then control it from the included js from there on out:
document.write("<script src='/iw/SomeFolder/CustomTinyMceConfig.js' type='text/javascript'></script>\n");
Your second point isn't true either. You can do the following to include a custom css per editor id:
IWTinyMCECustomConfig("editor_id","content_css","/iw/SomeFolder/CustomStyle.css");
If there's something I'm missing or this has been fixed since this post and I'm just being a donk, please feel free to correct me.

~Jeff

I tried the second option but it didn't work...
any ideas?

motlnt

I tried the second option but it didn't work...
any ideas?

After some effort , it has worked now.