WordPress.org

Make WordPress Core

Ticket #32920: 32920.patch

File 32920.patch, 3.7 KB (added by prionkor, 6 years ago)

Add alignment classes to iframe.

  • wp-includes/js/tinymce/plugins/media/plugin.js

    diff --git a/wp-includes/js/tinymce/plugins/media/plugin.js b/wp-includes/js/tinymce/plugins/media/plugin.js
    index 10d4b0b..0bf850b 100644
    a b tinymce.PluginManager.add('media', function(editor, url) { 
    620620
    621621                // Converts iframe, video etc into placeholder images
    622622                editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes, name) {
    623                         var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
    624                         var videoScript;
     623            var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
     624            var videoScript, alignClass;
    625625
    626626                        while (i--) {
    627627                                node = nodes[i];
    tinymce.PluginManager.add('media', function(editor, url) { 
    674674                                        placeHolder.firstChild = null;
    675675                                }
    676676
    677                                 placeHolder.attr({
     677                var className = "mce-object mce-object-" + name;
     678                var nodeClasses = node.attr('class');
     679
     680                if( undefined !== nodeClasses){
     681                    nodeClasses = nodeClasses.split(' ');
     682                    alignClass = editor.findAlignClass(nodeClasses);
     683
     684                    if( alignClass != ''){
     685                        className += ' ' + alignClass;
     686                    }
     687
     688                }
     689
     690                placeHolder.attr({
    678691                                        width: node.attr('width') || "300",
    679692                                        height: node.attr('height') || (name == "audio" ? "30" : "150"),
    680693                                        style: node.attr('style'),
    681694                                        src: tinymce.Env.transparentSrc,
    682695                                        "data-mce-object": name,
    683                                         "class": "mce-object mce-object-" + name
     696                                        "class": className
    684697                                });
    685698
    686699                                node.replace(placeHolder);
    tinymce.PluginManager.add('media', function(editor, url) { 
    689702
    690703                // Replaces placeholder images with real elements for video, object, iframe etc
    691704                editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
    692                         var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName;
     705            var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName,
     706                realElmClass, alignClass;
    693707
    694708                        while (i--) {
    695709                                node = nodes[i];
    tinymce.PluginManager.add('media', function(editor, url) { 
    736750                                        realElm.append(innerNode);
    737751                                }
    738752
     753                if(realElmName == 'iframe' && undefined !== node.attr('class') ){
     754                    var classes = node.attr('class').trim().split(' ');
     755                    alignClass = editor.findAlignClass(classes);
     756
     757                    if(alignClass != ''){
     758                        realElmClass = realElm.attr('class');
     759
     760                        if(alignClass == 'alignnone'){
     761                            // remove align class if alignnone is detected
     762                            realElm.attr( 'class' , null );
     763                        }else{
     764                            realElm.attr( 'class', alignClass.trim() );
     765                        }
     766                    }
     767
     768                }
     769
    739770                                node.replace(realElm);
    740771                        }
    741772                });
    tinymce.PluginManager.add('media', function(editor, url) { 
    779810                context: 'insert',
    780811                prependToContext: true
    781812        });
     813
     814    editor.findAlignClass = function(classes){
     815        var j, k, alignClasses = ['alignnone', 'aligncenter', 'alignleft', 'alignright'];
     816
     817        for( j = classes.length; j > 0; j-- ){
     818            // loop backward because editor add align classes in the end of the class string
     819            // ensures only one iteration
     820
     821            for ( k = 0; k < alignClasses.length; k++){
     822
     823                if(classes[j - 1] == alignClasses[k]){
     824                    return alignClasses[k];
     825                }
     826
     827            }
     828
     829        }
     830
     831        return '';
     832    };
     833
    782834});