TinyMCE Not Rendering Content per CMSMS Stylesheets

jlkane · Post by **jlkane** » Tue Nov 25, 2014 3:38 am

On a new install of CMSMS Version 1.11.11, I'm having a problem with TinyMCE. (Yes, I've made a careful choice to use TinyMCE in preference to MicroTiny for this client, to meet several specific needs.)

My problem:
TinyMCE seems not to be reading in the CMSMS stylesheets, and so fails to provide the editor a useful rendition of the content. To illustrate...

Here's the way the content looks through the frontend:
http://simply-effective.com/TinyMCE_pro ... ontend.jpg

Here's the (perfectly useful) way that MicroTiny represents the content:
http://simply-effective.com/TinyMCE_pro ... roTiny.jpg

And here's the (unacceptable) way it looks in TinyMCE:
http://simply-effective.com/TinyMCE_problem/TinyMCE.jpg

Back when TinyMCE was the default WYSIWYG editor, it always did a nice job of reading the stylesheets and rendering the content helpfully. Has anyone else seen this behavior recently? Can anyone suggest a fix?

Thanks in advance for your help,
Jim

jlkane · Post by **jlkane** » Tue Dec 02, 2014 12:32 am

Crickets ...and sad crickets at that. Suggestions anyone?

Thanks in advance for your help,
Jim

Post by **JohnnyB** » Tue Dec 02, 2014 2:56 pm

There are advanced settings for TinyMCE to help bring in stylesheets and make choices about the type of stylesheet it respects.

Maybe there is something from http://blog.arvixe.com/customizing-the- ... de-simple/ that can help.

jlkane · Post by **jlkane** » Tue Dec 02, 2014 7:30 pm

Thanks for your helpful reply, JohnnyB.

I've combed Tiny's advanced settings in search of a solution to this problem, to no avail.

And I had seen that Arvixe blog post and used one tip from it already to configure TinyMCE so that it would accept the CSS5 Section entity as valid HTML ...but there's nothing else in that article that helps me crack the problem I've detailed here. While it would seem that I could manually insert a bunch of CSS from my CMSMS stylesheets into Tiny's "Additions to stylesheet" field, this seems like the wrong way to solve the problem:
- Tiny should respect the CMSMS stylesheets
- cluttering the "Additions..." field feels like brute force
- it won't be a robust solution, as every change in the CMSMS stylesheets will require a corresponding manual change in the Tiny "Additions..." list
- this solution doesn't provide a way to account for the fact a given entity (H2, say) might be styled differently in one context than another

So today I'll begin my investigation into the root cause of the problem and see if I can find a robust solution. Any advice would still be appreciated!

Post by **JohnnyB** » Tue Dec 02, 2014 8:16 pm

The only other thing I can think of is making sure that the stylesheet you expect TinyMCE to load is assigned to the page template for the page you are editing.

Check to make sure that stylesheet doesn't have a media type selected that conflicts with what TinyMCE is being asked to load under the Advanced settings.

jlkane · Post by **jlkane** » Tue Dec 02, 2014 8:27 pm

Thanks for staying with me, JohnnyB.

I'm all good with the basic assignment of stylesheets to the template in question.

And since MicroTiny respects the assigned stylesheets, it seems reasonable to believe that the problem is specific to TinyMCE itself.

As for media types and queries...
This is my first CMSMS site that will be responsive, so I was worried that the media queries I have included in my stylesheets were tripping up TinyMCE ...so my first test today was to create a set of simple stylesheets that stripped out all of the media queries. Sadly, that didn't improve Tiny's behavior, so I'm on to the next test: reinstalling Tiny from the forge. If that doesn't help, I'll try to install an older version of Tiny. After that, I'm not sure *what* to try...

Jim

jlkane · Post by **jlkane** » Tue Dec 02, 2014 9:51 pm

So that was a fairly frustrating afternoon. Here's what I've tried, all to no avail:

1. Comb Tiny's advanced settings: fail

2. Reset all prefs to default: fail

3. Determine whether media queries in the CSS are at fault: fail

4. Uninstall and reinstall TinyMCE from Forge: fail

5. Install older version(s) of TinyMCE:
2.9.11: fail
2.9.9: fail
2.9.6: fail
2.9.4: fail
2.7.3: fail

6. Maybe it's the doctype or html tag?
Baseline:
<!DOCTYPE html>



 <__html class="no-js"> 
Try the tags used in the supplied simple template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Fail.

