Overriding InsertUnorderedList

[Eric]

Is there anyway I can override the InsertUnorderedList command's value to add a class of "mainlist" to the <ul> tag?

Our designer has set the css up so that the only unordered lists that get bullets are <ul>'s with that class.

Is there anyway I can change the value of the HTML that is about to get inserted before it gets inserted? I don't want to change any of the logic of the insert, just the HTML.

Thanks.

[Rumen]

Hello Zack Wagner,

Here is an example which you can use or customize to achieve your scenario:

<script type="text/javascript">
function OnClientCommandExecuted(editor, args)
{
   //The executed command name is
   var commandName = args.get_commandName();

   if (commandName == "InsertOrderedList" || commandName == "InsertUnorderedList")
   {
        var selElem = editor.getSelectedElement();
        //set a class to the LI tag(s)
        selElem.className = "bullet1";
        //set a class to the OL / UL tags
        //selElem.parentNode.className = "bullet2";
   }
}
</script>

<telerik:radeditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted">
</telerik:radeditor>

Best regards,
Rumen
the Telerik team

[Eric]

Thanks!

This ended up getting me there. I had a small problem with what the selected element was (if a UL or OL, don't assign the parentNode) and reverting between the UL that requires a class and the OL that doesn't.

Here's my final working code. It could probably refactored, but this works.

function OnClientCommandExecuted(editor, args) {
    var commandName = args.get_commandName();
    var selElem = editor.getSelectedElement();
    var tagName = "";
    var className = "";

    switch (commandName) {
        case "InsertUnorderedList":
            tagName = "UL";
            className = "mainlist";
            break;
        case "InsertOrderedList":
            tagName = "OL";
            className = "";
            break;
    }

    if (tagName != "") {
        if (selElem.tagName != tagName) {
            while (selElem.parentNode != null) {
                selElem = selElem.parentNode;
                if (selElem.tagName == tagName)
                    break;
            }
        }
        selElem.className = className;
    }
}

[Trevor]

Hi,

 

Where did you apply that JS to become visible to Rad Editor ?

[Rumen]

Hello Trevor,

If you are using RadEditor in a standard ASPX/ASCX file, you can place the JavaScript function just above the RadEditor's declaration as shown in the documentation: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/client-side-programming/events/onclientcommandexecuted. 

If you use RadEditor in Sitefinity, you can see an example how to attach an event and a JS function to it in this Sitefinity forum thread: http://www.sitefinity.com/developer-network/forums/general-discussions-/how-do-i-radeditor#Mw1uNLZI3EyEMi43C6f7jA.

Regards,
Rumen
Telerik by Progress