Toolbar displaying incorrect image for certain buttons

  •  08-13-2008, 4:46 AM

    Toolbar displaying incorrect image for certain buttons

    Hi,
     
    I'm currently working on an implementation of CuteEditor for a web portal.
     
    The context of the editor is that it is placed within a div which, on postback, is either shown or hidden, to mimick popup behaviour (a modal background is implemeneted, but seperately, i.e. we are not using the modal popup extender or anything like that). We are, however, using the toolkit to implement drag and drop on the top bar of the div, resize on the bottom right corner (and there is also a full screen button). The resize behaviour also taps into the CuteEditor API to use its setHeight method while resizing.

    The issue we are having concerns the toolbar icons. Strangely, we are obtaining the wrong image for the correct button (e.g. for the insert image button, we have the flash image, but clicking on it still yields the insert image window and the title when hovering the mouse over the image is correct). I have investigated further and discovered that the problem is only with those which have an imagename="" defined in the .config file, and only some of these are affected. The following is a list of the toolbars which are/aren't affected using the full.config file:
     
     
     
    Save through to Redo - all are fine.
     
    Insert print page break through to embed a youtube video - all the images are wrong. There seems to be no pattern - some are one out, others should belong to a button on the row below.
     
    All table buttons are fine.
     
    Break to page properties - all the images are wrong (from form to page properties all seem to be one image out, the ones before these are again random).
     
    The rest are fine ( Bold through to help and all the drop downs.
     
     
    The problem persists when using other .config files (we are actually using a custom one, but since the problem is in all I thought it easiest to document the problem with the full.config file).
    I have tried a reinstall of CuteEditor but this does not seem to solve the problem. I have tried various themes and the problem seems to persist. Also, interestingly, if I change the name of an affected image in the images folder for the associated theme, it still seems to find that image (even though the imagename="" and the actual name of the image no longer match). Below is a screenshot of our editor instance using the full.config file.
     
     As I say, the full.config file should be "out of the box" as I did a reinstall just to make sure, but for info, I have included the contents of the full.config file below (I have chopped it off after the end of the affected items):
     
     
     <?xml version="1.0" encoding="utf-8" ?>
    <configuration>
        <codeviewToolbars>
            <item type="g_start" />
            <item type="image" name="Save" postback="True" />
            <item type="image" name="Print" />
            <item type="image" name="Find" />
            <item type="image" name="ToFullPage" command="FullPage" imagename="fit" hotkey="F12" />
            <item type="image" name="FromFullPage" command="FullPage" imagename="restore" hotkey="F12" />
            <item type="image" name="Cut" />
            <item type="image" name="Copy" />
            <item type="image" name="Paste" />
            <item type="image" name="SelectAll" hotkey="CTRL+A" />
            <item type="image" name="SelectNone" />
            <item type="g_end" />
        </codeviewToolbars>
        <toolbars>
            <item type="g_start" />
            <item type="image" name="Save" postback="True" />
            <item type="image" name="New" imagename="newdoc" />
            <item type="image" name="Print" />
            <item type="image" name="Preview" imagename="bspreview" />
            <item type="image" name="Find" />
            <item type="image" name="ToFullPage" command="FullPage" imagename="fit" hotkey="F12" />
            <item type="image" name="FromFullPage" command="FullPage" imagename="restore" hotkey="F12" />
            <item type="image" name="CleanCode" imagename="cleanup" />
            <item type="image" name="NetSpell" imagename="spell" />
            <item type="separator" />
            <item type="image" name="Cut" />
            <item type="image" name="Copy" />
            <item type="image" name="Paste" />
            <item type="image" name="PasteText" />
            <item type="image" name="PasteWord" />
            <item type="image" name="PasteAsHTML" />
            <item type="image" name="Delete" />
            <item type="separator" />
            <item type="image" name="Undo" />
            <item type="image" name="Redo" />
            <item type="g_end" />
            <item type="g_start" />
            <item type="image" name="InsertPageBreak" imagename="InsertPageBreak" />
            <item type="image" name="InsertDate" imagename="insertdate" />
            <item type="image" name="InsertTime" imagename="timer" />
            <item type="separator" />
            <item type="image" name="InsertChars" imagename="specialchar" />
            <item type="image" name="InsertEmotion" imagename="emotion" />
            <item type="image" name="UniversalKeyboard" imagename="keyboard" />
            <item type="image" name="BoxFormatting" imagename="box" />
            <item type="image" name="InsertLayer" imagename="layer" />
            <item type="image" name="InsertFieldSet" imagename="groupbox" />
            <item type="separator" />
            <item type="image" name="ImageGalleryByBrowsing" imagename="image" />
            <item type="image" name="InsertImage" imagename="eximage" />
            <item type="image" name="InsertFlash" imagename="flash" />
            <item type="image" name="InsertMedia" imagename="media" />
            <item type="image" name="InsertDocument" imagename="document" />
            <item type="image" name="InsertTemplate" imagename="template" />
            <item type="image" name="YouTube" />
            <item type="g_end" />
            <item type="linebreak" />
            <item type="g_start" />
            <item type="table" />
            <item type="image" name="InsertRowTop" imagename="insrow_t" />
            <item type="image" name="InsertRowBottom" imagename="insrow_b" />
            <item type="image" name="DeleteRow" imagename="delrow" />
            <item type="image" name="InsertColumnLeft" imagename="inscol_l" />
            <item type="image" name="InsertColumnRight" imagename="inscol_r" />
            <item type="image" name="DeleteColumn" imagename="delcol" />
            <item type="image" name="InsertCell" imagename="inscell" />
            <item type="image" name="DeleteCell" imagename="delcell" />
            <item type="image" name="EditRow" imagename="row" />
            <item type="image" name="EditCell" imagename="cell" />
            <item type="image" name="MergeRight" imagename="mrgcell_r" />
            <item type="image" name="MergeBottom" imagename="mrgcell_b" />
            <item type="image" name="HorSplitCell" imagename="spltcell_r" />
            <item type="image" name="VerSplitCell" imagename="spltcell_b" />
            <!-- MergeCell/mrgcell SplitCell/spltcell -->
            <item type="g_end" />
            <item type="g_start" />
            <item type="image" name="Break" />
            <item type="image" name="InsertParagraph" imagename="Paragraph" />
            <item type="image" name="BlockDirLTR" imagename="left_to_right" />
            <item type="image" name="BlockDirRTL" imagename="right_to_left" />
            <item type="g_end" />
            <item type="g_start" />
            <item type="image" name="InsertForm" imagename="Form" />
            <item type="image" name="InsertTextBox" imagename="textarea" />
            <item type="image" name="InsertInputText" imagename="textbox" />
            <item type="image" name="InsertInputPassword" imagename="passwordfield" />
            <item type="image" name="InsertInputhidden" imagename="hiddenfield" />
            <item type="image" name="InsertListBox" imagename="listbox" />
            <item type="image" name="InsertDropDown" imagename="dropdownbox" />
            <item type="image" name="InsertRadioBox" imagename="optionbutton" />
            <item type="image" name="InsertCheckBox" imagename="checkbox" />
            <item type="image" name="InsertInputImage" imagename="imagebutton" />
            <item type="image" name="InsertInputSubmit" imagename="submit" />
            <item type="image" name="InsertInputReset" imagename="Reset" />
            <item type="image" name="InsertInputButton" imagename="pushbutton" />
            <item type="image" name="DocumentPropertyPage" imagename="page" />
            <item type="g_end" />
            <item type="linebreak" />
     
     
     The instance of CuteEditor itself, which is declared as the following:
     
     <CE:Editor ID="ceArticleBody"
                                    runat="server"
                                    Width="100%"
                                    Height="300"
                                    EnableBrowserContextMenu="false"
                                    EnableAntiSpamEmailEncoder="true"
                                    UseStandardDialog="true"
                                    ThemeType="Office2007"
                                    ConfigurationPath="~/CuteSoft_Client/CuteEditor/Configuration/AutoConfigure/Full.config"
                                    ContextMenuMode="Full"
                                    ResizeMode="None">
    </CE:Editor>
     
    The last relevant piece of information I can think to provide is the background-image css property that goes to the client. For the insert image button (which has the flash image in the screenshot above) the background-image comes out as:
     
    url(/CuteSoft_Client/CuteEditor/Load.ashx?type=theme&theme=Office2007&file=all.png)


    Is this a problem which has been encountered before?
    Is there a possible solution based on the above description?
    And if not, could you possibly explain how the images get inserted based on the imagename="" declared in the config file so that I can attempt to track down the problem further.

    Many thanks in advance,


    David Richards (DOCCOM Solutions)
View Complete Thread