By John Bryan on

The following should give WYSIWYG functionality to TinyMCE so the the editing session reflects how the text will look when published.

TinyMCE can be set to use the theme's CSS but this typically does not work properly as TinyMCE does not know to apply the styling for "node content".

These changes should have the following advantages:-

  • Session reflect the node styling
  • Session reflects CSS changes made by modules
  • Does not require a TinyMCE specifc, modified, copy of site theme
  • Will work with user selected themes
  • Is not site specific


1: Set TinyMCE to use theme CSS


In the administration menu 'Site Configuration' 'TinyMCE' edit or create your main TinyMCE profile. Under "CSS" set "Editor CSS:" to "Use theme css".


2: Font size fix


In your your TinyMCE module folder (e.g. \sites\all\modules\tinymce\) create a file "tinymce.css" with the contents of:-

body.mceContentBody {
font-size: 1em;
}

This variant of fixing the "tiny font size" issue avoids disability-access problems of from fixed font sizes and "important" tag, i.e. allows the user to adjust font size through their browser and is theme independant. Unfortunately it doesn't always set the font to the themes chosen size but so far does set it to a reasonable size.


3: Edit "blank.htm"


In the TinyMCE module folder structure locate the file "blank.htm" (e.g. "\sites\all\modules\tinymce\tinymce\jscripts\tiny_mce\blank.htm") and and change the body class to "node content mceContentBody"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank_page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body class="node content mceContentBody">
</body>
</html>

This is one of two possible places that TinyMCE gets it's style context from. We are telling TinyMCE that this is content for a node.


4: Edit tiny_mce.js


In the same folder edit "tiny_mce.js".
Search for the string <body class="mceContentBody"> replace with <body class="node content mceContentBody">.
This is the second version of the same fix as above which is used by different browsers.


5: Edit the "tinymce.module"


Edit "\sites\all\modules\tinymce\tinymce.module"

Find the following:-