7. Link to external style sheets (instead of using CMSMS style sheets)?
Fail.
(The page renders fine through the front end, but linking to external style sheets not only doesn't fix the TinyMCE problem, it makes MicroTiny fail to respect the style sheets as well.)

So I'm feeling at a loss. Does anyone see another avenue of exploration?

Post by **paulbaker** » Tue Dec 02, 2014 11:44 pm

jlkane wrote:Does anyone see another avenue of exploration?

Sounds like you've done some in-depth checking. Have you tackled it from the "other side" and read/posted in the TinyMCE forum?
http://www.tinymce.com/forum/

I just tell my clients it isn't so much WYSIWYG, more WYSIroughlyWYG. My help documents always say that you should open the live site in a new tab and check your changes in that. I do understand your point, though.

jlkane · Post by **jlkane** » Wed Dec 03, 2014 12:37 am

paulbaker wrote: I just tell my clients it isn't so much WYSIWYG, more WYSIroughlyWYG.

While I understand your point, Paul, you'll see from the screen shots linked to my original post that without respecting the CMSMS style sheets, TinyMCE's representation isn't even roughly WYSIWYG. The layout and styling are reasonably sophisticated, and without the CSS in place, it's kind of a hot mess.

paulbaker wrote: Have you tackled it from the "other side" and read/posted in the TinyMCE forum?
http://www.tinymce.com/forum/

I like that suggestion, Paul, although I've found it difficult in the past to implement solutions that fall outside of the bounds established by the config screens of the TinyMCE module written especially for CMSMS. And since the problem lies with Tiny's failure to read in the CMSMS style sheets, I'm skeptical about getting the help I need in the TinyMCE forum. That said, it's worth a try! Thanks for the shove.

Post by **paulbaker** » Wed Dec 03, 2014 1:18 am

jlkane wrote:Thanks for the shove.

No problem. I'm currently de-bugging an HTML email for a client, so any distraction is very welcome.

If "Checklist for College" is coded as H1 I am surprised it is shown the same as your body text in TinyMCE.

Can you share a URL? Might help.

Another option to consider is splitting the content up more. So for example, will the client ever want to edit the circled "1" image? If not, it could be set in the template. And the questions and answers could be set up as a ListIt2 instance, so the client just types plain text and the site worries about formatting. In ListIt2 you would set up 2 fields - and questions/answers could be added/edited/deleted/moved up and down the list. This avoids the problem, rather than solving it.

jlkane · Post by **jlkane** » Wed Dec 03, 2014 4:35 am

paulbaker wrote:If "Checklist for College" is coded as H1 I am surprised it is shown the same as your body text in TinyMCE.

That's exactly the problem.

paulbaker wrote:Can you share a URL? Might help.

Sure. Here's a link to my code development version of the page in question:
http://rochestercan.org/devel/checklist.html

paulbaker wrote:Another option to consider is splitting the content up more.
<snip>This avoids the problem, rather than solving it.

Avoiding the problem in this way might work in the short run, but it wouldn't be a sufficiently flexible approach for the long run. I need to provide the clients an environment in which they will be able to create a wide variety of new pages using a small number of style-establishing templates. In my development site, four pages illustrate the four visual designs on which all of the site's pages will be built:
- the homepage
- the Events page
- the Checklist for College page linked above
- the Local College Counselors page

I plan to provide the client a small library of HTML blobs (stored as Global Content Blocks) that they can copy-and-paste into the Content block of a new page as a starting point for (careful) editing, using TinyMCE.

Post by **paulbaker** » Wed Dec 03, 2014 11:12 am

I'm assuming that's straight HTML and not generated by CMSMS.

I see

Code: Select all

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style-base.css">
<link rel="stylesheet" href="style-menu.css">
<link rel="stylesheet" href="style-informative_page.css">

In the CMSMS-created version of that page, are these 4 stylesheets linked to the template (using Layout -> Templates -> Attach stylesheets button)?

Post by **JohnnyB** » Wed Dec 03, 2014 1:13 pm

You should probably be using the base href tag as well to make sure your relative links are pointed correctly.
The TinyMCE module will only load internal CSS from the Stylesheets section of your admin.

jlkane · Post by **jlkane** » Wed Dec 03, 2014 4:04 pm

paulbaker wrote:I'm assuming that's straight HTML and not generated by CMSMS.

Yes, exactly. (I always develop and test my code framework and styles that way, get client approval, then integrate the stable results with CMSMS.)

paulbaker wrote:In the CMSMS-created version of that page, are the 4 stylesheets linked to the template (using Layout -> Templates -> Attach stylesheets button)?

Yes.

jlkane · Post by **jlkane** » Wed Dec 03, 2014 4:16 pm

JohnnyB wrote:You should probably be using the base href tag as well to make sure your relative links are pointed correctly.
The TinyMCE module will only load internal CSS from the Stylesheets section of your admin.

Can you please elaborate a bit, JohnnyB? Do you mean the root_URL tag? {root_url} ...or something else? Please help me understand what role this plays in the drama. (I'm intrigued because MicroTiny is working fine for me, but TinyMCE obviously needs some help that it isn't getting. Could this be the magic something?)

CMS Made Simple Forums

TinyMCE Not Rendering Content per CMSMS Stylesheets

TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets