Adding functionality to a custom tinymce button

Question

I Have created custom tinymce button using the code

setup : function(ed) {
        ed.addButton('Tittle', {
        title : 'Tittle',
        image : './images/T.jpg',
        onclick : function() {
 ed.focus();
 ed.selection.setContent('<tittle>' + ed.selection.getContent() + '</tittle>');
            }
        });
});

When i click on the custom button the selected text is added wtih <tittle> tag.After i save the page and again doing the same thing on the same text then how i can remove the previously added the <tittle> from the text.I have used ed.selection.getContent() for getting the content ,but it giving only the content without tag.Thanks in advance

Answer 1

I would try to check if <tittle> is already wrapped around it and if it is, then remove it. Something like this might work (note, I haven't tested this, but I think it should work -- you can alert(ed.selection.getContent()) to see if the <tittle></tittle> tags are included or not too):

setup: function(ed) {
    ed.addButton("tittle", {
        title: 'Tittle',
        image: './images/T.jpg',
        onclick: function() {
            ed.focus();
            var c = ed.selection.getContent();
            // alert(c); //check the contents to see what's included
            if (c.indexOf('<tittle>') >= 0 && c.indexOf('</tittle>') >= 0) {
                c = c.replace('<tittle>','');
                c = c.replace('</tittle>','');
                ed.selection.setContent(c);
            } else {
                ed.selection.setContent('<tittle>' + ed.selection.getContent() + '</tittle>');
            }
        }
    });
});