Question

I got this code from our frontend guy for headings:

<h2 class="headline"><span>Foobar</span></h2>

The span is there for some visual element.

Now, how can I make this kind of “complicated” (for the end user) available over tinymce, so that the user can define correctly looking headings? I found the template plugin, but, that looks kind of overcomplicated. So, basically, it would be great if I could get tinymce to insert the class name and the span element when the user marks something as “Heading 2”. Is that possible?

Answer 1

Yes, this is possible. But if you are looking for an easy solution… i do not know if the easy one will suffice. Here it is:

Put this in your tinymce init:

setup : function(ed) {

    ed.onNodeChange.add(function(ed, evt) {
        $(ed.getBody()).find('p').addClass('headline');
    });
},