[Solved] Adding a new tool via theToolsFile.xml file

[Todd]

I'm new to the Rad Editor tool and read that I should be able to add a new drop down menu to the editor via the ToolsFile.xml file. I'm able to successfully add a new drop down to the editor and populate it with the following code:

<tool name="NewsletterStyles" type="dropdown">
   <item  name="MainHeader" vaule="this is some test text" />
</tool> 

But when I select a value from the newly created dropdown I get the following error "Could not find the command NewsletterStyles please update your command list."

Unless I missed it I didn't see anything about updating the command list in the Telerik demo that I'm trying to follow (http://demos.telerik.com/aspnet-ajax/editor/examples/customdropdowns/defaultcs.aspx) and I'm not sure how to do this. Any help on this would be greatly appreciated.

Thanks
Todd

[Rumen]

Hello Todd,

Please, see the following help article Adding Custom Dropdowns and live demo: Custom Dropdowns.

You will see that you should attach a javascript function to the OnClientCommandExecuting event property of RadEditor, which will give you reference to the selected dropdown item value and RadEditor, e.g.

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
    var name = args.get_name(); //The command name
    var val = args.get_value(); //The tool that initiated the command

    if (name == "NewsletterStyles")
    {                                                                                
        //Paste the selected in the dropdown item
        editor.pasteHtml("<img src='" + val + "'>"); 
        
        //Cancel the further execution of the command
        args.set_cancel(true); 
    }
}
</script>

Please, note that you should cancel the command execution with args.set_cancel(true);
In other case you will get the reported error:  "Could not find the command NewsletterStyles please update your command list."

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Todd]

Hi Rumen,

Thanks for your response. Unfortunatlly I'm still unable to get the drop down to work. I've added the OnClientCommandExecuting="OnClientCommandExecuting" to my RadEditor but for some reason I cannot access the name or value of any of the dropdown items. They keep coming in as null. Which inturn gives me Javascript errors.

Here is the section of my ToolsFile.xml where my new dropdown is created
<tools name="DropdownToolbar" isribbon="false">
 <tool name="FormatBlock"/>
  <tool name="FontName"/>
  <tool name="FontSize"/>
  <tool separator="true"/>
  <tool name="FormatStripper"/>  
  <tool name="ApplyClass"/>
  <tool name="NewsletterStyles" type="dropdown">
     <item name="MainHeader" value="this is some test text" />
  </tool>
  <tool name="InsertCustomLink"/>    
  <tool name="ForeColor"/>
  <tool name="BackColor"/>  
 </tools> 

and here is a section from my .aspx file

<radE:RadEditor ID="radEditor" runat="server" Width="710" Height="160" Skin="Default" Visible="false" OnClientCommandExecuting="OnClientCommandExecuting"></radE:RadEditor>
           
            <script type="text/javascript">
            function OnClientCommandExecuting(editor, args)
            {
               var name = args.name(); //The command name
               var val = args.value(); //The tool that initiated the command

               if (name == "NewsletterStyles")
                {                                                                               
                    //Paste the selected in the dropdown item
                    editor.pasteHtml("<img src='" + val + "'>");
       
                    //Cancel the further execution of the command
                    args.set_cancel(true);
                }
            }
           </script>

Am I missing something simple here?

Todd

[Rumen]

Hello Todd,

I saw that you are using a syntax typical to the syntax of RadEditor Classic, e.g. <radE:RadEditor instead of <telerik:RadEditor. Does this mean that you are using RadEditor Classic which uses the RadEditor.Net2.dll? The new RadEditor for ASP.NET AJAX uses the Telerik.Web.UI.dll.

If you are using the classic version of RadEditor then you should follow the instructions in this help article: Creating a Line Spacing Dropdown.

If you are using the new AJAX version of RadEditor then modify the OnClientCommandExecuting function line this:

<script type="text/javascript">
            function OnClientCommandExecuting(editor, args)
            {
               var name = args.get_commandName(); //modified from args.name()
               var val = args.get_value(); //modified from args.value();

               if (name == "NewsletterStyles")
                {                                                                              
                    //Paste the selected in the dropdown item
                    editor.pasteHtml("<img src='" + val + "'>");
      
                    //Cancel the further execution of the command
                    args.set_cancel(true);
                }
            }
           </script>


Best wishes,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Todd]

Awesome! That works. Thanks so much.

One last issue. Now that I have a reference to the editor I would like to be able to update the selected text from that editor. I'm able to get whatever the selected text is from the editor with the following code.

 var cSelection = editor.GetSelection();
 var theSelectedText = cSelection.GetText();

Is there a way to update only that particular selection in the editor?

Thanks
Todd

[Tervel]

Hi Todd,

The method for updating the current selection (that is, replacing the current selection with new content) was already used in the code sent to you - editor.pasteHtml(newContent)

Using pasteHtml you can insert new (modified) content that will replace the current (selected) content.

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.