TinyMCE automatic class

6 Posts

peachey777 Reply #1, 16 years, 9 months ago

Hey, I’m not sure if this is the best place to ask this but here it goes. Is there a way to make ModX insert classes into li tags?

For example, when using tinymce it would generate a list like this:

<ul>
<li>text1</li>
<li>text2</li>
<li>text2</li>
</ul>

But when I save, I would like it to automatically make it this:

<ul>
<li class="firstitem">text1</li>
<li>text2</li>
<li class="lastitem">text2</li>
</ul>

Thanks

1,624 Posts

cipa Reply #2, 16 years, 9 months ago

You can easily do that with jQuery or Mootols or a similar javascript framework.

That is unless you need those classes in the modx manager not in the html output.

jQuery example:
$("ul li:first").addClass(’firstitem’);
$("ul li:last").addClass(’lastitem’);

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

6 Posts

peachey777 Reply #3, 16 years, 9 months ago

Thanks! I wasn’t too sure how to do that, but a little bit of research fixed that. In my template I just added the jquery.js file. Then under the list I needed to add the class to I added the following 2 lines:

<script>$("li:first").addClass("firstitem");</script> 
<script>$("li:last").addClass("lastitem");</script>

I found information I needed from here:

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
http://api.jquery.com/addClass/

1,624 Posts

cipa Reply #4, 16 years, 9 months ago

actually you should do it like this:

add jquery to the header
create a file called site.js and add the file to the header. similar to the step above

in the site.js put this

$(document).ready(function() {
   $("li:first").addClass("firstitem");
   $("li:last").addClass("lastitem");
});

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles