2012-01-03 209 views
2

我試圖在稍後將被動態替換的html代碼中插入一個佔位符。到目前爲止,我設法插入代碼,TinyMCE識別標籤,但是當我嘗試向其添加id屬性時,該屬性因未知原因被刪除。我嘗試了大部分附加選項,但似乎沒有任何效果。TinyMCE從自定義標記中刪除屬性

當前配置:

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

另一個更新:這可能是有趣的(希望能幫助解決),要知道,id屬性不會被刪除時,TinyMCE的是加載並且它已經在那裏,並且具有該屬性的現有代碼的清理也不會將其移除。

+0

這應該工作(我也做了本地測試)。嘗試不使用'custom_elements'行。你可以發佈整個配置嗎? – 2012-01-03 14:58:56

+0

@Madmartigan當不使用cutom_elements行代碼被替換爲:'

' – canihavesomecoffee 2012-01-03 15:15:19

+0

好的,那麼請發佈您的整個配置和你使用的是什麼版本的TinyMCE。如果你能給我們一種重現問題的方法,它可以更容易地解決;正如我所說,這對我來說已經很好。 – 2012-01-03 15:17:42

回答

0

我最終使用的解決方案是修改blockElementsMap和過渡地圖taht在源代碼中。這似乎是將自定義標籤識別爲「blocklevel」元素的唯一方法,並且可以將其添加到代碼中,以便以後處理。

1

我會把module改爲valid_elements而不是extended_valid_elements/custom_elementsextended_valid_elements有時會表現奇怪。 (你需要放大你自己的valid_elementsvalid_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]", 
+0

會測試一下。我只是想通過在'content'中添加一個簡單的' '來解決消失的id,但是你的解決方案應該更加穩定和整潔。 – canihavesomecoffee 2012-01-04 11:04:37