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，过渡地图taht在源代码中。这似乎是将自定义标记识别为“blocklevel”元素的唯一方法，并且能够在代码中完全按照我想要的方式添加它以供以后处理。

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

2 个答案: