Style Encapsulation in EJ2 TypeScript Rich Text Editor control

12 Apr 20256 minutes to read

Style encapsulation determines how styles are applied within the Syncfusion^® Rich Text Editor. This feature helps control whether the component’s content inherits global styles from the application or remains isolated.

Encapsulation modes

Syncfusion’s^® EJ2 TypeScript Rich Text Editor offers two rendering modes for controlling style encapsulation:

Encapsulated Mode (Iframe Mode)
- When enabled, the Rich Text Editor is rendered inside an <iframe>.
- The application’s global CSS rules will not affect the content inside the editor.
- This ensures that the editor’s content remains styled independently.
- Usage: iframeSettings: {enable: true}
Non-Encapsulated Mode (Default)
- The Rich Text Editor is rendered without an <iframe>.
- The application’s global CSS will apply to the content inside the editor.
- This mode allows seamless integration with existing styles.
- Usage: iframeSettings: {enable: false}

Default behavior

By default, the Rich Text Editor uses non-encapsulated mode (iframeSettings: {enable: false}), allowing the application’s styles to affect the editor’s content.

Below is a sample implementation of both encapsulated and non-encapsulated modes.

index.ts
index.html
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

// initialize Rich Text Editor component
let editor1: RichTextEditor = new RichTextEditor({
    value: `<p>The Syncfudion <strong>Rich Text Editor</strong>, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
    <li>
       <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p>
    </li>
    <li>
       <p>Bulleted and numbered lists.</p>
    </li>
    <li>
       <p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
    </li>
    <li>
       <p>Contains undo/redo manager. </p>
    </li>
  </ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"></div> `,
    iframeSettings: {
      enable: true,
    },
});
// render initialized Rich Text Editor
editor1.appendTo('#editor1');

// initialize Rich Text Editor component
let editor2: RichTextEditor = new RichTextEditor({
    value: `<p>The Syncfudion <strong>Rich Text Editor</strong>, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
    <li>
       <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p>
    </li>
    <li>
       <p>Bulleted and numbered lists.</p>
    </li>
    <li>
       <p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
    </li>
    <li>
       <p>Contains undo/redo manager. </p>
    </li>
  </ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"></div> `,
});
// render initialized Rich Text Editor
editor2.appendTo('#editor2');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class="control-section">
            <div class="editor">
              <h6 class="header">With style encapsulation</h6>
              <div id="editor1"></div>
            </div>
      
            <div class="editor">
              <h6 class="header">Without style encapsulation</h6>
              <div id="editor2"></div>
            </div>
          </div>
    </div>
</body>

</html>