This is a migrated thread and some comments may be shown as answers.

Custom Paragraphs Style does not match in drop down

1 Answer 11 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mink
Top achievements
Rank 1
Mink asked on 02 May 2019, 11:34 AM

Hello,

I have crated a custom paragraph style. e.g :

  • Definition Term, <dt>

The Problem is when I select/highlight the paragraph wrapped in <dt> tag, the drop down match to "Normal" instead of "Definition Term".

Is this a expected behavior? Is there any way to make the selected item in drop down list to be "Definition Term" while I am selecting the paragraph wrapped in <dt> tag?

 

Thanks and Regards,

Ming Sheng

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 07 May 2019, 09:32 AM
Hi Ming,

The FontName, FontSize, FormatBlock and other dropdown headers are adaptive / sensitive on selection and they are updated depending on the information returned by the browser's queryCommandValue method. It is the browser that returns Heading 6 in the en-US localized browsers and this info is loaded in the FormatBlock dropdown header. If you would like to display another text in the FormatBlock dropdown header then you can use / enhance the code below:

Copy Code
<script type="text/javascript">
function OnClientSelectionChange(editor, args)
{
     var tool = editor.getToolByName("FormatBlock");
    if (tool)
     {
            setTimeout(function()
            {
                var value = tool.get_value();
                //alert(value);
                switch(value)
                {
                case "Heading 6":
                  value = value.replace("Heading 6""Local header");
                  break;
                case "Heading 5":
                  value = value.replace("Heading 5""Place the desired string here");
                  break;
                case "Heading 4":
                  //do something
                  break;
                }
                  
                tool.set_value(value);
            }, 0);
    }
}
</script>          
<telerik:RadEditor id="RadEditor1" runat="server" ToolsFile="~/ToolsFile.xml"  OnClientSelectionChange="OnClientSelectionChange">
    <Content>
        <h6>sample content</h6>
    </Content>
</telerik:RadEditor>



Inspect the selection, get the useful information from it and set it in the header:

<script type="text/javascript">
function OnClientSelectionChange(editor, args) {
    var tool = editor.getToolByName("FormatBlock");
   
    if (tool) {
        setTimeout(function () {
   
            var selectedElement = editor.getSelectedElement().tagName.toLowerCase();
            var selectedElementClass = editor.getSelectedElement().className;
            var selectedElementInerHtml = editor.getSelectedElement().innerHTML;
            // Replace default title with custom title
            if (selectedElement == "dt") {
                tool.set_value(selectedElement + " with class: " + selectedElementClass);
            }
            else if (selectedElement == "h2") {
                tool.set_value(selectedElement + " with class: " + selectedElementClass);
  
            }
        }, 0);
    }
}
</script>


Another approach is to use the FormatSet dropdown, which can show the custom styles in the header and offers similar functionality as the Paragraph Styles FormatBlock tool: demo and documentation.

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Mink
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or