Page 1 of 1
Adding a DIV class in content editor
Posted: Fri Feb 03, 2012 11:30 pm
by 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
Re: Adding a DIV claas in content editor
Posted: Sat Feb 04, 2012 4:58 am
by 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.
Re: Adding a DIV class in content editor
Posted: Sat Feb 04, 2012 12:48 pm
by 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>
The result I would like is:
Code: Select all
<div class="classOne"><p>xxxxxx</p><p>yyy yyyy yyy </p></div>
Re: Adding a DIV class in content editor
Posted: Sat Feb 04, 2012 2:08 pm
by frankmanl
Hmm, I wouldn't know about that. Sorry.
Re: Adding a DIV class in content editor
Posted: Sat Feb 04, 2012 4:36 pm
by 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...
Re: Adding a DIV class in content editor
Posted: Sun Feb 05, 2012 10:16 am
by 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"
Re: Adding a DIV class in content editor
Posted: Sun Feb 05, 2012 10:49 am
by 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.
Re: Adding a DIV class in content editor
Posted: Sat Feb 11, 2012 12:38 am
by 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