combining 2 yui rte toolbar items

Posted on 2010-01-10
Medium Priority
Last Modified: 2013-11-08
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???

Question by:Johnny
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
LVL 11

Expert Comment

ID: 26280460

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

LVL 11

Accepted Solution

VanHackman earned 2000 total points
ID: 26280483
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

LVL 11

Expert Comment

ID: 26280493
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!

LVL 11

Expert Comment

ID: 26280501

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

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


Author Comment

ID: 26284413
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

Author Closing Comment

ID: 31675283
im speechless thanks
LVL 11

Expert Comment

ID: 26284912
Your Welcome Pern.
Thanks for the points.! =P

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question