Skip to content

Instantly share code, notes, and snippets.

@JoshCheek
Created June 29, 2010 05:06
Show Gist options
  • Save JoshCheek/456813 to your computer and use it in GitHub Desktop.
Save JoshCheek/456813 to your computer and use it in GitHub Desktop.
Code snippets to help resolve an issue where my popup window can't find my YUI RTE editor from the opening page
// definition of the editor
YAHOO.widget.Logger.enableBrowserConsole();
var myEditor = new YAHOO.widget.Editor('wysiwyg', {
height: '300px' ,
width: '100%' ,
dompath: false ,
animate: true ,
handleSubmit: true ,
collapse: false ,
toolbar: {
buttons: [
{ group: 'parastyle', label: 'Paragraph Style',
buttons: [
{ type: 'select', label: 'Normal', value: 'heading', disabled: true,
menu: [
{ text: 'Normal', value: 'none', checked: true },
{ text: 'Header 1', value: 'h1' },
{ text: 'Header 2', value: 'h2' },
{ text: 'Header 3', value: 'h3' },
{ text: 'Header 4', value: 'h4' },
{ text: 'Header 5', value: 'h5' },
{ text: 'Header 6', value: 'h6' }
]
}
]
},
{ type: 'separator' },
{ group: 'textstyle', label: 'Font Style',
buttons: [
{ type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
{ type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
{ type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' },
]
},
{ type: 'separator' },
{ group: 'indentlist', label: 'Indenting',
buttons: [
{ type: 'push', label: 'Indent', value: 'indent', disabled: true },
{ type: 'push', label: 'Outdent', value: 'outdent', disabled: true },
]
},
{ type: 'separator' },
{ group: 'indentlist', label: 'Lists',
buttons: [
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' }
]
},
{ type: 'separator' },
{ group: 'alignment', label: 'Alignment',
buttons: [
{ type: 'push', label: 'Align Left CTRL + SHIFT + [', value: 'justifyleft' },
{ type: 'push', label: 'Align Center CTRL + SHIFT + |', value: 'justifycenter' },
{ type: 'push', label: 'Align Right CTRL + SHIFT + ]', value: 'justifyright' },
{ type: 'push', label: 'Justify', value: 'justifyfull' }
]
},
{ type: 'separator' },
{ group: 'insertitem', label: 'Insert Item',
buttons: [
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
{ type: 'push', label: 'Insert Image', value: 'insertimage' }
]
}
]
}
});
// the code to add the button that pulls up the window that should insert
// a link to one of the public downloads that they have placed on their site
// Adds a button to get our public downloads and insert them into th eeditor
function yuiPublicDownloads( rte , editor_name , list_url ) {
// Use the toolbarLoaded Custom Event; when that event fires, we will execute a function that adds our custom button:
rte.on('toolbarLoaded', function() {
// Simple button config
var button = {
type: 'push',
label: 'Insert Download',
value: 'download',
disabled: false
};
// Add the button to the toolbar; "this" refers to myEditor, our RTE instance:
this.toolbar.addButtonToGroup( button , 'insertitem' , 'insertdownload' );
// Now listen for the new buttons click and do something with it. Note that "downloadClick" is an event synthesized for us
// automatically because that's the value we gave our button above:
this.toolbar.on('downloadClick', function(o) {
this.execCommand('inserthtml', '<b>This is the text to insert.</b>');
win = window.open( list_url , 'DOWNLOAD_BROWSER', 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0,status=0');
if (!win) {
//Catch the popup blocker
alert('Please disable your popup blocker!!');
}
} , this , true );
}, rte , true);
}
yuiPublicDownloads( myEditor , 'wysiwyg' , '/downloads/public' );
<!--
The code that defines the popup window (in some state of me trying to figure out what is wrong with it),
it seems to be the line
myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('wysiwyg');
down below that is failing.
-->
<div id="doc" class="yui-t7">
<div id="available_downloads">
<ul>
<% for download in @downloads %>
<li>
<%= download.title %>
</li>
<% end %>
</ul>
</div>
</div>
<script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('wysiwyg');
//Get a reference to the editor on the other page
//Add a listener to the parent of the images
Event.on('available_downloads', 'click', function(ev) {
var tar = Event.getTarget(ev);
//Check to see if we clicked on an image
if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'li')) {
//Focus the editor's window
// myEditor._focusWindow();
//Fire the execCommand for insertimage
myEditor.execCommand('inserthtml', '<b>!!!!!!!!!!!!!!!!!!!!!!.</b>');
//Close this window
window.close();
}
});
//Internet Explorer will throw this window to the back, this brings it to the front on load
Event.on(window, 'load', function() {
window.focus();
});
})();
</script>
<!-- Javascript Links -->
<!-- YUI FILES -->
<!-- Skin CSS file -->
<link href='http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css' rel='stylesheet' type='text/css' />
<!-- Utility Dependencies -->
<script src='http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'></script>
<script src='http://yui.yahooapis.com/2.7.0/build/element/element-min.js' type='text/javascript'></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src='http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js'></script>
<script src='http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js'></script>
<script src='http://yui.yahooapis.com/2.7.0/build/button/button-min.js'></script>
<!-- Source file for Rich Text Editor -->
<script src='http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js'></script>
<script src='http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js'></script>
<script src='http://yui.yahooapis.com/2.7.0/build/logger/logger-min.js' type='text/javascript'></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment