Simple Jquery WYSIWYG editor question

Question

I have this Editor with me called jWYSIWYG, its basically a Jquery Plugin. So when I select some text and Click on H1/H2/p or whatever from the panel, my text is wrapped up in those corresponding tags

(Eg. <h1>My text</h1>).

My simple question: How do I attach specific classes to these tags. I mean, each time a user clicks on the H1 tag button, I want it to produce something like

<h1 class="someclassname">H1</h1>

I know this must be simple, if someone could help, would be great.

Here's the link to the project I'm using: https://github.com/akzhan/jwysiwyg

Thank you.

Answer 1

I know this is an old thread, but thought I'd post my findings for others, as I was also looking for a similar tweak to jWYSIWYG.

You can override the default behaviour of controls using "exec".

h1: {
    exec: function () {
        var range = this.getInternalRange(),
            common = $(range.commonAncestorContainer),
            $nodeName = range.commonAncestorContainer.nodeName.toLowerCase();
        if (common.parent('h1').length) {
            common.unwrap();
        } else {
            if ($nodeName !== 'body') {
                common.wrap('<h1 class="someclassname" />');
            }
        }
    }
}

Answer 2

looking at the documentation, it should be something like this:

$('#wysiwyg').wysiwyg({
    controls: {
        h1: { className: 'your-class-name' },
        h2: { className: 'your-other-class-name' },
    }
});