Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

embedded media not showing up in html editor in TinyMCE

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>&nbsp;</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&amp;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?

like image 919
demux Avatar asked Dec 16 '10 17:12

demux


People also ask

How do you get content on TinyMCE editor?

The TinyMCE getContent and setContent methods You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.

How do you add a picture on TinyMCE editor?

Images that are edited within TinyMCE can be uploaded using this function. Local images that are added through other means, for example drag and drop when using the paste_data_images configuration property, or using Tiny's PowerPaste Plugin.


1 Answers

Solution :

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

like image 183
Matt Seymour Avatar answered Oct 07 '22 01:10

Matt Seymour