[英]tinymce html5 editor
I used tinymce(3.5.8 version) editor as html5 editor. 我使用tinymce(3.5.8版)编辑器作为html5编辑器。 Now i want features to add video and audio tags.
现在,我要添加视频和音频标签的功能。
function doTinyMCECleanUp(frm, id) { 函数doTinyMCECleanUp(frm,id){
var c = frm[id].value; var c = frm [id] .value;
c = c.replace(/ </source>/gim, ''); c = c.replace(/ </ source> / gim,'');
c = c.replace(/</source>/gim, ''); c = c.replace(/ </ source> / gim,'');
// comment this out if 'html' not 'xhtml' //如果'html'不是'xhtml'则将其注释掉
c = c.replace(/]*)>/gim, ''); c = c.replace(/] *)> / gim,'');
frm[id].value = c; frm [id] .value = c;
} }
tinyMCE.init({ 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. 我用2个插件mediahtml5和media尝试了很多。
When i use media plugin. 当我使用媒体插件时。 If i add video tags it insert flashobject with video tags.
如果我添加视频标签,则将flashobject与视频标签一起插入。 And also when i update the content video tags goes out.
而且,当我更新内容时,视频标签也会消失。 I can't see it anywhere any html source editor.
我在任何html源代码编辑器中都看不到它。 i can see only flash object source.
我只能看到Flash对象源。
when i use mediahtml5 plugin i can add videos into editor but can not see into html view source editor. 当我使用mediahtml5插件时,我可以将视频添加到编辑器中,但看不到html视图源编辑器。
Can anybody please help me . 有人能帮我吗?
Have a look at the tinymce settings valid_elements and valid_children. 看一下tinymce的设置valid_elements和valid_children。 Tinymce stips out html tags that do not match the configuration/ are invalid.
Tinymce指出与配置不匹配的html标记/无效。
Add the 'extend_valid_elements' to your tiny mce initalization. 将“ extend_valid_elements”添加到您的小型mce初始化中。 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. 上面的示例允许您在小型mce编辑器中插入具有所需元素属性的“音频”标签。
Note: I use tiny mce jquery plugin but it's the same thing for the regular tiny mce. 注意:我使用的是微型mce jquery插件,但对于普通的微型mce来说是一样的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.