Supporting Nested Span Elements in Editor

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® Editor for Angular

Description

When using nested <span> elements in the Kendo UI for Angular Editor, the structure and styling of these elements may not be preserved as expected. This issue is critical for maintaining the integrity of HTML content within the component.

This knowledge base article also answers the following questions:

• How can I ensure nested span elements retain their structure in the Kendo UI for Angular Editor?
• What method should be used to support complex nested span elements in the Editor?
• Is there a way to maintain styling for nested HTML elements in the Editor content?

Solution

To address the issue with nested <span> elements in the Kendo UI for Angular Editor, follow these steps:

1. Ensure you are using v18.1.0 or newer of the Kendo UI for Angular Editor as improvements have been made to support nested <span> elements. The Editor now supports basic nested <span> structures, such as:

   html

   <span style="color: red;">
       Test
       <span style="color: blue;">Inner Span </span>
       Test
   </span>

2. For more complex nested <span> scenarios, use the flattenNestedSpans method. This method simplifies the markup to be easily interpreted by the Editor's compiler. For instance, in cases like:

   html

   <p>
       <span style="color: red;">
           <span style="font-size: 14pt;">
               14pt
               <span style="font-size: 8pt;">8pt</span>
           </span>
       </span>
   </p>

The flattenNestedSpans method helps in restructuring the HTML content to preserve both the structure and styling within the Editor.

Code Example

Below is an example of how you can use the flattenNestedSpans method in your application. This function accepts the original value as an argument and returns the flattened value, which can be passed to the Editor.

typescript

public convertValue() {
   this.flattenedValue = this.editorRef.flattenNestedSpans(originalValue);
}

See Also

• Kendo UI for Angular Editor Documentation
• Editor API