TinyMCE Not Rendering Content per CMSMS Stylesheets

Post by **JohnnyB** » Wed Dec 03, 2014 4:29 pm

Do you have a URL to the CMSMS version of the site?

Also, what do you see in the Admin when using a tool like Web Inspector or Firebug to look at the TInyMCE iframe that is generated for the content blocks?

You'll really have to dig for it, but you'll see the iframe for the actual content inside of the WYSIWYG editor. Then, inside of the head, you should have your base href tag and links to stylesheets. For example,

Code: Select all

<head xmlns="http://www.w3.org/1999/xhtml">
<style id="mceDefaultStyles" type="text/css">.mceResizeHandle {position: absolute;border: 1px solid black;background: #FFF;width: 5px;height: 5px;z-index: 10000}.mceResizeHandle:hover {background: #000}img[data-mce-selected] {outline: 1px solid black}img.mceClonedResizable, table.mceClonedResizable {position: absolute;outline: 1px dashed black;opacity: .5;z-index: 10000}
</style>
<base href="http://YourDomain.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="http://YourDomain.com/modules/TinyMCE/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css">
<link type="text/css" rel="stylesheet" href="http://YourDomain.com/modules/TinyMCE/tinymce/jscripts/tiny_mce/plugins/spellchecker/css/content.css">
<link type="text/css" rel="stylesheet" href="http://YourDomain.com/modules/TinyMCE/stylesheet.php?templateid=24&mediatype=screen&bogus=1417623478">
</head>

That last one is the one that loads your CMSMS stylesheets assigned to the page template.

The next thing to Re-check is that setting under Advanced Settings:
Include only screen CSS:
Selecting this allows only attached stylesheets with the screen-mediatype selected to be included in the styles TinyMCE handles.

And confirming that any assigned stylesheet matches the preference set there (see screenshot attached).

: Stylesheet media type assignment

The last thing I can think of is that there is a path issue within the template(s), config.php, server setting, or something related that could possibly prevent TinyMCE module from accessing and loading the stylesheets set in CMSMS. You may need to check server logs and the Admin Log just in case there is a server or PHP thing getting in the way.

Post by **JohnnyB** » Wed Dec 03, 2014 4:33 pm

The default {metadata} tag sets the site's base tag (http://www.w3schools.com/tags/tag_base.asp) which can solve a lot of relative URL problems.

I don't know if TinyMCE relies on that for loading stylesheets. But, I noticed it was missing in the page's source. I posted that before I realized it was a URL to a static (non CMSMS) page....

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

JohnnyB wrote:Do you have a URL to the CMSMS version of the site?

With caution, you could peek at http://rochestercan.org/index.php

I had just begun to integrate my code with CMSMS when I bumped into the trouble with TinyMCE, so you'll only see the homepage, the Events page and the Checklist for College page rendered from CMSMS. But maybe you'll see something amiss there.

And thanks SO much for all of your other helpful leads this morning. I'll take a look at each later today and report back.

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

JohnnyB wrote:The default {metadata} tag sets the site's base tag (http://www.w3schools.com/tags/tag_base.asp) which can solve a lot of relative URL problems.

When you look at the page as generated by CMSMS, you'll see <base href="http://rochestercan.org/" /> ...which is *almost* right. Since I'm serving a static "under construction" page (rochestercan.org/index.html) preferentially to the CMSMS-generated homepage (rochestercan.org/index.php), I wonder if *that's* what's bugging TinyMCE. If so, how would I correct it?

Post by **JohnnyB** » Wed Dec 03, 2014 5:00 pm

<base href="http://rochestercan.org/" />

That is correct for all pages. It just sets up the site's root.
If for example, the site was really located at
rochestercan.org/cmsms/
then that base tag would be wrong....

Post by **JohnnyB** » Wed Dec 03, 2014 5:02 pm

Since I'm serving a static "under construction" page (rochestercan.org/index.html) preferentially to the CMSMS-generated homepage (rochestercan.org/index.php)

If there are some server redirects in place preventing access to the /index.php page, that could cause some issues. But, if you are just setting index.html as the site's index page in htaccess, then I don't think that would cause a problem.

jlkane · Post by **jlkane** » Wed Dec 03, 2014 6:37 pm

JohnnyB wrote:Also, what do you see in the Admin when using a tool like Web Inspector or Firebug to look at the TInyMCE iframe that is generated for the content blocks?

You'll really have to dig for it, but you'll see the iframe for the actual content inside of the WYSIWYG editor. Then, inside of the head, you should have your base href tag and links to stylesheets.

Using Web Inspector to look at the code that CMSMS and TinyMCE are generating, I see the iframe in question:

Code: Select all

<td class="mceIframeContainer mceFirst mceLast">

    <__iframe id="Introduction_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 303px; display: block;">
        #document
            <!DOCTYPE >
            <__html>
                <head xmlns="http://www.w3.org/1999/xhtml"></head>
                </__body id="tinymce" class="mceContentBody CMSMSBody" contenteditable="true" onload="window.parent.tinyMCE.get('Introduction').onLoad.dispatch();" spellcheck="false" dir="ltr">
                    <h1>
                        Checklist for College
                    </h1>

...but (unsurprisingly) I see no reference to the (missing) stylesheets. To me, this just confirms what we already know: TinyMCE isn't getting the stylesheet message.

I had been been negligent in specifying the Media Type on the stylesheet screen, so I tidied that up just now -- ticked both "all" and "screen" on each stylesheet. Then I tried again, both with and without TinyMCE's "Include only screen CSS" checkbox ticked. Sadly, that did not do the trick. (I was irrationally hopeful there for a bit.)

Post by **JohnnyB** » Wed Dec 03, 2014 6:40 pm

I think you need to poke into the <head> to try to find stylesheets. Your code paste doesn't show it opened:

Code: Select all

<head xmlns="http://www.w3.org/1999/xhtml"></head>

jlkane · Post by **jlkane** » Wed Dec 03, 2014 6:49 pm

JohnnyB wrote:I think you need to poke into the <head> to try to find stylesheets. Your code paste doesn't show it opened

D'oh... I thought I had expanded everything! But... no.

So here's the expanded version, which looks perfect to my eye:

Code: Select all

<head xmlns="http://www.w3.org/1999/xhtml">

    <base href="http://rochestercan.org/"></base>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></meta>
    <link href="http://rochestercan.org/modules/TinyMCE/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css" rel="stylesheet" type="text/css"></link>
    <link href="http://rochestercan.org/modules/TinyMCE/tinymce/jscripts/tiny_mce/plugins/spellchecker/css/content.css" rel="stylesheet" type="text/css"></link>
    <link href="http://rochestercan.org/modules/TinyMCE/stylesheet.php?templateid=22&mediatype=screen&bogus=1417632348" rel="stylesheet" type="text/css"></link>

</head>

...and yet, TinyMCE pays no attention to the stylesheets when rendering. What's a mother to do?

jlkane · Post by **jlkane** » Wed Dec 03, 2014 6:57 pm

JohnnyB wrote:The last thing I can think of is that there is a path issue within the template(s), config.php, server setting, or something related that could possibly prevent TinyMCE module from accessing and loading the stylesheets set in CMSMS. You may need to check server logs and the Admin Log just in case there is a server or PHP thing getting in the way.

So I think we've seen that TinyMCE is trying to load the stylesheets -- that's encouraging -- and the server log shows requests like this one from my IP address:

Code: Select all

104.153.30.212 - - [03/Dec/2014:13:45:50 -0500] "GET /modules/TinyMCE/stylesheet.php?templateid=22&mediatype=screen&bogus=1417632348 HTTP/1.1" 304 - "http://rochestercan.org/admin/editcontent.php?_sx_=7ebfd854e19fa0d0&content_id=64&page=" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:33.0) Gecko/20100101 Firefox/33.0"

