Editor-with-Custom-Image-Browser


            



    
Editor with Custom Image Browser

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}
















Editor with Custom Image Browser


  This example will show how to open an "Image Browser" for the YUI Rich Text Editor.

Note: The "Image Browser" window will probably be blocked by your popup blocker.

Now, click on the "Insert Image" icon (the one outlined in blue) to see the "Image Browser" window.




    #msgpost_container span.yui-toolbar-insertimage, #msgpost_container span.yui-toolbar-insertimage span.first-child {
        border-color: blue;
    }

This is a test

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        win = null;
    var myEditor = new YAHOO.widget.Editor('msgpost', {
        height: '300px',
        width: '600px',
        dompath: true, //Turns on the bar at the bottom
        animate: true //Animates the opening, closing and moving of Editor windows
    });
    myEditor.on('toolbarLoaded', function() {
        //When the toolbar is loaded, add a listener to the insertimage button
        this.toolbar.on('insertimageClick', 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('yui_2.7.0b-assets/editor-assets/browser.php', 'IMAGE_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 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('insertimage_url');
        if (url) {
            url.disabled = true;
        }
    }, myEditor, true);
    myEditor.render();
})();





   
   
yui_2.7.0b.zip( 4,431 k)

YUI Library JavaScript DHTML

Editor with Custom Image Browser