嵌入媒体未显示在 TinyMCE 的 html 编辑器中

发布于 2024-10-08 15:12:25 字数 5640 浏览 9 评论 0原文

而且它不会保存。

  • 我使用媒体插件插入来自 youtube 的视频。
  • 这部电影出现在预览中。
  • 我按插入键。
  • 这是 ed.execCommand('mceInsertContent', false, h); 在 media.js 中输出的内容: 当我按插入/提交时。
  • 我在编辑器内看到一个黄色框。
  • 我检查了源 html,我看到的只是一个

     

    ,移动嵌入内容应该在其中。
  • 我保存后,黄色框消失了。

这是我当前的 tinymce 初始化脚本:

tinyMCE.init({

    // General
    mode:               'none',
    theme:              'advanced',
    skin:               'grappelli',
    dialog_type:        'window',
    browsers:           'gecko,msie,safari,opera',
    editor_deselector : 'mceNoEditor',
    language:           "en",
    relative_urls:      false,
    plugins:            'advimage,advlink,fullscreen,paste,searchreplace,grappelli,grappelli_contextmenu,media',

    // callbackss
    file_browser_callback: 'CustomFileBrowser',

    // Layout
    width:              410,
    height:             500,
    indentation:        '10px',
    object_resizing:    false,

    // Accessibility
    cleanup_on_startup:     true,
    accessibility_warnings: false,
    remove_trailing_nbsp:   true,
    fix_list_elements :     true,
    remove_script_host:     true,

    // theme_advanced
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_buttons1: "formatselect,styleselect,|,bold,italic,underline,|,bullist,numlist,blockquote,|,undo,redo,|,link,unlink,|,image,media,|,fullscreen,|,grappelli_adv",
    theme_advanced_buttons2: "search,|,pasteword,charmap,|,code,|,table,cleanup,grappelli_documentstructure",
    theme_advanced_buttons3: "",
    theme_advanced_path: false,
    theme_advanced_blockformats: "p,h2,h3,h4,pre",
    theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
    theme_advanced_resizing : true,
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing_use_cookie : true,
    theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",

    // Adv (?)
    advlink_styles: "intern=internal;extern=external",
    advimage_update_dimensions_onchange: true,

    // grappelli
    grappelli_adv_hidden: false,
    grappelli_show_documentstructure: 'on',

    // elements
    /*
    valid_elements : [
        '-p,','a[href|target=_blank|class]','-strong/-b','-em/-i','-u','-ol',
        '-ul','-li','br','img[class|src|alt=|width|height]','-h2,-h3,-h4','-pre','-blockquote','-code','-div'
    ].join(','),
    extended_valid_elements: [
        'a[name|class|href|target|title|onclick]',
        'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]',
        'br[clearfix]',
        '-p[class<clearfix?summary?code]',
        'h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]',
        'ul[class<clearfix],ol[class<clearfix]',
        'div[class]',
        'object[align<bottom?left?middle?right?top|archive|border|class|classid'
          + "|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
          + "|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
          + "|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
          + "|vspace|width]",
        'param[id|name|type|value|valuetype<DATA?OBJECT?REF]',
        'embed[src|type|width|height|flashvars|wmode]',
        'address'
    ].join(','),
    valid_child_elements : [
        'h1/h2/h3/h4/h5/h6/a[%itrans_na]',       'table[thead|tbody|tfoot|tr|td]',
        'strong/b/p/div/em/i/td[%itrans|#text]', 'body[%btrans|#text]'
    ].join(',')
    */

    // custom cleanup
    // setup: function(ed) {
    //     // Gets executed before DOM to HTML string serialization
    //     ed.onBeforeGetContent.add(function(ed, o) {
    //         // State get is set when contents is extracted from editor
    //         if (o.get) {
    //             // Remove empty paragraphs (because this is bad)
    //             tinymce.each(ed.dom.select('p', o.node), function(n) {
    //                 alert(n.firstChild);
    //                 ed.dom.remove(n);
    //             });
    //             // Remove douple spaces
    //             // o.content = o.content.replace(/<(strong|b)([^>]*)>/g, '');
    //         }
    //     });
    // }
});

编辑:

好的,我将 cleanup: false 添加到我的初始化脚本中。现在,我在源代码中得到的只是:

<img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" _mce_src="/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&amp;feature',width:'376',height:'302'" width="376" height="302" align="">

这也显示在我的 HTML 中。

TinyMCE 不应该用一些嵌入代码替换它吗?还是我需要自己用一些 javascript 来替换它?