function tinymce_config($profile) {
  global $user;
..
..
  if ($settings['css_setting'] == 'theme') {
    $css = $themepath . 'style.css';
    if (file_exists($css)) {
      $init['content_css'] = $host . $css;
    }
  }
  else if ($settings['css_setting'] == 'self') {
    $init['content_css'] = str_replace(array('%h', '%t'), array($host, $themepath), $settings['css_path']);
  }
..
..

And replace $css = $themepath . 'style.css'; with $css = substr(drupal_get_css(),45,-11);
such as:-

..
..
  if ($settings['css_setting'] == 'theme') {
    $css = substr(drupal_get_css(),45,-11);
    if (file_exists($css)) {
      $init['content_css'] = $host . $css;
    }
  }
  else if ($settings['css_setting'] == 'self') {
    $init['content_css'] = str_replace(array('%h', '%t'), array($host, $themepath), $settings['css_path']);
  }
..
..

Note: Ideally more logic should be added for resilence (extract path more intelligently rather than by fixed location in case of changes to the format of the string returned by "drupal_get_css".

6: Enable CSS Aggregation


In the administration menu 'Site Configuration' 'Performance' enable "Aggregate and compress CSS files"

Note: Once aggregation is enabled you won't be able see the effects to any style sheet changes you make. So if re-styling CSS then temporarily disable aggregation but remember WYSIWYG behaviour will be lost in TinyMCE until you switch aggregation back on.

Limitations


This is still not ideal WYSIWYG
- Hard coded to reflect Node content and not alternative content types such as comments, blocks etc.
- TinyMCE preview is effectively broken (although rather redundant); loses theme styling or has strange styling.
- Font size does not always reflect exactly the theme's fontsize.

I still think a generic Drupal style/editor API is needed to provide various expanded and consitent styling control and display but this should make sites more user friendly. Please let me know if this works or not for you. Positive and negative feedback welcome, would like to know if this works for other peoples sites.

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31

⋅ Categories: Drupal 5.x

Comments

Kodeart’s picture

Kodeart commented

Hello, I followed your steps like this:

1. created tinymce.css in "/sites/all/modules/tinymce/" <--- here's TinyMCE
2. changed "blank.htm"
3. edited "tiny_mce.js"
4. changed the line in "tinymce.module"
5. I skip OPTIONAL step,

and now there's no css available at all (empty combobox), the font in TinyMCE is smaller, white background, "preview" window dumps a non-formatted text...

Before this hack, CSS was loaded correctly(?) (style.css from garland); the background color was weird; applying style from loaded css file wasn't reflecting neither in editor nor preview window, but would add correct tags (in HTML preview).

I'm using D5.2, Garland, latest TinyMCE, "Editor CSS: use theme css", CSS compression is ON (and working), also "tiny_mce_gzip.php" compressor is enabled. Oh, it's FireFox 2.x, no IE :)

-- Kodeart

John Bryan’s picture

John Bryan commented

TinyMCE Preview does not work correctly with this, but I have been happy to sacrafice this for closer WYSIWYG. Other than that...

If the changes broke your CSS and TinyMCE then retore the altered files one by one and re-test, perhaps starting with the "TinyMCE.module" file as this sounds a likely candidate. Post the code change area from the config function first.

Perhaps the string length returned by your site by drupal_get_css is different. Try outputting the result in a test node and seeing if the substr parameters should be changed.

$css = substr(drupal_get_css(),45,-11);

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31

dman’s picture

dman commented

That's a useful few instructions.
I started to have a go at something like this when wanting to set it to use the real site css - I saw that it could be done quite tidily in theory, but quickly gave up when trying to find WHERE to do it.
Thanks for the write-up. Perhaps an edited version could become a handbook page? this is real reference material.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

Christefano-oldaccount’s picture

Christefano-oldaccount commented

A handbook entry for this would be very good.

jiangxijay’s picture

jiangxijay commented

Subscribe

anotherdave’s picture

anotherdave commented

I'm pretty new to Drupal so maybe I've overlooked something/I'm answering a fixed problem here, but would an easier way around this not be to add an @import url() to your main styles In the file:

../modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css

and then deleting any conflicting styles from this sheet (e.g. font-family, etc).

If I have overlooked something please let me know as I'm using this workaround at the moment! =)

~Dave

John Bryan’s picture

John Bryan commented

I presume that this would have the equivalent effect as setting the TinyMCE module to use theme CSS but hard-coded to a particular theme. Also this would mean that CSS information from installed modules would be ommitted, they are often stored in the individual module directories.

Drupal CSS information for any page is collected from various locations and only reliable exists as a definitive set at page rendering time. adding @import url() to point at the "aggregated" css file will not work because this file is dynamically named and a CSS file can not contain code, such as PHP, in order to point to the current aggregated CSS file.

Aditionally it does not tell TinyMCE the "context" (e.g. NODE page content).

Whilst the method outlined above involves some minor changes to the TinyMCE code it does hve the advantage of being completely portable and adaptive to multiple sites, themes, modules and users.

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31

anotherdave’s picture

anotherdave commented

Thanks for that John - tbh, I hadn't thought at all about portability. I'm focusing on one site at the minute which will use one theme exclusively and think I got pretty narrow minded with it!

Guess I shouldn't be looking for quick fixes when only learning!

All the best
~Dave

emdalton’s picture

emdalton commented

I followed the full set of directions above. Then I copied and pasted some text from another page (on the same site) that included a table. Perhaps I'm misunderstanding what these changes are supposed to do, but what I see within the TinyMCE editing window (in the Body section) is very different both from the original and from the final result after saving the page. Fonts changed color, the font size and line spacing changed, etc.

However, when I click "preview" the preview does look like what the saved result will finally be. Fonts change color back, line spacing is correct... but suddenly line breaks are showing up that weren't there in the original text OR in the TinyMCE editing window.

My users really want to be able to paste formatted text in from Word, adjust the formatting as needed in the Drupal editing window (it doesn't need to match Word formatting exactly, just generally), and save, and have the text look the way it did in the Drupal editing window. I want to be able to restrict their use of font face (and to some extent color), but still allow them to use tables. I'm really at a loss as to what editor to install and how to configure it to meet these needs, and I'd appreciate any advice at this point.

John Bryan’s picture

John Bryan commented

This is probable your settings on the users default input[sic] format i.e. you have "Line break converter" enabled.

The input format filters alter the output display of the node without changing the node content data, i.e. the modify the outputted HTML at display time. If you either change the 'input format' used or remove the "Line break converter" filter from the format then that will probably sove that particular issue.

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31

emdalton’s picture

emdalton commented

I had forgotten that I switched TinyMCE profiles while testing this, and picked up the auto line-break setting again. I am still working on testing your other suggestions.

John Bryan’s picture

John Bryan commented

It is a nice theory but, in my opinion, best avoided and discouraged as it introduces so many falabilities and support overheads. It is better to either create on line; or paste as text then format on line; or if complex formatting is required then allow the users to attach the word documents to nodes (I beleive there is a module that allows the contents of attached word documents to even be included in the Drupal search results).

Even pasting of simple formatted Word documents tends to add loads of hard coded MS formatting, does not convert "Heading1" to "H1" etc. and generally results in HTML/CSS chaos.

If features such as tables are needed from word documents then just attach the document, if you want true HTML content then ban users from pasting MS documents other than as a plain text import. Microsoft and Internet do not really mix (this from someone who makes his living from MS systems).

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31

emdalton’s picture

emdalton commented

TinyMCE has additional Paste plugin options that have not been enabled in the Drupal module. I've added some of these (as noted here: http://drupal.org/node/304623) and have been able to strip out most unwanted Word CSS code. I have also taken to stripping out font styles, but still allow table structures. I think there are a number of options available to those who need to allow pasting in from Word or other formatted documents.

John Bryan’s picture

John Bryan commented

If pasting from a different site or document format the instructions are in no way designed to make the end result look like the original. It is designed to make <H2>Sub-Title</H2> look within TinyMCE like a H2 formatting for your site's CSS. If the original display of H2 items was green text and your site's theme says H2 is dark blue then TinyMCE should display it as Dark Blue.

But the formatting within Tincy should look like the same as on your published pages. One possability for differences is that your theme's CSS or page.tpl or node.tpl (etc.) is targeting formatting using additional classes or ids.

e.g. If your page.tpl is putting a <div class="centre-column">...</div> wrapper around the node content and a CSS file is formatting tables with .centre-column td { .... } then that class (or id) will need to be added to the TinyMCE modifications e.g.:-

...
<body class="centre-column node content mceContentBody">
...

If it is an ID being used to target formatting then I am not quite sure off-hand how to impliment that. I could make guesses but it would be trial and error, plus it would depend on the exact CSS targeting in your theme. So best you experiment with modifications yourself.

The other possibility is ofcourse that this 1 year old advice is obsolete 8¬{

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31

emdalton’s picture

emdalton commented

I have clean paste from Word with accurate preview in TinyMCE now working on several browsers, but not Firefox 3. (It does work with FF2, IE6, and IE7.)

In FF3, styles generally do not show correctly within the TinyMCE editor, though at least Drupal Preview works.

In your instructions above, you point out that different browsers get style context from different locations, e.g. blank.htm or tiny_mce.js. It would appear that FF3 isn't using either of these.

Any suggestions? Not too many of my users are using FF3 yet (though I am), so I have some time to figure this out, but we're so close, it would be nice to have a complete solution.

John Bryan’s picture

John Bryan commented

Will have to give that a try as well I suppose.

Can't see myself having much un-committed time to look at FF3 for a while 8¬(.

Regards

John Bryan
www.ALT2.com
Application Integration Specialists
Tel: UK 08700 3456-31