This is a migrated thread and some comments may be shown as answers.

Wysiwyg Image problem

1 Answer 53 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Stuart
Top achievements
Rank 1
Stuart asked on 09 Oct 2008, 06:40 AM
Hi

I am using rad dock for a portal site I created but have problems when adding a html image (using rad editor) on the dock itself the image displays but gets squashed to a very small size when i add the image (by default it gets added without setting the width and height constraints) but if i manually go and set the width and height in the html code the image displays correctly.

heres the code that creates my rad dock object

public RadDock CreateDockWidget(Control cont, string title, bool showTitleBar, Guid widgetId, int? height, int? width, string nonadminHandle)  
    {  
        RadDock dock = new RadDock();          
 
        dock.Width = Unit.Percentage(100);  
        dock.Skin = "Telerik";  
        dock.UniqueName = widgetId.ToString();  
        dock.ID = "dock(" + widgetId.ToString() + ")";  
        dock.BackColor = System.Drawing.Color.Transparent;  
        dock.Style["background-color"] = "transparent !important";  
         
 
        dock.Commands.Add(new DockExpandCollapseCommand());          
        dock.Title = title;  
        if (height.HasValue)  
        {  
            dock.Height = Unit.Pixel(int.Parse(height.ToString()));  
        }  
        if(width.HasValue)  
        {  
            dock.Width = Unit.Pixel(int.Parse(width.ToString()));  
             
        }  
        dock.ContentContainer.Controls.Add(cont);  
        dock.DockMode = DockMode.Docked;  
        if (adminEnabled)          
        {  
            dock.DockHandle = DockHandle.TitleBar;  
            dock.AutoPostBack = true;  
        }  
        else 
        {  
            dock.BorderStyle = BorderStyle.None;  
            dock.Style["border-style"] = "none !important";  
            dock.BorderWidth = Unit.Pixel(0);  
            if (nonadminHandle != null)  
            {  
                if (nonadminHandle.Equals("Title"))  
                {  
                    dock.DockHandle = DockHandle.TitleBar;  
                }  
                else if (nonadminHandle.Equals("Grip"))  
                {  
                    dock.DockHandle = DockHandle.Grip;  
                }  
                else 
                {  
                    dock.DockHandle = DockHandle.None;  
                }  
            }  
            else 
            {  
                dock.DockHandle = DockHandle.None;  
            }  
            dock.EnableDrag = false;              
        }  
 
        dock.DockPositionChanged += new DockPositionChangedEventHandler(dock_DockPositionChanged);  
        return dock;  
    } 
but i beleve the quick solution will be if you can mabe provide me with code that will manipilate the editor code to automatically put in the width and height on the img tag then the image is inserted.

Thanx

1 Answer, 1 is accepted

Sort by
0
Stuart
Top achievements
Rank 1
answered on 10 Oct 2008, 01:28 PM
ok managed to fix this one up myself

I changed the ImageManagerDialog to add the width and height properties in to the generated by changing the getResult method in the ImageManager.ascx to this

getResult: function() {  
        if (this._previewedImage) {  
            var src = this._currentItem.getUrl();  
            src = encodeURI(src);  
            this._previewedImage.src = src;  
            var returnImage = this._previewedImage.cloneNode(true);  
            returnImage.setAttribute("alt"this._altText.value);  
       
            returnImage.style.cssText = "width:"+returnImage.getAttribute("width")+"px; height:"+returnImage.getAttribute("height") + "px";  
            returnImage._events = {};  
              
            returnImage.removeAttribute("height");  
            returnImage.removeAttribute("width");  
            returnImage.removeAttribute("_events");  
            return returnImage;  
        }  
        return null;  
    }, 

then i just added the custom dialogs using the custom dialogs path editor attribute 

ExternalDialogsPath

 

="~/EditorDialogs"

now it sets the width and height by using the style attribute

 

Tags
Dock
Asked by
Stuart
Top achievements
Rank 1
Answers by
Stuart
Top achievements
Rank 1
Share this question
or