Question

I’m trying to insert a placeholder in html code that will be replaced later on dynamically. So far I managed to get the code inserted, and TinyMCE recognizes the tag, but when I try to append an id attribute to it, the attribute gets removed for an unknown reason. I tried most of the additional options, but none seem to work.

Current config:

extended_valid_elements : "module[id]",
valid_children : "module[img]",
custom_elements : "module",

The code to create the button (and subsequently insert the code):

setup : function(ed) {
    // Add a custom button
    ed.addButton("module", {
        title : "Module",
        image : "images/app-x-php-icon.png",
        onclick : function() {
            ed.focus();
            var options = document.getElementById('rendermcemods').innerHTML+"";
            var optionList = options.split('|');
            var name=prompt("Please enter module name out of: "+options,optionList[0]);
            for(var i=0;i<optionList.length;i++){
                if(optionList[i] == name){ 
                    var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
                    var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
                    //alert(content);
                    if(! patt.test(ed.getContent())){ 
                        ed.execCommand('mceInsertContent', false,content);
                    }                            
                }
            }                                            
        }   
    });                
}

As you might notice, there’s an alert before the insert, which I used to verify that the content is right…
When use the button to insert the code and then view the html, this is what I get:

<module><img src=images/app-x-php-icon.png" alt="" /></module>

Would anyone know how to fix this?

Update:

full config settings for tinyMCE:

// General options
        mode : "none",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,\n\
                    save,advhr,advimage,advlink,emotions,iespell,inlinepopups,\n\
                    insertdatetime,media,searchreplace,print,contextmenu,paste,\n\
                    directionality,fullscreen,noneditable,visualchars,\n\
                    nonbreaking,xhtmlxtras",

        // Theme options
        theme_advanced_buttons1 : "fullscreen,help,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,module",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,blockquote,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        document_base_url : "http://www.example.com",
        content_css : "content.css", 
        extended_valid_elements : "module[id]",
        valid_children : "module[img]",
        /*custom_elements : "module", */           

        // Drop lists for link/image/media/template dialogs            
        external_link_list_url : "js/generateList.php?A=link",
        external_image_list_url : "js/generateList.php?A=image",
        media_external_list_url : "js/generateList.php?A=media",

        setup : function(ed) {
            // Add a custom button
            ed.addButton("module", {
                title : "Module",
                image : "images/app-x-php-icon.png",
                onclick : function() {
                    ed.focus();
                    var options = document.getElementById('rendermcemods').innerHTML+"";
                    var optionList = options.split('|');
                    var name=prompt("Please enter module name out of: "+options,optionList[0]);
                    for(var i=0;i<optionList.length;i++){
                        if(optionList[i] == name){ 
                            var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
                            var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
                            //alert(content);
                            if(! patt.test(ed.getContent())){ 
                                ed.execCommand('mceInsertContent', false,content);
                            }                            
                        }
                    }                                            
                }   
            });                
        }

Another update: It might be interesting (and hopefully help to solve) to know that the id attribute isn’t removed when tinyMCE is loaded and it already is in there, and a clean-up on existing code with the attribute doesn’t remove it either.

Answer 1

The solution I ended up using was modifying the blockElementsMap and the transitional map taht are in the source code. That seemed to be the only way to get the custom tag recognized as ‘blocklevel’ element, as well as being able to add it exactly like I want in the code for later processing.