CKEditor custom tags plugin

/*
Copyright (c) 2011, Pub-Me CMS - Michal Malenek. All rights reserved.
Custom YouTube plugin for CKEditor by CKSource - Frederico Knabben.
*/

if ( typeof(PubMeCKEDITOR) == "undefined" || PubMeCKEDITOR === null )
{
    var PubMeCKEDITOR = {};
}

(function()
{

    /**
     * Function to test if a value is in an array
     * @author Leward
     */
    function inArray(array, p_val) {
        var l = array.length;
        for(var i = 0; i < l; i++) {
            if(array[i] == p_val) {
                return true;
            }
        }
        return false;
    }

    // name of the plugin
    var pubmePluginName = '_pubme_extratags';

    // definition of custom tags
    var pubmeCustomTags = {
        myvideo : {
            dtd : [ '$empty','$inline','$body','div' ]
        },
        youtube : {
            dtd : [ '$empty','$inline','$body','div' ]
        },
        mymusic : {
            dtd : [ '$empty','$inline','$body','div' ]
        }
    };

    // setttings end

    PubMeCKEDITOR[pubmePluginName] = {
        pluginName : pubmePluginName,
        getLang : function ( editor, pubmeTagName )
        {
            // prevent "lang error"
            if ( !editor.lang.pubme )
                editor.lang.pubme = {};
            if ( !editor.lang.pubme[this.pluginName] )
                editor.lang.pubme[pubmePluginName] = {};
            if ( !editor.lang.pubme[this.pluginName][pubmeTagName] )
                editor.lang.pubme[this.pluginName][pubmeTagName] =
                {
                    fakeObjectTitle : pubmeTagName,
                    mainMenu : pubmeTagName,
                    properties : pubmeTagName
                }
            var tagLang = editor.lang.pubme[ this.pluginName ][ pubmeTagName ];

            // update on hover title
            if ( !editor.lang.fakeobjects[pubmeTagName] )
                editor.lang.fakeobjects[pubmeTagName] = tagLang.fakeObjectTitle;

            return tagLang;
        },
        loadValue : function ( attributes )
        {
            if ( this.id in attributes )
                this.setValue ( attributes [ this.id ] );
        },
        commitValue : function ( attributes )
        {
            attributes [ this.id ] = this.getValue();
        },
        onShow : function( t, editor )
        {
            /**
             * Little fix when handling many custom buttons
             * @author Leward
             */
            tagName = t._.name;

            // Clear previously saved elements.
            t.fakeImage = t.iframeNode = null;

            var fakeImage = t.getSelectedElement();
            if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == tagName )
            {
                // custom tag needs to be parsed using "brutal force" - it is not possible to use inner/outerHTML and getAttributes methods
                // as custom tags are not included in dom for some reason
                // so we simply take the "realelement" string and search for quotes and apostrophes instead
                // We assume the format is <tag arg="something" arg2='something' /> or <tag arg="something" arg2='something'>something</tag>
                t.fakeImage = fakeImage;
                var html = decodeURIComponent( fakeImage.data( 'cke-realelement' ) );
                var attributes = [];

                var i, i1, i2, attribute, attributeValue, useChar;

                i = html.indexOf(" ");
                html = html.substr ( i );

                while ( html.indexOf("=")>=0 )
                {
                    i = html.indexOf("=");
                    attribute = html.substr ( 0, i ).replace(/^\s+|\s+$/g,"");
                    html = html.substr ( i+1 );

                    i = -1;
                    i1 =  html.indexOf("'");
                    i2 =  html.indexOf('"');
                    i3 =  html.indexOf('>');

                    if (i1 >= 0)
                        i = i1;

                    if (i2 >=0 && (i2<i || i<0) )
                        i = i2;

                    if (i3 >=0 && (i3<i || i<0) )
                        html = "";

                    useChar = html.substr ( i, 1 );
                    html = html.substr ( i + 1 );

                    if ( html.indexOf( useChar )>=0 )
                    {
                        i = html.indexOf( useChar );
                        attributeValue = html.substr ( 0, i ).replace(/^\s+|\s+$/g,"");
                        html = html.substr ( i+1 );
                        attributes [ attribute ] = attributeValue;
                    }
                    else
                        html = "";
                }

                t.setupContent( attributes );

            }
        },
        onOk : function( t, editor )
        {
            var attributes = [];
            t.commitContent( attributes );

            var fakeElement = new CKEDITOR.dom.element( tagName );

            for (var i in attributes)
            {
                attributes [ i ] = attributes [ i ].replace(/^\s+|\s+$/g,"");
                if ( ( i == "width" || i == "height" ) && attributes [ i ] != "" )
                {
                    attributes [ i ] = parseInt ( attributes [ i ] );
                    if ( attributes [ i ] <= 0 || isNaN (attributes [ i ]) )
                        attributes [i] = "";
                }

                if ( attributes[i] != "" )
                    fakeElement.setAttribute( i, attributes[i] );
            }

            newFakeImage = editor.createFakeElement( fakeElement, 'cke_' + tagName, tagName, true );

            if ( t.fakeImage )
            {
                newFakeImage.replace( t.fakeImage );
                editor.getSelection().selectElement( newFakeImage );
            }
            else
                editor.insertElement( newFakeImage );

        }
    };

    // extract pubmeCustomTags and update dtd and needed "local" variables
    var pubmeTagNames = [];
    for ( var tagName in pubmeCustomTags )
    {
        // append pubmeTagNames array
        pubmeTagNames.push ( tagName );

        // update custom tage dtd definition
        var dtd = CKEDITOR.dtd;
        var customDtd = pubmeCustomTags[ tagName ].dtd;
        dtd[tagName] = 1;
        for (var i in customDtd)
        {
            dtd[customDtd[i]][tagName] = 1;
        }

    }


    CKEDITOR.plugins.add( pubmePluginName,
    {
        init : function( editor )
        {
            for (var tagIndex in pubmeTagNames)
            {
                pubmeTagName = pubmeTagNames[tagIndex];
                console.log(pubmeTagName);

                var tagLang = PubMeCKEDITOR[pubmePluginName].getLang( editor, pubmeTagName );

                // create new command
                editor.addCommand( pubmeTagName, new CKEDITOR.dialogCommand( pubmeTagName ) );

                //
                var iconImage = this.path + 'images/' + pubmeTagName + '-icon.png';

                // main menu button
                editor.ui.addButton( pubmeTagName,
                    {
                        label : tagLang.mainMenu || pubmeTagName,
                        command : pubmeTagName,
                        icon : iconImage
                    });

                // connect with dialog file
                CKEDITOR.dialog.add( pubmeTagName, this.path + 'dialogs/' + pubmeTagName + '-dialog.js' );

                // If the "menu" plugin is loaded, register the menu items.
                if ( editor.contextMenu )
                {
                    editor.addMenuGroup( pubmeTagName );

                    var newMenuItems = {};
                    newMenuItems[ pubmeTagName ] =
                    {
                        label : tagLang.properties || pubmeTagName,
                        icon : iconImage,
                        command : pubmeTagName,
                        group : pubmeTagName
                    };
                    editor.addMenuItems ( newMenuItems );
                }

                // bind double click to object
                /*editor.on( 'doubleclick', function( evt )
                    {
                        var element = evt.data.element;

                        if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == pubmeTagName )
                            evt.data.dialog = pubmeTagName;
                    });*/

                // register listeners for contextmenu
                /*if ( editor.contextMenu )
                {
                    editor.contextMenu.addListener( function( element, selection )
                        {
                            console.log(element.data( 'cke-real-element-type' ) + ' = ' + tmpTagName);
                            if ( element && element.is( 'img' ) && !element.isReadOnly()
                                    && element.data( 'cke-real-element-type' ) == pubmeTagName )
                                {
                                    var ret = "var ret = { '" + pubmeTagName + "' : CKEDITOR.TRISTATE_OFF };";
                                    eval (ret);
                                    return ret;
                                }
                        });
                }*/

                // add css for replacement image
                editor.addCss(
                    'img.cke_' + pubmeTagName +
                    '{' +
                        'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/' + pubmeTagName + '-placeholder.png' ) + ');' +
                        'background-position: center center;' +
                        'background-repeat: no-repeat;' +
                        'border: 1px solid #a9a9a9;' +
                        'width: 64px;' +
                        'height: 64px;' +
                    '}'
                    );
            }

            // register listener for contextmenu
            if ( editor.contextMenu )
            {
                editor.contextMenu.addListener( function( element, selection )
                {
                    //if ( element && element.is( 'img' ) && !element.isReadOnly() && element.data( 'cke-real-element-type' ) == pubmeTagName )
                    /**
                     * Fix to handle multi custom tags. Indeed pubmeTagName was referencing always the same value
                     * (the last added).
                     * @author Leward
                     */
                    var tagToTest = element.data( 'cke-real-element-type' );
                    if ( element && element.is( 'img' ) && !element.isReadOnly() && inArray(pubmeTagNames, tagToTest) )
                    {
                        //var ret = "var ret = { '" + pubmeTagName + "' : CKEDITOR.TRISTATE_OFF };";
                        var ret = "var ret = { '" + tagToTest + "' : CKEDITOR.TRISTATE_OFF };";
                        eval (ret);
                        return ret;
                    }
                });
            }

            // bind double click to object
            editor.on( 'doubleclick', function( evt )
            {
                var element = evt.data.element;

                //if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == pubmeTagName )
                /**
                 * Fix to handle multi custom tags. Indeed pubmeTagName was referencing always the same value
                 * (the last added).
                 * @author Leward
                 */
                 var tagToTest = element.data( 'cke-real-element-type' );
                 if(element.is( 'img' ) && inArray(pubmeTagNames, tagToTest))
                    evt.data.dialog = tagToTest;
                    //evt.data.dialog = pubmeTagName;
            });
        },

        afterInit : function( editor )
        {

            for (var tagIndex in pubmeTagNames)
            {
                pubmeTagName = pubmeTagNames[tagIndex];

                // Tyto chyby jsou jen pri inicializaci - pokud se zada rucne a pak se to ulozi, je to v databazi OK.
                // TODO  - pridava to divne <p> - chyba je v tom, že fakeImage se normálně formátuje jako obrázek - a ten je inline, tudíž musí být
                // součástí blokového tagu - a ten je defaultně odstavec.
                // TODO - v jadru je bug, ktery pri inicializaci tagy v jednom bloku slouci do jednoho (zobrazi jen prvni, ostatni killne - i iframu)
                //     pozn.: ve skutečnosti to z <tag /><tag /> udělá <tag><tag></tag></tag>!!!
                var dataProcessor = editor.dataProcessor,
                    dataFilter = dataProcessor && dataProcessor.dataFilter;

                if ( dataFilter )
                {
                    var newRules = { elements : {} };
                    newRules.elements[ pubmeTagName ] = function ( element )
                    {
                        var fakeElement = editor.createFakeParserElement( element, 'cke_'+pubmeTagName, pubmeTagName, true );
                        return fakeElement;
                    };

                    dataFilter.addRules( newRules );

                }
            }

        },

        requires : [ 'fakeobjects' ]
    });
})();