And it won't save.

  • I use the media plugin to insert a video from youtube.
  • The movie shows up in preview.
  • I press insert.
  • This is what ed.execCommand('mceInsertContent', false, h); outputs in media.js: <img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="" /> when I press insert/submit.
  • I see a yellow box inside the editor.
  • I check the source html and all I see is a <p> </p> where the move embed stuff should be.
  • I save and the yellow box is gone.

Here is my current tinymce init script:

tinyMCE.init({

    // General
    mode:               'none',
    theme:              'advanced',
    skin:               'grappelli',
    dialog_type:        'window',
    browsers:           'gecko,msie,safari,opera',
    editor_deselector : 'mceNoEditor',
    language:           "en",
    relative_urls:      false,
    plugins:            'advimage,advlink,fullscreen,paste,searchreplace,grappelli,grappelli_contextmenu,media',

    // callbackss
    file_browser_callback: 'CustomFileBrowser',

    // Layout
    width:              410,
    height:             500,
    indentation:        '10px',
    object_resizing:    false,

    // Accessibility
    cleanup_on_startup:     true,
    accessibility_warnings: false,
    remove_trailing_nbsp:   true,
    fix_list_elements :     true,
    remove_script_host:     true,

    // theme_advanced
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_buttons1: "formatselect,styleselect,|,bold,italic,underline,|,bullist,numlist,blockquote,|,undo,redo,|,link,unlink,|,image,media,|,fullscreen,|,grappelli_adv",
    theme_advanced_buttons2: "search,|,pasteword,charmap,|,code,|,table,cleanup,grappelli_documentstructure",
    theme_advanced_buttons3: "",
    theme_advanced_path: false,
    theme_advanced_blockformats: "p,h2,h3,h4,pre",
    theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
    theme_advanced_resizing : true,
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing_use_cookie : true,
    theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",

    // Adv (?)
    advlink_styles: "intern=internal;extern=external",
    advimage_update_dimensions_onchange: true,

    // grappelli
    grappelli_adv_hidden: false,
    grappelli_show_documentstructure: 'on',

    // elements
    /*
    valid_elements : [
        '-p,','a[href|target=_blank|class]','-strong/-b','-em/-i','-u','-ol',
        '-ul','-li','br','img[class|src|alt=|width|height]','-h2,-h3,-h4','-pre','-blockquote','-code','-div'
    ].join(','),
    extended_valid_elements: [
        'a[name|class|href|target|title|onclick]',
        'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]',
        'br[clearfix]',
        '-p[class<clearfix?summary?code]',
        'h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]',
        'ul[class<clearfix],ol[class<clearfix]',
        'div[class]',
        'object[align<bottom?left?middle?right?top|archive|border|class|classid'
          + "|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
          + "|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
          + "|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
          + "|vspace|width]",
        'param[id|name|type|value|valuetype<DATA?OBJECT?REF]',
        'embed[src|type|width|height|flashvars|wmode]',
        'address'
    ].join(','),
    valid_child_elements : [
        'h1/h2/h3/h4/h5/h6/a[%itrans_na]',       'table[thead|tbody|tfoot|tr|td]',
        'strong/b/p/div/em/i/td[%itrans|#text]', 'body[%btrans|#text]'
    ].join(',')
    */

    // custom cleanup
    // setup: function(ed) {
    //     // Gets executed before DOM to HTML string serialization
    //     ed.onBeforeGetContent.add(function(ed, o) {
    //         // State get is set when contents is extracted from editor
    //         if (o.get) {
    //             // Remove empty paragraphs (because this is bad)
    //             tinymce.each(ed.dom.select('p', o.node), function(n) {
    //                 alert(n.firstChild);
    //                 ed.dom.remove(n);
    //             });
    //             // Remove douple spaces
    //             // o.content = o.content.replace(/<(strong|b)([^>]*)>/g, '');
    //         }
    //     });
    // }
});

Edit:

Ok I added cleanup: false to my init script. And now, all I get in my source is this:

<img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" _mce_src="/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="">

This also shows up in my HTML.

Should TinyMCE not replace this with some embed code, or do I need to do that myself with some javascript?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

待"谢繁草 2024-10-15 15:12:25

解决方案:

将tinymce 以及所有插件更新到最新版本(3.3.9.2)。我重新打开清理功能,现在它可以工作了。

Solution :

Update tinymce to latest release (3.3.9.2), along with all the plugins. I turned cleanup back on and now it works.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文