...that look like they're getting served, right? So what are we missing???

Post by **JohnnyB** » Wed Dec 03, 2014 6:58 pm

yes, it seems like you can safely navigate to the stylesheet link directly, so one would think that the module can as well.
(http://rochestercan.org/modules/TinyMCE ... plateid=22)

I guess I would make sure there is nothing there that can be overridden by tinymce default styles.

Next, I would test with a new template and new stylesheet filled with some basic stuff. Just a basic template and a cmsms stylesheet that has some basic CSS rules in it. Then create a test page to see if those very basic things are parsed correctly in TInyMCE. If not, then you know for sure that there is something in the way if it can't parse the simplest of things for you.

But, I honestly can't think of what at this point.

jlkane · Post by **jlkane** » Wed Dec 03, 2014 7:34 pm

JohnnyB wrote:Next, I would test with a new template and new stylesheet filled with some basic stuff. Just a basic template and a cmsms stylesheet that has some basic CSS rules in it. Then create a test page to see if those very basic things are parsed correctly in TInyMCE. If not, then you know for sure that there is something in the way if it can't parse the simplest of things for you.

Good plan. I created a super-basic template and a super-basic stylesheet. The page is rendered correctly through the front end but, alas, still fails to render correctly in TinyMCE.

Blast.

My (rough) plan from here is as follows:

1. Roll back to the fresh install created by Softaculous
I took a backup, so it's easy to roll back to that state. Let's see whether TinyMCE was working with the default content and provided stylesheets. If it *does*, that'll point the finger at something I stripped out of the installation as I tidied up -- some module on which TinyMCE is quietly dependent, for example.

If that test doesn't reveal anything...
2. Do a fresh (manual) install of CMSMS 1.11.10
Yes, this combines two questions into one test -- will an older version work better? will a manual install work better? -- but I'm lazy. And I need to get through this stall point.

Your thoughts?

Post by **JohnnyB** » Wed Dec 03, 2014 7:44 pm

Your thoughts?

I stay away from Softaculous and do my own installs. I'm sure it is probably ok for most folks, but I like to be in control of each step.

You might try a fresh 1.11.11 which is the latest version of the CMS.

But, since you mentioned softaculous, have you tried setting the TinyMCE option to server from a static config file (it is called something like that under Advanced)?

jlkane · Post by **jlkane** » Wed Dec 03, 2014 7:54 pm

JohnnyB wrote:You might try a fresh 1.11.11 which is the latest version of the CMS.

IF my fresh, manual install of 1.11.10 were to resolve my problem, I would take a backup, then upgrade to 1.11.11 and see if the resolution "sticks."

JohnnyB wrote:But, since you mentioned softaculous, have you tried setting the TinyMCE option to server from a static config file (it is called something like that under Advanced)?

Yes, I tried that, without success.

jlkane · Post by **jlkane** » Thu Dec 04, 2014 5:58 am

Okay, now I'm officially depressed.

Tonight I followed up on the plan I made earlier:

1. Roll back to the fresh install created by Softaculous.
Fail.

2. Do a fresh (manual) install of CMSMS 1.11.10.
Fail!

So in a carefully, manually-installed instance of 1.11.10, I'm seeing EXACTLY the same behavior: MicroTiny renders content appropriately, respecting the CMSMS-linked stylesheets, while TinyMCE renders content without respecting linked stylesheets at all.

What the bloody heck!?! Is it really possible that I'm seeing a long-standing bug with the TinyMCE module that's been unreported?

CMS Made Simple Forums

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

Re: TinyMCE Not Rendering Content per CMSMS Stylesheets