Custom Paragraphs Style does not match in drop down

[Mink]

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

[Rumen]

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