2012-11-30 44 views
0

我用tinymce(3.5.8版本)编辑器作为html5编辑器。现在我想要添加视频和音频标签的功能。tinymce html5 editor

功能doTinyMCECleanUp(FRM,ID) {

变种C = FRM [ID]。价值;

c = c.replace(/ </source>/gim,'');

c = c.replace(/ </source>/gim,'');

//注释这一点,如果 'HTML' 不是 '的XHTML'

C = c.replace(/] *)>/GIM, '');

frm [id] .value = c;

}

tinyMCE.init({

 mode : "textareas", 
    theme : "advanced", 
    plugins : "visualblocks,inlinepopups,mediahtml5,media", 
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,styleselect,justifyleft,justifycenter,justifyright,justifyfull,|,visualblocks,code,mediahtml5,media", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_buttons4 : "", 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true, 
    content_css : "/js/tinymce/examples/css/content.css", 
    visualblocks_default_state: true, 
    extended_valid_elements : "video[*]", 

    // Schema is HTML5 instead of default HTML4 
    schema: "html5", 

     template_external_list_url : "tinymce/examples/lists/template_list.js", 
    external_link_list_url : "tinymce/examples/lists/link_list.js", 
    external_image_list_url : "tinymce/examples/lists/image_list.js", 
    media_external_list_url : "tinymce/examples/lists/media_list.js", 

    // End container block element when pressing enter inside an empty block 
    end_container_on_empty_block: true, 



    // HTML5 formats 
    style_formats : [ 
      {title : 'h1', block : 'h1'}, 
      {title : 'h2', block : 'h2'}, 
      {title : 'h3', block : 'h3'}, 
      {title : 'h4', block : 'h4'}, 
      {title : 'h5', block : 'h5'}, 
      {title : 'h6', block : 'h6'}, 
      {title : 'p', block : 'p'}, 
      {title : 'div', block : 'div'}, 
      {title : 'pre', block : 'pre'}, 
      {title : 'section', block : 'section', wrapper: true, merge_siblings: false}, 
      {title : 'article', block : 'article', wrapper: true, merge_siblings: false}, 
      {title : 'blockquote', block : 'blockquote', wrapper: true}, 
      {title : 'hgroup', block : 'hgroup', wrapper: true}, 
      {title : 'aside', block : 'aside', wrapper: true}, 
      {title : 'figure', block : 'figure', wrapper: true} 
    ], 

    setup : function(ed) { 
    ed.onSubmit.add(function(ed, e) { 
    doTinyMCECleanUp(e.target, ed.id); 
    }); 

},

});

我试了很多2插件mediahtml5和媒体。

当我使用媒体插件。如果我添加视频标签,它会将视频标签插入到flashobject中。 而且当我更新内容视频标签熄灭。我无法在任何html源代码编辑器中看到它。我只能看到Flash对象的来源。

当我使用mediahtml5插件我可以添加视频到编辑器,但无法看到HTML视图源编辑器。

任何人都可以请帮助我。

回答

0

看看tinymce设置valid_elements和valid_children。 012,Tinymce挖出与配置不匹配的html标记/无效。

0

将“extend_valid_elements”添加到您的微小mce初始化中。例如:

$('#my_textarea').tinymce({ 
    ... 
    extended_valid_elements: "audio[id|class|src|type|controls]", 
    ... 
}) 

上述示例允许您在小型mce编辑器中插入具有所需元素属性的'audio'标签。

注意:我使用微小的mce jquery插件,但它对于常规的微型mce是同样的事情。