sandbox/loader/2in3_rte.html

	2in3_rte.html revision e371fe50702011b7021c8d79181e88184c23448b
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<html debug="true">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<head>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<style type="text/css">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Lucebody {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce	margin:0;
841179549b6433e782c164a562eb3422f603533dAndreas Gustafsson	padding:0;
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson}
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</style>
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson<style id="overrides">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    .yui-skin-sam .yui-toolbar-container .yui-toolbar-flickr span.yui-toolbar-icon {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        background-image: url( /yui2-docs/templates/examples/editor/assets/flickr_default.gif );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        background-position: 1px 0px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        left: 5px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    .yui-skin-sam .yui-toolbar-container .yui-toolbar-flickr-selected span.yui-toolbar-icon {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        background-image: url( /yui2-docs/templates/examples/editor/assets/flickr_active.gif );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        background-position: 1px 0px;
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson        left: 5px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            overflow: hidden;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            visibility: hidden;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            text-align: left;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 .bd {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            border:1px solid #808080;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            border-left: none;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            background-color: #F2F2F2;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            height: 95%;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            overflow: hidden;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            width: 249px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            margin-top: 10px;
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson            padding-left: .25em;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 ul {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            list-style-type: none;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 ul li {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            margin: 0;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            padding: 0;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            float:left;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            display:inline;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 .bd h2 {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            font-size: 120%;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            font-weight: bold;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            margin: 0.5em 0;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            color: #000;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            border: none;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 img {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            margin: 0 .5em;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            border:1px solid #808080;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            height: 50px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            width: 50px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #flickr_results {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            height: 75%;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            overflow: auto;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            position:static;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #flickr_results p {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            padding: .5em;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            margin-bottom: 1em;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #flickr_results div.yui-ac-content {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            width: 225px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        .yui-skin-sam .yui-ac-input {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            position: static;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            width: 12em;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 .tip {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            display:block;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            font-size:85%;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            margin:0.5em;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            padding-left:23px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            position:relative;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            text-align:left;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        #gutter1 .tip span.icon-info {
4e99bcb0603f3270ff89323d149a1fbc668e7da0Andreas Gustafsson            background-position:-106px -32px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            background-image:url(/yui2-docs/templates/examples/editor/css/sprite.png);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            background-position:-84px -32px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            display:block;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            height:20px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            left:0pt;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            position:absolute;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            top:0pt;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            width:20px;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</style>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<style>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce.yui-toolbar-group-insertitem {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    *width: auto;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce}
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</style>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<title>use('yui2-rte') and then get dependencies</title>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<!--
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<script src="/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce-->
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<script src="http://yui.yahooapis.com/3.1.0pr2/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<script type="text/javascript" charset="utf-8">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceYUI({
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    insertBefore: 'overrides',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    combine: true // running locally, so I need to force combo handling
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    // gallery: 'gallery-2010.02.22-22'
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce}).use('yui2-animation', 'yui2-connection', 'yui2-autocomplete', 'yui2-editor', function (Y) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    var YAHOO = Y.YUI2;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce(function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    var Dom = YAHOO.util.Dom,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        Event = YAHOO.util.Event;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    YAHOO.gutter = function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        return {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            status: false,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            gutter: null,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            createGutter: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                YAHOO.log('Creating gutter (#gutter1)', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter = new YAHOO.widget.Overlay('gutter1', {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    height: '425px',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    width: '300px',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    context: [myEditor.get('element_cont').get('element'), 'tl', 'tr'],
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    position: 'absolute',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    visible: false
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                });
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter.hideEvent.subscribe(function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    myEditor.toolbar.deselectButton('flickr');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    Dom.setStyle('gutter1', 'visibility', 'visible');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    var anim = new YAHOO.util.Anim('gutter1', {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        width: {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            from: 300,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            to: 0
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson                        },
4e99bcb0603f3270ff89323d149a1fbc668e7da0Andreas Gustafsson                        opacity: {
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson                            from: 1,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            to: 0
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    }, 1);
aeb8fffc841865c3336383eadfd9987332a03286Andreas Gustafsson                    anim.onComplete.subscribe(function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        Dom.setStyle('gutter1', 'visibility', 'hidden');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    });
fcc9f7f86c2fa2ceb8a5c16dc934fea7fa6887f2Andreas Gustafsson                    anim.animate();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                }, this, true);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter.showEvent.subscribe(function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    myEditor.toolbar.selectButton('flickr');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    this.gutter.cfg.setProperty('context', [myEditor.get('element_cont').get('element'), 'tl', 'tr']);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    Dom.setStyle(this.gutter.element, 'width', '0px');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    var anim = new YAHOO.util.Anim('gutter1', {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        width: {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            from: 0,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            to: 300
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        },
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        opacity: {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            from: 0,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                            to: 1
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    }, 1);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    anim.animate();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                }, this, true);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                var warn = '';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                if (myEditor.browser.webkit || myEditor.browser.opera) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    warn = myEditor.STR_IMAGE_COPY;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter.setBody('<h2>Flickr Image Search</h2><label for="flikr_search">Tag:</label><input type="text" value="" id="flickr_search"><div id="flickr_results"><p>Enter flickr tags into the box above, separated by commas. Be patient, this example my take a few seconds to get the images..</p></div>' + warn);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter.render(document.body);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            },
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            open: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                Dom.get('flickr_search').value = '';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                YAHOO.log('Show Gutter', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter.show();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.status = true;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            },
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            close: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                YAHOO.log('Close Gutter', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.gutter.hide();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.status = false;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            },
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            toggle: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                if (this.status) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    this.close();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                } else {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    this.open();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
5f09ce124cad9712a9675f17f83ddc915e734909Andreas Gustafsson})();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
5f09ce124cad9712a9675f17f83ddc915e734909Andreas GustafssonYAHOO.util.Event.onAvailable('flickr_search', function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    YAHOO.log('onAvailable: #flickr_search', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    YAHOO.util.Event.on('flickr_results', 'mousedown', function(ev) {
5f09ce124cad9712a9675f17f83ddc915e734909Andreas Gustafsson        YAHOO.util.Event.stopEvent(ev);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var tar = YAHOO.util.Event.getTarget(ev);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        if (tar.tagName.toLowerCase() == 'img') {
c71787bd6356c92e9c7d0a174cd63ab17fcf34c6Eric Luce            if (tar.getAttribute('fullimage', 2)) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                YAHOO.log('Found an image, insert it..', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                var img = tar.getAttribute('fullimage', 2),
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    title = tar.getAttribute('fulltitle'),
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    owner = tar.getAttribute('fullowner'),
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                    url = tar.getAttribute('fullurl');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce                this.toolbar.fireEvent('flickrClick', { type: 'flickrClick', img: img, title: title, owner: owner, url: url });
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    }, myEditor, true);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    YAHOO.log('Create the Auto Complete Control', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oACDS = new YAHOO.widget.DS_XHR("/yui2-docs/templates/examples/editor/assets/flickr_proxy.php",
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        ["photo", "title", "id", "owner", "secret", "server"]);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oACDS.scriptQueryParam = "tags";
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oACDS.maxCacheEntries = 0;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oACDS.scriptQueryAppend = "method=flickr.photos.search";
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    // Instantiate AutoComplete
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oAutoComp = new YAHOO.widget.AutoComplete('flickr_search','flickr_results', oACDS);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oAutoComp.autoHighlight = false;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oAutoComp.alwaysShowContainer = true;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    oAutoComp.formatResult = function(oResultItem, sQuery) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        // This was defined by the schema array of the data source
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson        var sTitle = oResultItem[0];
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson        var sId = oResultItem[1];
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson        var sOwner = oResultItem[2];
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var sSecret = oResultItem[3];
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var sServer = oResultItem[4];
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var urlPart = 'http:/'+'/static.flickr.com/' + sServer + '/' + sId + '_' + sSecret;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var sUrl = urlPart + '_s.jpg';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var lUrl = urlPart + '_m.jpg';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var fUrl = 'http:/'+'/www.flickr.com/photos/' + sOwner + '/' + sId;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        var sMarkup = '<img src="' + sUrl + '" fullimage="' + lUrl + '" fulltitle="' + sTitle + '" fullid="' + sOwner + '" fullurl="' + fUrl + '" class="yui-ac-flickrImg" title="Click to add this image to the editor"><br>';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        return (sMarkup);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    };
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce});
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Lucevar gutter = null;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Lucevar myConfig = {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    height: '300px',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    width: '600px',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    animate: true,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    dompath: true,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    focusAtStart: true
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce};
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceYAHOO.log('Editor loaded..', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Lucevar myEditor = new YAHOO.widget.Editor('editor', myConfig);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LucemyEditor.on('toolbarLoaded', function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    YAHOO.log('Toolbar loaded, add button and create gutter', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    gutter = new YAHOO.gutter();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    var flickrConfig = {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            type: 'push',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            label: 'Insert Flickr Image',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            value: 'flickr'
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    myEditor.toolbar.addButtonToGroup(flickrConfig, 'insertitem');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    myEditor.toolbar.on('flickrClick', function(ev) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        YAHOO.log('flickrClick: ' + YAHOO.lang.dump(ev), 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        this._focusWindow();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        if (ev && ev.img) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            YAHOO.log('We have an image, insert it', 'info', 'example');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            //To abide by the Flickr TOS, we need to link back to the image that we just inserted
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            var html = '<a href="' + ev.url + '"><img src="' + ev.img + '" title="' + ev.title + '"></a>';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce            this.execCommand('inserthtml', html);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        }
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce        gutter.toggle();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    }, myEditor, true);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce    gutter.createGutter();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce});
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LucemyEditor.render();
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce});
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</script>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</head>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<body class="yui-skin-sam">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<form method="post" action="#" id="form1">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce<textarea id="editor" name="editor" rows="20" cols="75">
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceThis is some more test text. <font face="Times New Roman">This is some more test text. This is some more <b>test <i>text</i></b></font>. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</textarea>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</form>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</body>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce</html>
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce