need help

[dan]

We bought your dll Telerik.Web.UI

I am trying to use the editor in my web project but I have few issues

I am loading your dll dynamic just when I need it.

I have access to the editor object but I can't influence the appearances (.css) mainly direction the images in the side of the editor r backward

How can I do this I didn’t find away?

Ander issue I am trying to use (for example) the image manger button

I add to my web.config

<add verb="*" validate="false" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI"/>

Like in your support doc

First of all what is the smart tag that u kip mention

Second how I can config the viewpate upload pate …

[Nikolay Raykov]

Hi Dan,

There is an online demo for Right To Left support where you can see how to change the appearance of RadEditor and its dialogs:

http://demos.telerik.com/aspnet-ajax/Editor/Examples/RightToLeft/DefaultCS.aspx

The Smart Tag is a standard Design Mode tool that is used to visually edit a particular control. You could easily add the necessary web.config settings without writing them manually - you need such settings for the editor dialogs and the Spell Checker to work.

The Image Manager can be configured declaratively and programmatically. Here you could find more information on both ways:

http://www.telerik.com/help/aspnet-ajax/images.html

You need to make sure that you have sufficient rights to read/write the folders that you set. After you have granted these permissions you can start using the Image Manager.

Sincerely yours,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[dan]

Thanks

I managed with the old problem I have a new one, I have a problem with the InsertEmoticon

This is my code:

main.Tools.Add(new EditorDropDown("InsertEmoticon"));

 

                Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "smile",

                        " <script type=\"text/javascript\">" +

                        " //<![CDATA[" +

                        " Telerik.Web.UI.Editor.CommandList[\"InsertEmoticon\"] = function(commandName, editor, args)" +

                        " {" +

                        "    var myCallbackFunction = function(sender, args)" +

                        " {" +

                        "    editor.pasteHtml(String.format(\"<img src='{0}' border='0' align='middle' alt='emoticon' /> \", args.image));" +

                        " }" +

                        " editor.showDialog(\"InsertEmoticon\", {}, myCallbackFunction);" +

                        " };" +

                        " //]]>" +

                        "</script>");

 

                DialogDefinition insertEmoticonDialogDefinition = new DialogDefinition("~/pages/InsertEmoticon.ascx", new DialogParameters());

 

                insertEmoticonDialogDefinition.Modal = true;

                insertEmoticonDialogDefinition.VisibleTitlebar = true;

                insertEmoticonDialogDefinition.VisibleStatusbar = true;

                insertEmoticonDialogDefinition.Width = Unit.Pixel(400);

                insertEmoticonDialogDefinition.Height = Unit.Pixel(245);

                insertEmoticonDialogDefinition.VisibleStatusbar = false;

                insertEmoticonDialogDefinition.Title = "Insert Smiley";

 

                editor.AddDialogDefinition("InsertEmoticon", insertEmoticonDialogDefinition);

I have the InsertEmoticon.ascx from your example and the images but I still can't see them

And can't pick them

Please advice

 

[Tsvetie]

Hi Dan,
I suppose you have an older version of our online demos, because the current version of our CustomDialogs demos, uses ASPX , not ASCX files. I would recommend that you review and use the approach, demonstrated with the latest version of the example.

Apart from that, you have to make the following modifications to your code:

1. Use RegisterStartupScript instead of RegisterClientScriptBlock.
2. Remove the comment from your javascript and add a semi-colon after the definition of your myCallbackFunction. You need this, because the code is rendered on the client as a single line of code:

    

   <script type="text/javascript"> //<![CDATA[ Telerik.Web.UI.Editor.CommandList["InsertEmoticon"] = function(commandName, editor, args) {    var myCallbackFunction = function(sender, args) {    editor.pasteHtml(String.format("<img src='{0}' border='0' align='middle' alt='emoticon' /> ", args.image)); } editor.showDialog("InsertEmoticon", {}, myCallbackFunction); }; //]]></script>

    

   For example:

   Page.ClientScript.RegisterStartupScript(Page.GetType(), "smile",
               " <script type=\"text/javascript\">" +
               " Telerik.Web.UI.Editor.CommandList[\"InsertEmoticon\"] = function(commandName, editor, args)" +
               " {" +
               "    var myCallbackFunction = function(sender, args)" +
               " {" +
               "    editor.pasteHtml(String.format(\"<img src='{0}' border='0' align='middle' alt='emoticon' /> \", args.image));" +
               " };" +
               " editor.showDialog(\"InsertEmoticon\", {}, myCallbackFunction);" +
               " };" +
               "</script>");

