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

Overriding InsertUnorderedList

4 Answers 215 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 2
Eric asked on 15 Dec 2011, 04:48 PM
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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 16 Dec 2011, 01:36 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Eric
Top achievements
Rank 2
answered on 06 Mar 2012, 09:34 PM
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;
    }
}
0
Trevor
Top achievements
Rank 1
answered on 13 Mar 2017, 06:38 PM

Hi,

 

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

0
Rumen
Telerik team
answered on 14 Mar 2017, 09:05 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Eric
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Eric
Top achievements
Rank 2
Trevor
Top achievements
Rank 1
Share this question
or