Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

combining 2 yui rte toolbar items

im trying to get the yui tre to combine two toolbar icons.
so i can have the normal upload/url insert images and grab images from a directory
and i cant get it to work for beens

i want to add this

to this page
so it does both image toolbar buttons

thank you in advance for any code or help you may provide.
ps: VanHackman: to the rescue???

  • 5
  • 2
1 Solution

Hello Pern,

I write a full code example for you.

You will need 2 files:

-YUI.php : The Editor with the toolbar items combined: upload/url insert images and grab images.
-browser.php: This file is needed for the grab images function.

I test the scripts and work perfectly. The only issue is that you will have to write some css in for the "grab images" button if you want to make it look pretty, because I had to do a little hack in the editor to get the 2 Insert Image tools in the same editor, and the "grab images button" is a custom button and I didn't write a css style for it and is showed just as a grey button.

I will post the scripts code in different post. Just put it in the same folder with the right names and you will see your Editor 100% functional with both Image Upload Tools.. =P

The YUI.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>YUI Editor Example By VanHackman</title>

<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> 
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

<script type="text/css">
background-color: red;


<body class="yui-skin-sam"> 



	<h1 style="color:blue;">You Put the following text on the YUI Editor</h1>
	<p><?php echo stripslashes($_POST['msgpost']); ?></p>




<form action="YUI.php" method="POST">

<textarea name="msgpost" id="msgpost" cols="50" rows="10">
    Write Something here...

<input id="FormSubmit" type="submit" value="Submit" />

<script type="text/javascript">

var myEditor = new YAHOO.widget.Editor('msgpost', {
    height: '300px',
    width: '522px',
    dompath: true, //Turns on the bar at the bottom
    animate: true, //Animates the opening, closing and moving of Editor windows
    toolbar: {
        titlebar: 'My Editor',
        buttons: [
            { group: 'textstyle', label: 'Font Style',
                buttons: [
                    { type: 'push', label: 'Bold', value: 'bold' },
                    { type: 'push', label: 'Italic', value: 'italic' },
                    { type: 'push', label: 'Underline', value: 'underline' },
                    { type: 'separator' },
                    { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                        menu: [
                            { text: 'Arial', checked: true },
                            { text: 'Arial Black' },
                            { text: 'Comic Sans MS' },
                            { text: 'Courier New' },
                            { text: 'Lucida Console' },
                            { text: 'Tahoma' },
                            { text: 'Times New Roman' },
                            { text: 'Trebuchet MS' },
                            { text: 'Verdana' }
                    { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                    { type: 'separator' },
                    { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                    { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true },
					{ type: 'separator' },
			{group: 'ImgageUpload', label: 'Image Upload',
					buttons: [
					{ type: 'push', label: 'Insert Image', value: 'insertimage' },
					{ type: 'push', label: 'Grab Image', value: 'ImgCustom', },

myEditor.on('toolbarLoaded', function() {
        //When the toolbar is loaded, add a listener to the insertimage button
        this.toolbar.on('ImgCustomClick', function() {
            //Get the selected element
            var _sel = this._getSelectedElement();
            //If the selected element is an image, do the normal thing so they can manipulate the image
            if (_sel && _sel.tagName && (_sel.tagName.toLowerCase() == 'img')) {
                //Do the normal thing here..
            } else {
                //They don't have a selected image, open the image browser window
                win = window.open('browser.php', 'IMAGE_BROWSER', 
                if (!win) {
                    //Catch the popup blocker
                    alert('Please disable your popup blocker!!');
                //This is important.. Return false here to not fire the rest of the listeners
                return false;
        }, this, true);
    }, myEditor, true);
    myEditor.on('afterOpenWindow', function() {
        //When the window opens, disable the url of the image so they can't change it
        var url = Dom.get(myEditor.get('id') + '_insertimage_url');
        if (url) {
            url.disabled = true;
    }, myEditor, true);


//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('FormSubmit', 'click', function() {
    //Put the HTML back into the text area

    //The var html will now have the contents of the textarea
    var html = myEditor.get('msgpost').value;


<?php } ?>


Open in new window

The browser.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <title>YUI: Editor Image Browser</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css"> 
    <style type="text/css" media="screen">
    #doc {
        min-width: 500px;
        width: 90%;
    #images p {
        float: left;
        padding: 3px;
        margin: 3px;
        border: 1px solid black;
        height: 100px;
        width: 100px;
        cursor: pointer;
<body class="yui-skin-sam">
<div id="doc" class="yui-t7">
 <p>Click an image to place it in the Editor.</p>

<div id="images">
	<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/yui.jpg" title="Click me"></p>
    <p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg" title="Click me"></p>
    <p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg" title="Click me"></p>
    <p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg" title="Click me"></p>
    <p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg" title="Click me"></p>
    <p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg" title="Click me"></p>
	<p><img src="http://img70.imageshack.us/img70/9414/avatar2th3.jpg" title="VanHackman"></p>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript">
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('msgpost');
        //Get a reference to the editor on the other page
    //Add a listener to the parent of the images
    Event.on('images', 'click', function(ev) {
        var tar = Event.getTarget(ev);
        //Check to see if we clicked on an image
        if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'img')) {
            //Focus the editor's window
            //Fire the execCommand for insertimage
            myEditor.execCommand('insertimage', tar.getAttribute('src', 2));
            //Close this window
    //Internet Explorer will throw this window to the back, this brings it to the front on load
    Event.on(window, 'load', function() {

Open in new window

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Ok, that is all!!... =P

I hope that my answer helps you, and don't forget give some points... =P

JohnnyAuthor Commented:
thats absolutely fantastic
also answered another question i had how to adjust the code so t made a custom toolbar. i didnt understand the way we had it and the javascript(i assume its called) way of getting the rte to display as i wanted to change the titlebar, wow your great.

im not sure how to do the css button text im happy with it being gray for now, ill see about a graphic icon for it. ill see if i can look at the other css imports and see if i can make it if i cant ill open another qusetion.

again thanks
JohnnyAuthor Commented:
im speechless thanks
Your Welcome Pern.
Thanks for the points.! =P

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now