Here are a couple of plugins WeGoAll created so that our clients could easily insert YouTube videos and Yahoo Maps into their websites using the Rich Text Editor from the Yahoo User Interface. The code can be found below, or in the source. Read the full article here
Just copy and paste this code below your text editor code.
<style type="text/css">
.yui-skin-sam .yui-toolbar-container .yui-toolbar-youTube span.yui-toolbar-icon {
background-image: url(your image's url.gif);
background-position: 1px 0px;
}
</style>
...
var myEditor = new YAHOO.widget.Editor('full_editor', {
height: '300px', width: '530px', dompath: true
});
myEditor.on('toolbarLoaded', function() {
var youTubeMovie = {
showDlg : false,
dlg : null,
dialog_config : { width: '400px', height: 'auto', fixedcenter: true, constraintoviewport: true, visible: false, draggable: false, modal: true },
handleCancel : function() {
this.cancel();
youTubeMovie.showDlg = false;
},
handleSubmit : function() {
if (!this.getData().ymovie) return false;
youTubeMovie.showDlg = false;
var fl_url = this.getData().ymovie.match(/(youtube).*(v=)([^&]*)/);
fl_url = fl_url[3];
fl_url = "http://www.youtube.com/v/" + fl_url;
var html = '<br><br><div style="margin: auto; text-align: center; background: #eee; width: 425px; height: 350px;"><object width="425" height="350"><param name="movie" value="' + fl_url + '"></param><param name="wmode" value="transparent"></param><embed src="' + fl_url + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></div><br><br>';
myEditor.execCommand('inserthtml', html);
this.cancel();
},
createDialog: function() {
var youtubeEle = document.createElement('div');
youtubeEle.setAttribute('id', 'youTubeDlg');
youtubeEle.innerHTML = '<div class="hd">Insert YouTube Movie</div><divclass="bd"><form name="youTubeForm" class="text"><br/>YouTube Movie URL: <input type="text" name="ymovie" size="30"/><br /></form></div>';
YAHOO.util.Dom.setStyle(youtubeEle, 'visibility', 'hidden');
document.body.appendChild(youtubeEle);
youTubeMovie.dlg = new YAHOO.widget.Dialog(youtubeEle, youTubeMovie.dialog_config);
youTubeMovie.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:youTubeMovie.handleSubmit, isDefault:true }, { text:"Cancel", handler:youTubeMovie.handleCancel } ]);
youTubeMovie.dlg.render(document.body);
},
toggle : function() {
youTubeMovie.showDlg = !youTubeMovie.showDlg;
if (youTubeMovie.showDlg) {
youTubeMovie.dlg.show();
} else {
youTubeMovie.dlg.hide();
}
}
};
myEditor.toolbar.addButtonToGroup({ type: 'push', label: 'Insert YouTube movie', value: 'youTube' }, 'insertitem');
myEditor.toolbar.on('youTubeClick', function() {
youTubeMovie.toggle();
});
youTubeMovie.createDialog();
});
You'll need to call the yahooMapsScan() function on any pages that might have a Yahoo Map on them. This function just turns a normal div with the class name "yahooMap" into an Ajax Yahoo Map. You also need to include the Yahoo Maps javascript file and set your application ID. More information can be found here.
// Make sure you include the dragdrop.js file
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
// Set your Yahoo Maps API id
<script type="text/javascript">YMAPPID='set your API ID here';</script>
// Include the core Yahoo Maps script that wont re-define YUI controls
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_4_1_5.js"></script>
<style type="text/css">
.yui-skin-sam .yui-toolbar-container .yui-toolbar-yahooMaps span.yui-toolbar-icon {
background-image: url(your image's url.gif);
background-position: 1px 0px;
}
</style>
// Yahoo! Maps
var yahooMapsScan = function(e) {
var mapEle = YAHOO.util.Dom.getElementsByClassName('yahooMap'), mapElement;
if (mapEle) {
for (var i = 0; i < mapEle.length; ++i) {
mapElement = mapEle[i];
var map = new YMap(mapElement), address = mapElement.getAttribute('address'), zoom = mapElement.getAttribute('zoom');
map.addTypeControl();
map.addZoomLong();
map.setMapType(YAHOO_MAP_REG);
map.drawZoomAndCenter(address, zoom);
YEvent.Capture(map, EventsList.onEndGeoCode, function() { map.addMarker(map.getCenterLatLon()); });
}
}
};
myEditor.on('toolbarLoaded', function() {
var yahooMaps = {
showDlg : false, dlg : null,
dialog_config : { width: '300px', height: 'auto', fixedcenter: true, constraintoviewport: true, visible: false, draggable: false, modal: true },
handleCancel : function() {
// If the user clicked cancel in the dialog, then hide the dialog
this.cancel();
yahooMaps.showDlg = false;
},
handleSubmit : function() {
// If the user clicked submit, then insert the YouTube HTML into the editor
if (!this.getData().street && !this.getData().city && !this.getData().state && !this.getData().zip && !this.getData().country) return false;
yahooMaps.showDlg = false;
var street = this.getData().street,
city = this.getData().city,
state = this.getData().state,
zip = this.getData().zip,
country = this.getData().country,
address = '';
if (street) address += street;
if (city) address += ',' + city;
if (state) address += ',' + state;
if (zip) address += ',' + zip;
if (country) address += ',' + country;
// Create the HTML code to insert the map into the editor
var html = '<br><br><div class="yahooMap" address="' + address + '" zoom="3" style="margin: auto; text-align: center; background: #eee; width: 425px; height: 350px;"> </div><br><br>';
// Insert the html into the editor
myEditor.execCommand('inserthtml', html);
// Hide the dialog
this.cancel();
},
createDialog: function() {
// Create the container element for the dialog
var yahoomapsEle = document.createElement('div');
yahoomapsEle.setAttribute('id', 'youTubeDlg');
yahoomapsEle.innerHTML = '<div class="hd">Insert Yahoo Map</div><div class="bd"><form name="mapForm" class="text"><table><tr><td>Street</td><td><input type="text" name="street" /></td></tr><tr><td>City</td><td><input type="text" name="city" /></td></tr><tr><td>State</td><td><input type="text" name="state" /></td></tr><tr><td>Zip</td><td><input type="text" name="zip" /></td></tr><tr><td>Country</td><td><input type="text" name="country" /></td></tr></table></form></div>';
YAHOO.util.Dom.setStyle(yahoomapsEle, 'visibility', 'hidden');
document.body.appendChild(yahoomapsEle);
// Create the dialog
yahooMaps.dlg = new YAHOO.widget.Dialog(yahoomapsEle, yahooMaps.dialog_config);
yahooMaps.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:yahooMaps.handleSubmit, isDefault:true }, { text:"Cancel", handler:yahooMaps.handleCancel } ]);
yahooMaps.dlg.render(document.body);
},
toggle : function() {
// Show/Hide the YouTube dialog
yahooMaps.showDlg = !yahooMaps.showDlg;
if (yahooMaps.showDlg) {
yahooMaps.dlg.show();
} else {
yahooMaps.dlg.hide();
}
}
};
// Add the Yahoo Maps button to the editor's toolbar in the Insert Item group
myEditor.toolbar.addButtonToGroup({ type: 'push', label: 'Insert Yahoo Map', value: 'yahooMaps' }, 'insertitem');
// When the user clicks the button, then run this function
myEditor.toolbar.on('yahooMapsClick', function() {
yahooMaps.toggle();
});
// Create the dialog that allows the user to enter the map address
yahooMaps.createDialog();
});
WeGoAll creates interactive fraternity and sorority websites and database management tools that will professionally present chapters online, help to facilitate internal chapter communication between members and alumni, help improve communication with potential new members, and improve alumni donations.