Support forums » Products » Rich Text Editor for .NET and ... » Re: RTE custom dialog skin

RTE custom dialog skin

Last post 08-22-2013, 1:36 PM by Kenneth. 3 replies.
Sort Posts: Previous Next

  •  08-20-2013, 8:56 PM 77874

    RTE custom dialog skin

    Reply Quote

    Hello,

     

    Is it possible to create a custom button for a dialog that will be skinned in the same fashion as any other out-of-the-box dialog? I am specifically referring to the borders of the dialog. Say that you click on the insert video toolbar item, the borders are skinned to that silver color windows vista/7 type skin. If I create my own button, the skin will not be the same and I would have to create custom css to match (a lot of work!)

     

    I would like to override the google map button with my own logic, and so far I have been able to create the custom button with the google map image and custom logic, but the skin is different and it looks off.

     

    Thanks,

    DFree

  •  08-21-2013, 12:15 PM 77876 in reply to 77874

    Re: RTE custom dialog skin

    Reply Quote

    Hi dfree79,

     

    The Rich TextEditor dialogs are generated by our own frame jsml. If you need to use the same style dialog, you can try the way below.

     

    1. Create your own dialog file, for example name it to "mydialog.xml" under \richtexteditor\dialogs\mydialog.xml with the code below.

     

          the code below means use the base dialog settings/styles of rte.

     

                <include src="{folder}dialogs/browsedialogbase.xml?{timems}" />

     

          the code below use to set the custom style and title.

     

                <execute>            dialog.set_back_color("#F9F9F9");            dialog.set_title(editor.GetLangText("custom dialog"));      </execute> 

     

           the code below use to generate a panel by jsml format code. you can use this format to generate the button/text field/dorpdown list etc.

     

                <panel jsml-class="insertimagedialog" jsml-base="browsedialogbase" dock="fill" margin="3">      </panel> 

    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <jsml xmlns="http://cutesoft.net/jsml"  
    3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../core/jsml.xsd">  
    4.   
    5.     <include src="{folder}dialogs/browsedialogbase.xml?{timems}" />  
    6.   
    7.     <execute>  
    8.         dialog.set_back_color("#F9F9F9");  
    9.         dialog.set_title(editor.GetLangText("custom dialog"));  
    10.     </execute>  
    11.   
    12.   
    13.     <!-- # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #   
    14.             class insertimagedialog  
    15.      # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # -->  
    16.     <panel jsml-class="insertimagedialog" jsml-base="browsedialogbase" dock="fill" margin="3">  
    17.     </panel>  
    18. </jsml>  
     

    2. Open the custom dialog by the code below. Method "ShowXmlDialog" use to open the dialog. newoption is the settings of this dialog.

     

    1. var newoption = { width: 640, height: 420 };  
    2.                 newoption.nestedmode = true;  
    3.                 newoption.callback = function () {  
    4.                     self.bubble_event("reloadvalue");  
    5.                 }  
    6.                 editor.ShowXmlDialog(editor.BuildDialogUrl("mydialog.xml"), newoption);  
     

    Regards,

     

    Ken 

  •  08-21-2013, 4:51 PM 77878 in reply to 77876

    Re: RTE custom dialog skin

    Reply Quote

    Hi Kenneth,

     

    This is exactly what I was looking for, thank you!

     

    Is there an event raised once the dialog is loaded (editor.ShowXmlDialog(editor.BuildDialogUrl("mydialog.xml"), newoption);)?

     

    I am going to be injecting some html into the dialog and need to know when.

     

    DFree

     

  •  08-22-2013, 1:36 PM 77883 in reply to 77878

    Re: RTE custom dialog skin

    Reply Quote

    Hi dfree79,

     

    Has not the event to catch the dialog loaded. The open dialog method is defind in \richtexteditor\scripts\editor.js, maybe you can change the code to match your own requirement.

     

    1. this.ShowXmlDialog=function(url,option)  
    2.     {  
    3.         var dialog;  
    4.           
    5.         if(!option)option={}  
    6.   
    7.         var urlhandler=this.delegate(function(res,err)  
    8.         {  
    9.             if(dialog._jsml_disposed)return;  
    10.               
    11.             if(!res)  
    12.             {  
    13.                 setTimeout(function()  
    14.                 {  
    15.                     if(option.callback)option.callback(res,err);  
    16.                 },1);  
    17.                 dialog.close();  
    18.                 return;  
    19.             }  
    20.               
    21.             dialog.attach_event("closing",function()  
    22.             {  
    23.                 if(option.callback)option.callback(dialog.result);  
    24.             });  
    25.               
    26.             dialog.adjustsize();  
    27.               
    28.             if(option.oncontentload)  
    29.                 option.oncontentload(dialog);  
    30.         });  
    31.         var processinst=this.delegate(function(inst){  
    32.             if(dialog._jsml_disposed)  
    33.                 return;  
    34.             dialog.append_child(inst);  
    35.             inst.invoke_recursive("editor_ready",this);  
    36.         });  
    37.               
    38.         var HandleDialog=this.delegate(function(argdialog)  
    39.         {  
    40.             dialog=argdialog;  
    41.             if(option.ondialogload)  
    42.                 option.ondialogload(dialog);  
    43.             var urlgvars={editor:this,dialog:dialog,option:option};  
    44.             var loadDelay=option.loadDelay||0;  
    45.             if(loadDelay<50)loadDelay=50;  
    46.             this._LoadXmlUrl(url,urlhandler,processinst,urlgvars,option.translator,loadDelay);  
    47.         });  
    48.           
    49.         this._LoadDialog(option,HandleDialog);  
    50.     }  
     

    Regards,

     

    Ken 
View as RSS news feed in XML