2012-11-30 5 views
0

나는 html5 편집기로 tinymce (3.5.8 버전) 편집기를 사용했습니다. 이제 비디오 및 오디오 태그를 추가하는 기능이 필요합니다.tinymce html5 편집기

함수 doTinyMCECleanUp (FRM, ID) {

VAR의 C = FRM [ID] .value;

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 플러그인과 미디어를 사용하여 많은 노력을했습니다.

미디어 플러그인을 사용할 때. 비디오 태그를 추가하면 플래시 태그에 비디오 태그가 삽입됩니다. 또한 콘텐츠를 업데이트 할 때 비디오 태그가 사라집니다. 어디서나 HTML 소스 편집기를 볼 수 없습니다. 나는 플래시 객체 소스 만 볼 수있다.

mediahtml5 플러그인을 사용할 때 편집기에 비디오를 추가 할 수 있지만 HTML 뷰 소스 편집기는 볼 수 없습니다.

누구든지 나를 도와주세요.

답변

0

tinymce 설정 valid_elements 및 valid_children을 살펴보십시오. Tinymce가 구성과 일치하지 않거나 유효하지 않은 html 태그를 스킵합니다.

0

작은 mce 초기화에 'extend_valid_elements'를 추가하십시오. 예 :

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

위의 예는 원하는 요소 속성이있는 'audio'태그를 작은 mce 편집기에 삽입 할 수있게 해줍니다.

참고 : 저는 작은 mce jquery 플러그인을 사용하지만 일반 작은 mce에서도 똑같습니다.

관련 문제