TinyMCE 从自定义标签中删除属性

Question

我正在尝试在 html 代码中插入一个占位符，稍后将动态替换该占位符。到目前为止，我设法插入代码，并且 TinyMCE 识别该标签，但是当我尝试向其附加 id 属性时，该属性因未知原因被删除。我尝试了大部分附加选项，但似乎都不起作用。

当前配置：

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

创建按钮的代码（然后插入代码）：

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);
                    }                            
                }
            }                                            
        }   
    });                
}

正如您可能注意到的，插入之前有一个警报，我用它来验证内容是否正确...... 当使用按钮插入代码然后查看 html 时，这就是我得到的：

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

有人知道如何解决这个问题吗？

更新：

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);
                            }                            
                        }
                    }                                            
                }   
            });                
        }

另一个更新：知道加载 tinyMCE 时 id 属性不会被删除并且它已经在那里，并且清理现有的内容，这可能会很有趣（并希望有助于解决）具有该属性的代码也不会删除它。

Answer 1

我会将 module 放入 valid_elements，而不是 extended_valid_elements/custom_elements。 extended_valid_elements 有时确实表现得很奇怪。

我自己的配置如下所示（您需要扩大您自己的 valid_elements 和 valid_children 设置（如果未在您的自定义tinymce配置中使用，您将必须使用默认值（可以在 moxiecode 网站找到）））：

// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "@[id|class|title|style|onmouseover]," +
"module," +
"a[name|href|target|title|alt]," +
"#p,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span[data-mce-type],hr",

valid_children: "body[p|ol|ul|hr]" +
"module[img]" +
",p[a|span|b|i|u|sup|sub|img|hr|#text|blockquote]" +
",span[a|b|i|u|sup|sub|img|#text|blockquote]" +
",a[span|b|i|u|sup|sub|img|#text|blockquote]" +
",b[span|a|i|u|sup|sub|img|#text|blockquote]" +
",i[span|a|b|u|sup|sub|img|#text|blockquote]" +
",sup[span|a|i|b|u|sub|img|#text]" +
",sub[span|a|i|b|u|sup|img|#text]" +
",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]" +
",ol[li]" +
",ul[li]",

Answer 2

我最终使用的解决方案是修改源代码中的 blockElementsMap 和过渡映射。这似乎是让自定义标签被识别为“块级”元素的唯一方法，并且能够按照我想要的方式将其添加到代码中以供以后处理。