Preserving Custom Attributes in the Editor Value

Updated on Jan 20, 2026

Environment

Product

Kendo UI Editor for Angular

Description

When passing an HTML string to the Kendo UI Editor for Angular, custom attributes are removed. This behavior is due to the default sanitization process that cleans up unrecognized attributes to ensure the content's security. This KB article also answers the following questions:

• How to configure the Kendo UI for Angular Editor to accept custom attributes?
• How to modify the schema of the Editor to prevent the removal of specific attributes?
• How to use custom attributes in the Kendo UI Editor for Angular without sanitization issues?
• How to add custom attributes to the Editor's schema?

Solution

To prevent the Kendo UI Editor for Angular from removing custom attributes, modify the Editor's schema to recognize these attributes as valid. This requires creating a custom schema where these attributes are defined and allowed. Follow the steps below to achieve this:

1. Create a custom schema that extends the default schema of the Editor following our Custom Schema article.

2. In the custom-schema.ts file, you will have access to the Schema marks and nodes. Each node and mark spec contains a set of elements that have specific rules including the attributes that are allowed. Define the custom attributes you want to preserve for specific node or mark, as shown below:

   ts

   import { schema, Schema } from '@progress/kendo-angular-editor';
   
   // Style represents the span element.
   const getMarkSpecSpanElement = schema.spec.marks.get('style');
   const getNodeSpecParagraphElement = schema.spec.nodes.get('paragraph');
   
   getNodeSpecParagraphElement.attrs['data-mention-id'] = { default: null };
   getMarkSpecSpanElement.attrs['userid'] = { default: null };
   
   // Updates the order map of the mark and node specs.
   const marks = schema.spec.marks.update('style', getMarkSpecSpanElement);
   const nodes = schema.spec.nodes.update(
     'paragraph',
     getNodeSpecParagraphElement
   );
   
   export const mySchema = new Schema({
     marks,
     nodes,
   });

3. Load the custom Schema and test the newly added attributes by binding the value of the Editor to a string that contains the custom attributes. The Editor will now preserve the custom attributes in the content.

   html

   <kendo-editor [schema]="mySchema" [value]="editorValue"></kendo-editor>

   ts

   import { mySchema } from './custom-schema';
   import { Component } from '@angular/core';
   import { Schema } from '@progress/kendo-angular-editor';
   
   export class AppComponent {
   public value = `
   <span userid="user_5832-zxq">Hi Joe (user_5832-zxq)</span>
   <p data-mention-id="user_6921-ytv">Hi Stephan (user_6921-ytv)</p>
   `;
   public mySchema: Schema = mySchema;
   }

The following example demonstrates how to create a custom schema that allows the data-mention-id attribute for the paragraph node and the userid attribute for the style (span element) mark.

Change Theme

Theme

Loading ...

See Also

• Custom Schema in Kendo UI for Angular Editor
• ProseMirror Schema
• Editor Plugins in Kendo UI for Angular Editor
• Mentions Plugin in Kendo UI for Angular Editor