3. In order to add a new Editor tool, you have to use the following syntax:

    

   main.Tools.Add(new EditorTool("InsertEmoticon"));

   In case you prefer to use a new EditorDropDown, you will have to use the approach, demonstrated in our Custom Tools demo in order to add the items for your EditorDropDown tool:

    

   <telerik:EditorDropDown Name="Emoticons" Text="Emoticons" ItemsPerRow="3" PopupWidth="90px" PopupHeight="90px">
       <telerik:EditorDropDownItem Name ="<img src='./Emoticons/smil1.gif' />" value="./Emoticons/smil1.gif" />
       <telerik:EditorDropDownItem Name ="<img src='./Emoticons/smil2.gif' />" value="./Emoticons/smil2.gif" />
   ...

   or:

    

   EditorDropDown myTool = new EditorDropDown("InsertEmoticon");
   myTool.Items.Add(new EditorDropDownItem("<img src='./Emoticons/smil1.gif' />", "./Emoticons/smil1.gif"));
   myTool.Items.Add(new EditorDropDownItem("<img src='./Emoticons/smil2.gif' />", "./Emoticons/smil2.gif"));
   main.Tools.Add(myTool);

   as the EditorDropDown tool does not open a dialog. You will additionally have to use the OnClientCommandExecuting client method of the editor to paste the emotion image and not the Telerik.Web.UI.Editor.CommandList array. This is also demonstrated in the Custom Tools demo:

   function OnClientCommandExecuting(editor, args)
   {
       var name = args.get_name();
       var val = args.get_value();
       if (name == "InsertEmoticon")
       {
           editor.pasteHtml("<img src='" + val + "'>");
           //Cancel the further execution of the command as such a command does not exist in the editor command list
           args.set_cancel(true);
       }
   }

In case you still have problems implementing the InsertEmoticon tool, please send us your code, demonstrating the problems you face and we do our best to help. Also, please specify what kind of tool you want to create.

Best wishes,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[dan]

Thank you very much on your reply

I am trying to add drop down tool for the Emoticon

I tried all your examples but still I didn’t success to cutch the event OnClientCommandExecuting

I am trying to it in the sever side.

This is my code please help me understand what I am doing wrong 

 

Page.ClientScript.RegisterStartupScript(Page.GetType(),

"InsertEmoticon", 

 

" <script type=\"text/javascript\">" +  

 

 

 

" function OnClientCommandExecuting(editor, args) " + 

 

" { " +  

 

 

 

" var name = args.get_name(); " + 

 

" var val = args.get_value();" +  

 

 

 

" if (name == \"InsertEmoticon\")" + 

 

" { " +  

 

 

 

" editor.pasteHtml(\"<img src='\" + val + \"'>\");" + 

 

" //Cancel the further execution of the command as such a command does not exist in the editor command list " +  

 

 

 

" args.set_cancel(true);" + 

 

" }"+ 

 

 

 

"}"+  

 

"</script>");  

 

 

EditorDropDown InsertEmoticon = new EditorDropDown("InsertEmoticon");

 

InsertEmoticon.Items.Add(

 

new EditorDropDownItem("<IMG SRC='pages/emoticons/21.gif' />", "pages//emoticons/icon_wink.gif"));

 

main.Tools.Add(InsertEmoticon);

 

 

 

In addition I am trying to change the .css of the editor

Like this

EditorCssFile cssfile = new EditorCssFile(Context.Server.MapPath("~/themes/yafvision/rtl.css"));

editor.CssFiles.Clear();

editor.CssFiles.Add(cssfile);

what is the correct way of doing this

[Nikolay Raykov]

Hi Dan,

You need to set the javascript function to the OnClientCommandExecuting property of RadEditor. This way your event handler function will be called when you choose an emoticon from your drop down list:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
            </telerik:RadEditor>

I made an example page where I did minor changes to your code because there was an error in the javascript code you were registering. Please find the attached example page - you could use it as a reference. This is the code in Page_Load that you need:

protected void Page_Load(object sender, EventArgs e)
    {
        string script = "function OnClientCommandExecuting(editor, args){" +
            "var name = args.get_name();" +
            "var val = args.get_value();" +
            "if (name == 'InsertEmoticon'){" +
            "editor.pasteHtml('<img src=\"' + val + '\"/>');" +
            "args.set_cancel(true);" +
            "}" +
            "}";
        Page.ClientScript.RegisterStartupScript(this.GetType(), "InsertEmoticon", script, true);

        EditorToolGroup main = new EditorToolGroup();
        RadEditor1.Tools.Add(main);

        EditorDropDown InsertEmoticon = new EditorDropDown("InsertEmoticon");
        InsertEmoticon.Items.Add(new EditorDropDownItem("<IMG SRC='pages/emoticons/21.gif' />", "pages//emoticons/icon_wink.gif"));
        main.Tools.Add(InsertEmoticon);
    }

Regarding your second question "I am trying to change the .css of the editor" - you could accomplish this by using the code you provided. You could specify external CSS files both programmatically and declaratively.

Sincerely yours,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.