Inserted Graphs - Interference from Media button. [#505254]

When the tinymce media button is enabled there are errors with the graphs that are inserted by the add/edit graph button. Graph creation is normal and initially an inserted graph appears normal. Upon save or preview, the graph is displayed normally. But if graph content is edited after save or preview, the graph does not display and a box with the flash symbol appears instead.

The problems seems to progress on an individual graph basis - when a graph displays incorrectly, it is possible to insert a new graph that displays correctly until it is saved/previewed and then re-edited. This bug occurs in chrome, firefox, opera, and internet explorer.

I'm using:

Drupal core: 6.12
Wysiwyg API: 6.x-2.0
Wysiwyg ASCII Math: 6.x-1.1
TinyMce: Version 3.2.4.1

Comment	File	Size	Author
#2	editor_plugin.js_.txt	11.68 KB	iva2k

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

iva2k CreditAttribution: iva2k commented 29 June 2009 at 16:44

Assigned:

Unassigned

» iva2k

Thanks for reporting!

Comment #2

iva2k CreditAttribution: iva2k commented 6 July 2009 at 05:00

Status:

Active

» Postponed (maintainer needs more info)

File	Size
editor_plugin.js_.txt	11.68 KB

Investigating the problem...

It appears that media plugin treats all <embed> tags as its own, regardless of what's in the tags. See code below, lines marked (*).

// File sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/media/editor_plugin_src.js
_objectsToSpans : function(ed, o) {
    var t = this, h = o.content;

    h = h.replace(/<script[^>]*>\s*write(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)\(\{([^\)]*)\}\);\s*<\/script>/gi, function(a, b, c) {
        var o = t._parse(c);

        return '<img class="mceItem' + b + '" title="' + ed.dom.encode(c) + '" src="' + t.url + '/img/trans.gif" width="' + o.width + '" height="' + o.height + '" />'
    });

    h = h.replace(/<object([^>]*)>/gi, '<span class="mceItemObject" $1>');
(*)  h = h.replace(/<embed([^>]*)\/?>/gi, '<span class="mceItemEmbed" $1></span>');
(*)  h = h.replace(/<embed([^>]*)>/gi, '<span class="mceItemEmbed" $1>');
    h = h.replace(/<\/(object)([^>]*)>/gi, '</span>');
(*)  h = h.replace(/<\/embed>/gi, '');
    h = h.replace(/<param([^>]*)>/gi, function(a, b) {return '<span ' + b.replace(/value=/gi, '_mce_value=') + ' class="mceItemParam"></span>'});
    h = h.replace(/\/ class=\"mceItemParam\"><\/span>/gi, 'class="mceItemParam"></span>');

    o.content = h;
},

Commenting out these lines by "//" and copying that file to replace compressed editor_plugin.js seems to resolve the problem with AsciiGraph. I know it will create problems with media plugin when it inserts some of its own stuff into <embed> tags. Quick check shows that I still can insert swf files - they apparently go into object tags.

So far I don't see any other easy way to deal with media plugin. At minimum, media plugin should be more selective at which <embed> tags it picks up. It becomes media plugin problem and out of scope of AsciiMath module.

I still want to help, but I don't have time to do in-depth testing to get test cases so I could rewrite these replace commands to be more selective. It may take me a while to get to that myself. If anybody wants to help out - Attached is a patched file for media plugin. Just replace sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/media/editor_plugin.js (make sure to remove last _.txt), then test-drive the media plugin and report what is broken compared to the original file.

Comment #3

capman_ CreditAttribution: capman_ commented 16 July 2009 at 02:13

I tested out the new editor_plugin.js. I used IE8, firefox, chrome, oprera, and safari as browsers and youtube videos as media content. As a result of the file, the media plugin no longer interferes with graphs in IE, firefox, chrome, or safari. However, the problem persists in the opera browser.

Even though the media plugin still interferes with graphs in the opera browser, it no longer interferes with the math symbols plugin.

There is also a new problem with IE. Media content can no longer be viewed in IE. For example, a box with an x in the upper corner is shown instead of an embedded youtube video. This occurs irrespective of the browser originally used when the content was embedded. However, when the media button is used to embed content in IE, the content can be properly viewed using other browsers.

I'm using:

Drupal core: 6.13
Wysiwyg API: 6.x-2.0
Wysiwyg ASCII Math: 6.x-1.1
TinyMce: Version 3.2.4.1

Comment #4

iva2k CreditAttribution: iva2k commented 28 August 2011 at 20:18

Status:

Postponed (maintainer needs more info)

» Active

Thanks for testing! I did not expect it to be a solution, rather it disables a part of media plugin functionality, so the adverse side effects are expected. But now I am convinced it is the source of the problem. Some persistence of the problem in the Opera browser is interesting. I have to investigate it further. Have no guesses what that can be.

I will have to think of an overall solution. One path is to pursue Moxiecode to change the media plugin so it allows other plugins to use the <embed> tag for their functionality. Another path is to figure out a way to abandon <embed> tag in AsciiMath, which seems terribly difficult for keeping the SVG functionality.

In the meantime I can conclude that poor design of media plugin makes it incompatible with AsciiMath.

Edit: issue #505268: Add new Math/Math symbols - Interference from media button. marked as duplicate of this one.