1

I want to add a custom button that sets up a bootstrap accordian element. To do this, I will need to know how many other accordian elements are in the text already so that I can give the new element the proper ID. Right now I have: 

    // Add a custom button
    ed.addButton('accordianArea', {
        title : 'Accordian Area',
        text : '[accordian/]',
        icon: false,
        onclick : function() {
            // Add you own code to execute something on click
            ed.focus();

            var text = ed.selection.getContent({'format': 'html'});

            var accordianText = '<div class="panel panel-default">' +
                '<div class="panel-heading" role="tab" id="heading1">' +
                    '<h4 class="panel-title">' +
                        '<a role="button" data-toggle="collapse" href="#heading1" aria-expanded="true" aria-controls="heading1">' +
                            'Accordian Title<span id="_cursor" />' +
                        '</a>' +
                    '</h4>' +
                '</div>' +
                '<div id="heading1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">' +
                    '<div class="panel-body">' +
                        (text ? text : 'Accordian Text') +
                    '</div>' +
                '</div>' +
            '</div>';

            ed.execCommand('mceInsertContent', false, accordianText);

            ed.selection.select(ed.dom.select('#_cursor')[0]); //select the inserted element
            ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
            ed.dom.remove('_cursor'); //remove the element
        }
    });

I need to be able to count how many panel-collapse classes are in the text so I can make heading1 and collapse1 increment accordingly with each new add. Also I suppose I will need to be able to edit the ones already there in case one is removed, so that the next one added is not a duplicate of a different one.

Is there a way count these in either jQuery or javascript?

Thanks, James

James
  • 3,765
  • 4
  • 48
  • 79

1 Answers1

1

Yes, this is possible:

var ed = tinymce.get('your_editor_id');
var $elements = $(ed.getBody()).find('.panel-collapse');
var count = $elements.length;
Thariama
  • 50,002
  • 13
  • 138
  • 166
  • 1
    This works great for getting the original count. I suppose, then, that I can do an `.each(function() {})` to rename the elements as well in case element #2 of 4 was removed, and another added? So that it would re-order the current elements since the new element would now be element #4? – James Nov 30 '15 at 15:18
  • I just tested my own comment and it does work. Thanks again. – James Nov 30 '15 at 15:59
  • glad to have been able to help – Thariama Dec 01 '15 at 13:15