[Solved] Add class attribute to unorderedlist

[NikSimms]

Hi, I am attempting to add a class attribute to the unorderedlist HTML within the editor.  So aiming for HTML markup of
"<ul class='contentbullets' ><li>&nbsp;</li></ul>"

I am using the following below where I never enter the callBackFnUL.

	var insertUnorderedListCommand = RadEditorCommandList["InsertUnorderedList"];
	RadEditorCommandList["InsertUnorderedList"] = function(commandName, editor, oTool)
	{
	insertUnorderedListCommand (commandName, editor, callBackFnUL);
	function callBackFnUL(result)
	{
	if (result)
	{
	editor.PasteHtml("<ul class='contentbullets' ><li>&nbsp;</li></ul>");
	};
	}
	}

If i change the code to, see below, then the desired HTML markup is achieved.  However, two parts of HTML are added.  1.  The default HTML generated by the editor at the correct text insert point.  2.  My desired HTML markup but this is placed at the end of the editor's content.

	var insertUnorderedListCommand = RadEditorCommandList["InsertUnorderedList"];
	RadEditorCommandList["InsertUnorderedList"] = function(commandName, editor, oTool)
	{
	insertUnorderedListCommand (commandName, editor, callBackFnUL);
	editor.PasteHtml("<ul class='contentbullets' ><li>&nbsp;</li></ul>");
	}

Does anyone know how to achieve adding a class attribute to the unorderedlist HTML within the editor? 

Many thanks.  Scott.

[Rumen]

Hi Scott,

You can achieve your scenario using a content filter or when submitting the content. Here is an example how to programmatically assign class='contentbullets' to all unordered lists in the content area when submitting the editor's content:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    editor.add_submit(function ()
    {
        var uls = editor.get_document().getElementsByTagName("UL");
       
        for(i=0;i<uls.length;i++)
        {
            // if (image.src == "expected one")
            // set the new one
            var ul = uls[i]; 
            ul.className = "contentbullets";
        }
     
    });
}
</script>

<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server" >
</telerik:RadEditor>
<asp:Button ID="Button1" runat="server" Text="Button" />

All the best,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[NikSimms]

Hi Rumen,

Thanks for the reply.  So to clarify and for your confirmation;

• Using a content filter would only work if the design tabs are switched?  For me general users are not permitted to see the HTML tab so this would not work?
• When submitting the content.   Performs processing each time the content is submitted and ensures the UL tags have a class name.
• There is no call back facility, like when adding an image, which allows the actual HTML inserted to be changed?  The call back function is my preference.

Thanks.  Scott.

[Rumen]

Hi Scott,

Up to the questions:

• The content filters are fired not only when switching to Html mode but also when submitting the content.
• Yes, exactly!
• The Insert Unordered List command does not offer a callback function for the time being. Only the following tools offer the OnClientPasteHtml event:
  
  FormatStripper (when selection exists)
  InsertTable
  InsertTab (in IE)
  InsertSnippet
  InsertFormElement
  InsertGroupbox
  InsertDate
  InsertTime
  InsertSymbol
  InsertHorizontalRule
  InsertCustomLink

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center