How to add accordion to tinymce editor?

Question

I have a tinymce editor in which I want to extend it to add accordion. Is there an easy way to do this?

The file is way too big to add it though what I am basically trying to do is add a new button on the editor as shown below;

tinymce.init the toolbar has a new button called acccordionInsert

tinymce.init({
        ...
        toolbar1: 'undo redo | link customImage media snippetInsert template formInsert acccordionInsert | bold italic forecolor backcolor',
        ...

accordionInser function;

    function accordionInsert(editor) {
        editor.focus();
        var highlightedContent = $(tinyMCE.activeEditor.selection.getContent());

        $('#accordionFormPopup').remove();
        $('body').append('<div id="accordionFormPopup" class="popup accordionFormPopupBackground"><div id="addAccordionFormPopup"></div></div>');
        
        $('#addAccordionFormPopup').load('/test/widgets/accordionForm.php');
        
        $('#accordionFormPopup').fadeIn(500, 'linear');
    }

add button fuction inside editor setup, this basically triggers the fuction above when clicking the button in the editor

    editor.addButton('accordionInsert', {
                icon: 'arrowdown',
                title: 'Insert accordion',
                onclick: function() {
                    accordionInsert(editor);
                }
            });

Everything mentioned above works fine, the probalem is in the accordionForm.php file the file has a dropdown option which you can select which accordion you want to add on the editor, this queries a database and upon inserting it it will use the following function to display it

        function insertSnippet(){
            if(!$('#insertSnippet').hasClass('disabled')){
                id = $('#snippetSelect').val();
                tinyMCE.activeEditor.execCommand('mceInsertContent',false,"<div class='snippetWrapper' contenteditable=false><div class='snipCode'>[accord,id="+id+"]</div>Please save the page for the accordion to display.</div>");
                $('#accordionFormPopup').fadeOut(function(){
                    $('#accordionFormPopup').remove();
                });
            }
        };

I haven't figured out a way to style the tinyMCE.activeEditor.execCommand mentioned above or make it display an accordion somehow, as of now it just diplays the selected id but I want to be able to display the name and content from the database and then use css to display them as an accordion.

Answer 1

I actually figured out the issues. I just had to echo the content which is probably not the best idea but works for now.

if(stristr($content,"[accord"))
{
    $accordionCount = substr_count($content, '[accord');

    if(!$db) {
        $db = new DB;
    }
    
    for($i=0; $i < $accordionCount; $i++)        
    {
        $pos = strpos($content,"[accord");
        $endpos = strpos($content,"]");
        $incData = trim(substr($content,$pos+1,$endpos-$pos-1));
        
        $accordionId = afterlast('id=', $incData);
        //finding accordion content
        $db->query("SELECT aName, aContent FROM ls_accord WHERE aId='$accordionId'");
        $db->next_record();
        list($aName, $aContent) = $db->Record;
        //wrapping content in accordion indicator       
        echo "</br><div class='myAccordion'><button class='menu'>$aName<span class='arrow rarrow'>+</span><span class='arrow darrow'>-</span></button><div class='panel close'><div style='padding:10px'>$aContent</div></div></div>";
        
        $content = str_replace("[accord,id=$accordionId]", $displayContent, $content);
    }
    $content = str_replace("|{|processedAccordion", "[accord", $content);
    $content = str_replace("|}|", "]", $content);
}