[Solved] Forcing Inline Styles for Ordered Lists

[Kenneth]

This is a simple example of something I am investigating for use in mail merges.

Telerik suggests using CSS style sheets to stylize the contents of the RadEditor and it works great as expected - in the browser. The issue I am running into is happening when trying to perform a mail merge using the data captured in the RadEditor. The only data captured in the RadEditor is the HTML and obviously doesn't include any styles (Code Snippet 1).

Captured Data 1:

<ol>
    <li>Item 1</li>
    <li>Item 2
        <ol>
            <li>Sub item a</li>
            <li>Sub item b
                <ol>
                    <li>1</li>
                    <li>2</li>
                    <li>3
                        <ol>
                            <li>11</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

My question is: Is there any setting I can change for the RadEditor to honor the styles for the ordered list displayed in Code Snippet 2 so that the inline styles are saved with the rest of the content?
If there is no setting I can change, how can I go about forcing the injection of these inline styles when the user is entering data into the RadEditor?

Code Snippet 2:

<ol style="list-style-type: decimal;">
    <li>Item 1</li>
    <li>Item 2
        <ol style="list-style-type: lower-alpha;">
            <li>Sub item a</li>
            <li>Sub item b
                <ol style="list-style-type: lower-roman;">
                    <li>1</li>
                    <li>2</li>
                    <li>3
                        <ol style="list-style-type: lower-roman;">
                            <li>11</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Thanks,

Kenny

[e-mail]
http://kennywalter.com/

[Nikolay]

Hi Kenny,

I have tried to reproduce this behavior but without success. I have set the provided content (Code Snippet 2) into a RadEditor, save the content in a database and then load it from the database back to the RadEditor. The loaded content was unchanged which is how it should behave. I used our live demos to test this scenario - Editor - Save in Database. Could you try that and see how it goes? If it works fine for you I suggest you compare your configuration with the one in the demo to find the difference that is causing the problem.

Currently, we are not aware of such an issue with our control (note that it may be coming from some custom code or from the database). Could you please isolate this behavior in a sample working project and send it for future examination?

Regards,
Nikolay
the Telerik team

[Kenneth]

I am not saying that the content is changed in any way upon saving the data to the database and reloading it. I am asking if there is a way to automatically apply inline styles to the HTML tags in the RadEditor's content. If there is no way to do it automatically, is there a way to do it by using a custom tool that will apply a different inline style to the <ol> tags depending on the level of indention? I want the content that is being saved to have inline styles similar to Code Snippet 2 without user intervention.

[Nikolay]

Hello,

The way sub-lists are displayed in the Editor depends entirely on the underlying browser engine and more precisely on the default CSS values. For example Opera will display sub-lists in a different way than Chrome. It is  very likely that the email client that you are targeting has different settings for the default CSS rules of sub-lists. In that case your need for inline styles is understandable. Nevertheless the RadEditor does not provide automatic styling out-of-the-box since that may interfere with the requirementс of other users.
What you could do is provide a custom solution using the  RadEditor's client-side events to apply inline styles. I recommend to use the OnClientSubmit event as the user is not likely to change the Editor's content in that moment. Here is an example of it:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientSubmit="OnClientSubmit">

</telerik:RadEditor>

 

<script type="text/javascript">

    function OnClientSubmit(editor, args)

    {

        var orderedLists = editor.get_contentArea().getElementsByTagName('ol');


        $telerik.$(orderedLists).css({listStyleType: "decimal"});
         $telerik.$(orderedLists).find("ol ol").css({listStyleType: "lower-alpha"});//for first level sublists
//more code to handle further sub-lists

    }

</script>

 Another option is for you to add a custom tool.

Please, note that the list styling above is just a sample and may not be the optimal approach.

I hope this helps.

Regards,
Nikolay
the Telerik team

[Kenneth]

Nikolay,

Thank you very much for your persistence. This is exactly what I was looking for.

I made a slight modification:

function OnClientSubmitFormatRadEditorContent(editor, args) {
     var orderedLists = editor.get_contentArea().getElementsByTagName('ol');
     $telerik.$(orderedLists).css({ listStyleType: "decimal" }); //sets all ol tags to decimal
     $telerik.$(orderedLists).find("ol").css({ listStyleType: "lower-alpha" }); //sets all second level or greater ol tags
     $telerik.$(orderedLists).find("ol ol").css({ listStyleType: "lower-roman" }); //sets all third level or greater ol tags
}