Applying styles as DIVs with TinyMCE

[Jonny]

Maybe I'm missing something but TinyMCE seems to have no option to apply divs. If content is unformatted then styles are applied as spans.

What I'd like to do is add structured content i.e. heading, paragraphs etc, wrap it all in a div and apply a style to the div. FCKEditor can do divs but I find it buggy.

The design can be made to work wrapped in spans (set to display:block) but this invalidates the code.

Any ideas?

[Dr.CSS]

The editor is coming from a {content} tag that is usually set in a div...


  {content}


So you would put the style in your CSS
#main{your style}
#main p {your style}
#main h2 {your style}
#main a {your style}...

[Jonny]

Thanks for your reply Mark.

This would require a separate content area for each div.

If, for example, the div was for a box style, and the end user required several boxes and to be able to add new boxes, this technique would prove awkward.

Since posting, I've stumbled across the keyboard shortcut for creating divs in TinyMCE: control-8.

A div cannot be applied to a selected area of formatted content as it replaces all contained element tags, h1, p etc. with divs. Yuk!

The instructions below are known to work with Firefox but not IE6 or 7.

The way to proceed is to start by inserting the div with control-8, assign a style to it, then add content and format it as you go. If you enter text and hit return before formatting it then a new unwanted div will be created.

Alternatively, blocks of unformatted content can be entered with headings, paragraphs etc separated by line-breaks (shift-return), then the formatting applied by selecting areas and choosing the desired element from the Format menu. The line-breaks are automatically replaced by the appropriate tag and the div stays wrapped round the content.

Using the latter method, applying the same formatting to 2 adjoining areas poses a problem. For instance, when applying consecutive paragraphs the Format menu continues to display "Paragraph" when the second, as yet unformatted, area of text is selected. Opening the menu and selecting "Paragraph" again has no effect, and selecting "Format" causes the div tags to vanish.

Fortunately, shortcuts come to the rescue: insert the cursor in the unformatted paragraph-to-be and hit control-7. Paragraph (or whatever) neatly applied.

So that's one div done. How to add another? Click Apply. Insert the cursor back in the edit field and hit control-end (apple-down arrow on Mac). The cursor will now be positioned below the first div and a new one can be added.

For end-user friendliness, can anyone suggest how to add "Div" to the Format menu and a button for moving to the end of document?