当前位置: 动力学知识库 > 问答 > 编程问答 >

tinymce html5 editor

问题描述:

I used tinymce(3.5.8 version) editor as html5 editor. Now i want features to add video and audio tags.

function doTinyMCECleanUp(frm, id)

{

var c = frm[id].value;

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

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

// comment this out if 'html' not '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);

});

},

});

I tried a lots with 2 plugin mediahtml5 and media.

When i use media plugin. If i add video tags it insert flashobject with video tags.

And also when i update the content video tags goes out. I can't see it anywhere any html source editor. i can see only flash object source.

when i use mediahtml5 plugin i can add videos into editor but can not see into html view source editor.

Can anybody please help me .

网友答案:

Have a look at the tinymce settings valid_elements and valid_children. Tinymce stips out html tags that do not match the configuration/ are invalid.

网友答案:

Add the 'extend_valid_elements' to your tiny mce initalization. For example:

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

The example above allows you to insert 'audio' tags with the desired element properties in the tiny mce editor.

Note: I use tiny mce jquery plugin but it's the same thing for the regular tiny mce.

分享给朋友:
您可能感兴趣的文章:
随机阅读: