Adding a DIV class in content editor

[henris17]

Hello,

Is there a way to add a serie of classes (div class="xxxx") to the content editor (instead of editing html directly). What I mean is to integrate the classes in a roll-down same way as heading1 to heading 6 are added.

Ideally I would like to highlight part of the text and select lets say classOne from the dropdown to get

my text whatsoever <div class="classOne"> the previously highlighted text.....</div>

tks
Henri

[frankmanl]

In both MicroTiny and TinyMCE you can easily do that.
First define in e.g. your layout css the new classes: .class1, .class2 etc.
Then in the Settings screen of MicroTiny or the CSS Style screen of TinyMCE you add those styles:

Code: Select all

first class=class1;second class=class2

Now they appear as classes in a dropdown menu of your editor.

[henris17]

@frankman: Many thanks

I am using micro tiny
but it is not exactly doing what I want (and this is why I talked about DIV.)

Let's say I select 2 paragraphs an I want a CSS to put one special frame border around the 2 paragraphs toghether , it would not work.

In other words , selecting

Code: Select all

<p> xxxx xxxx xxx</p> and <p> yyy yyy yyy</p> 

wil result in

Code: Select all

<p class="classOne">xxx xxxx xxx xxx</p> <p class="classOne">yyy yyyy y  y</p> 

two different frame borders

The result I would like is:

Code: Select all

<div class="classOne"><p>xxxxxx</p><p>yyy yyyy yyy </p></div>

[frankmanl]

Hmm, I wouldn't know about that. Sorry.

[Dr.CSS]

You would need to use tinyMCE not micro tiny and have the classes in the style sheet before you edit page then hilite the paragraphs and use the Styles drop...

[henris17]

Unfortunately it does not work, I still get <p classs="myClass"> ...instead of <div class="myClass"><p>...

There should be something to tell the editor to consider my selection in this case as one continuous "block" instead of successive " in-line"

[frankmanl]

Add div to TinyMCE.
Extensions > TinyMCE WYSIWYG > Advanced > Blockformats in dropdown-menu
Here you add div, so you get something like:

Code: Select all

div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp

Now you have a div option in your dropdown menu.
Select the lines you want to change to div, click div and then add the class of your choice to that div by selecting it and clicking on that class.

[henris17]

The best I could get selecting two paragraph and using the above method (after some adjustments) is :

Code: Select all

<div class="myClass"> <p>xxxxx xcxxxxx</p></div>
<div class="myClass"> <p>YYY YYYYYYYY</p></div>

What I need is:

Code: Select all

 
<div class="myClass">
<p>xxxxx xcxxxxx</p><p>YYY YYYYYYYY</p>
</div>

Henri