Define custom format option behaviour?

6 posts, 0 answers
  1. Dan Pettersson
    Dan Pettersson avatar
    20 posts
    Member since:
    Sep 2009

    Posted 11 Oct 2010 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 13 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan Pettersson
    Dan Pettersson avatar
    20 posts
    Member since:
    Sep 2009

    Posted 13 Oct 2010 Link to this post

    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;" />
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Dan Pettersson
    Dan Pettersson avatar
    20 posts
    Member since:
    Sep 2009

    Posted 18 Oct 2010 Link to this post

    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
  7. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 21 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017