Define custom format option behaviour?

[Dan Pettersson]

Hi!
Is there any way to make custom configurations of formatting options in the toolbar?
For example, I would like the existing "Heading 2" (or a completely custom item) cause "Selected text" to be replaced with "<h2><span>Selected text</span></h2>" instead of just "<h2>Selected text</h2>".

Any input on this is appreciated.

/Dan

[Dobromir]

Hi Dan,

It is possible to modify the default execution of FormatBlock command by assigning handler to the ClientCommandExecuting event, e.g.:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="editorCommandExecuting">
</telerik:RadEditor>
<script type="text/javascript">
    function editorCommandExecuting(sender, args)
    {
        if (args.get_commandName() == "FormatBlock")
        {
            args.set_cancel(true);//cancel the default execution
            //add code to imeplement custom execution
        }
    }
</script>

Please note that, the FormatBlock command is very complex. It involves selection modifications, examining the DOM etc. It will be very difficult to modify its output to match the requirements.

If you want to apply text decorations to the inserted heading you can achieve this using the approach demonstrated in the following live demo:
Editor / Paragraph Styles

Kind regards,
Dobromir
the Telerik team

[Dan Pettersson]

Thanks for your reply Dobromir,
Where can I find a reference of what the sender refers to and the args contains in your code sample? For example, does the args object  give me access to the things you say I'll need to manipulate.

Also, for a future version I think it would be useful if the following would be a working configuration in an xml tools file, that would solve my problem where I'm working with a layout that requires different background color on the header element and the text inside the element.
<paragraph name="Heading 2" value="&lt;h2&gt;&lt;span&gt;" />

[Dobromir]

Hi Dan,

In the provided sample code the editorCommandExecuting() function is the RadEditor's OnClientCommandExecuting handler. The sender parameter refers to the RadEditor's client-side object, while args is an instance of Telerik.Web.UI.EditorCommandEventArgs. You can find additional information regarding the parameters of this event handler in the following help article:
OnClientCommandExecuting

In addition, the live demo linked in my last reply demonstrates how to apply different styles to the header elements,e.g:

• Using ToolsFile:
  

  <paragraphs>
      <paragraph name="<H1>Heading 1</H1>" value="<H1>" />
      <paragraph name="<H2 style='font-family: Trebuchet MS; background-color: #foo'>Heading 2</H2>" value="<H2 style='font-family: Trebuchet MS; background-color: #f00'>" />
      <paragraph name="<H3 class='serif'>Heading 3</H3>" value="<H3 class='serif'>" />
  </paragraphs>

Kind regards,
Dobromir
the Telerik team

[Dan Pettersson]

Hello again Dobromir,
I understand that I can define attributes on the H2 tag through the tools file. However, the design I'm working on requires an extra span element inside the H2 to accomplish the design these css rules gives:

h2 { background-color:blue; }
h2 > span { background-color:white; }

Thats why I think a configuration possibility in the tools file like this would offer even more flexibility in a future version. If the value contains two (or more) tags, they both should be closed after the selected text.

<paragraph name="<h2><span>Heading 2</span></h2>" value="<h2><span>" />

I will look into the option of the OnClientCommandExecuting

[Dobromir]

Hi Dan,

Thank you for the clarification regarding the exact scenario. We will consider implementation of the required functionality, but I cannot assure you that it will be implemented. First we need to investigate any possible case that may cause any side effects.

The main problem is the case where multiple heading tags need to be applied - if multiple paragraphs are selected and then the command is executed.

For the time being, I would recommend you to instruct the users to use two command to achieve the required decoration - first use FormatBlock tool to apply the heading, then select the text and apply manually background color of the text using the BackColor tool.

All the best,
Dobromir
the Telerik team