Style Encapsulation in React Rich Text Editor

26 Mar 202513 minutes to read

Style encapsulation determines how styles are applied within the Syncfusion^® React 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 React 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=
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=

Default behavior

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

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

[Class-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {

    rteValue = `<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() {
        return (
            <div class="control-section">
                <div class="editor">
                <h6 class="header">With style encapsulation</h6>
                    <RichTextEditorComponent height={450}  iframeSettings={this.iframeSettings} value={this.rteValue}>
                        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
                    </RichTextEditorComponent>
                </div>
                <div class="editor">
                <h6 class="header">Without style encapsulation</h6>
                    <RichTextEditorComponent height={450}  id='iframeRTE' value={this.rteValue}>
                        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
                    </RichTextEditorComponent>
                </div>
            </div>
        );
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, ImageSettingsModel, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {

  private rteValue: string = `<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>`;

  private iframeSettings:object = {
    enable: true,
  };

  public render() {
    return (
      <div class="control-section">
          <div class="editor">
            <h6 class="header">With style encapsulation</h6>
            <RichTextEditorComponent height={450}  iframeSettings={this.iframeSettings} value={this.rteValue}>
                <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
          <div class="editor">
            <h6 class="header">Without style encapsulation</h6>
            <RichTextEditorComponent height={450}  id='iframeRTE' value={this.rteValue}>
                <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {

  let rteValue = `<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>`;

  const iframeSettings = {
    enable: true,
  };

    return (
      <div class="control-section">
        <div class="editor">
        <h6 class="header">With style encapsulation</h6>
          <RichTextEditorComponent height={450}  iframeSettings={iframeSettings} value={this.rteValue}>
              <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
          </RichTextEditorComponent>
        </div>
        <div class="editor">
        <h6 class="header">Without style encapsulation</h6>
          <RichTextEditorComponent height={450}  id='iframeRTE' value={rteValue}>
              <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
          </RichTextEditorComponent>
        </div>
      </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar,ImageSettingsModel, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App(){
  
  let rteValue:string = `<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>`;

  const iframeSettings:object = {
    enable: true,
  };

  return (
    <div class="control-section">
      <div class="editor">
      <h6 class="header">With style encapsulation</h6>
        <RichTextEditorComponent height={450}  iframeSettings={iframeSettings} value={rteValue}>
            <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
        </RichTextEditorComponent>
      </div>
      <div class="editor">
      <h6 class="header">Without style encapsulation</h6>
        <RichTextEditorComponent height={450}  id='iframeRTE' value={rteValue}>
            <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
        </RichTextEditorComponent>
      </div>
    </div>
  );
}

export default App;