Missing TinyMCE on a Diazo themed Plone site?

Question

We have a few Plone 4.3 instances, one of which has nine Plone sites each with unique Diazo themes. On one of these, while editing from the themed view (port :8081), TinyMCE no longer shows up at all.

In the "Text format" menu, the options are: HTML, Textile, and Plone output filters HTML. There's also the "Edit without visual editor" link in the bottom left, which normally only shows when TinyMCE is visible. The "default editor" in both Site Setup and Personal Preferences are both set to TinyMCE. Also, it seems like all the TinyMCE related .js files have loaded properly without error.

I think this issue happened after I ran buildout yesterday to install the latest PloneHotfix.

The closest thing online I found about this was this on Nabble. I asked Rick about the portal_setup steps, but it didn't change the issue. I reran buildout and pinned it to an older version of TinyMCE just to check as well, but no dice.

The odd thing is this also affects one other Diazo themed site, but not the other seven. I tested this out on a clean new development server: made a brand new Plone site, added Diazo theming, and attached the theme from the problem website. The same issue shows up. I'm guessing it's something related to the order of .js being loaded, based on what they said on that Nabble thread.

The problem website is: http://169.237.124.22:8081/CCUH/ and http://169.237.124.22:8080/CCUH/ is the unthemed side.

Here's the XML used also, just in case.

<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- CCUH XML -->
<!--Head-->
<copy css:content="html" css:theme="html" attributes="lang dir"/>
<copy css:content="head base" css:theme="head base"/>
<replace css:content="head title" css:theme="head title"/>
<before css:content="head style, head link, head script, head meta" css:theme-children="head"/>

<theme href="index.html" css:if-content="#visual-portal-wrapper" />

<merge attributes="class" css:content="body" css:theme="body" />
<copy attributes="id dir" css:content="body" css:theme="body" />


<copy css:theme=".maintext" css:content="#content"/>
<prepend css:content="#edit-bar" css:theme=".maintext" />

<replace css:theme="nav.topnav li" css:content="#portal-globalnav li" />
<copy attributes="href" css:theme=".home-logo" css:content="#portal-logo" />

<replace css:theme=".slideshow" css:content=".portlet-static-nivo" />
<replace css:theme=".portlets-right" css:content="#portal-column-two .visualPadding" />

<copy css:theme="footer" css:content="#portal-footer" />

 <!-- Scripts via Control Pannel -->
<copy css:content="#visual-portal-wrapper script" css:theme="#footer-js" />

</rules>

Answer 1

First thing to check is layers for your theme: ZMI->portal_skins->properties

The entry "tinymce" should be usually below "CMFEditions". Just enter it for your theme if its missing.

Answer 2

The common denominator between the two sites with the same issue was they both were utilizing Bootstrap.js, like so at the end of the page:

<script src="bootstrap-3.0.0/assets/js/jquery.js"></script>
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>

I commented both lines and TinyMCE worked again, then just the jquery.js and it still works, so perhaps it conflicts with whatever jquery TinyMCE needs..?

This was plaguing us all day, because it was sporadically affecting the non-Bootstrapped sites as well for no apparent reason. Anyway, case closed for now unless someone has a real solution!

Answer 3

Just wrap

<rules css:if-content="#visual-portal-wrapper">

around your rules