Example of IFrame in Javascript Rich Text Editor Control

All Controls

/

Rich Text Editor

/

IFrame

This sample demonstrates the default rendering of the Rich Text Editor in iframe mode.

More Details...

<h1>Welcome to the Syncfusion
 ® Rich Text Editor</h1>The Rich Text Editor, 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.<h2>Do you know the key features of the editor?</h2><ul>
 <li>Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.</li>
 <li>Inline styles include
 bold, italic, underline, strikethrough,
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/tools.html" title="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/tools.html" aria-label="Open in new window">hyperlinks</a>, 😀 and more.</li>
 <li>The toolbar has multi-row, expandable, and scrollable modes. The Editor supports an inline toolbar, a floating toolbar, and custom toolbar items.</li>
 <li>Integration with Syncfusion
 ® Mention control lets users tag other users. To learn more, check out the
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/documentation/rich-text-editor/mention-integration" title="Mention Documentation" aria-label="Open in new window">documentation</a> and
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/mention-integration.html" title="Mention Demos" aria-label="Open in new window">demos</a> .</li>
 <li>
 Paste from MS Word - helps to reduce the effort while converting the Microsoft Word content to HTML format with format and styles. To learn more, check out the documentation
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/documentation/rich-text-editor/paste-cleanup" title="Paste from MS Word Documentation" aria-label="Open in new window">here</a> .</li>
 <li>Other features: placeholder text, character count, form validation, enter key configuration, resizable editor, IFrame rendering, tooltip, source code view, RTL mode, persistence, HTML Sanitizer, autosave, and
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/documentation/api/rich-text-editor/" title="Rich Text Editor API" aria-label="Open in new window">more</a> .</li>
 </ul><blockquote>
 Easily access Audio, Image, Link, Video, and Table operations through the quick toolbar by right-clicking on the corresponding element with your mouse. 
 </blockquote><h2>Unlock the Power of Tables</h2>A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick toolbar, you can perform table cell insert, delete, split, and merge operations. You can style the table cells using background colours and borders.<table class="e-rte-table" style="width: 100%; min-width: 0px; height: 151px">
 <thead style="height: 16.5563%">
 <tr style="height: 16.5563%">
 <th style="width: 12.1813%">S No 
 
 </th>
 <th style="width: 23.2295%">Name 
 
 </th>
 <th style="width: 9.91501%">Age 
 
 </th>
 <th style="width: 15.5807%">Gender 
 
 </th>
 <th style="width: 17.9887%">Occupation 
 
 </th>
 <th style="width: 21.1048%">Mode of Transport</th>
 </tr>
 </thead>
 <tbody>
 <tr style="height: 16.5563%">
 <td style="width: 12.1813%">1</td>
 <td style="width: 23.2295%">Selma Rose</td>
 <td style="width: 9.91501%">30</td>
 <td style="width: 15.5807%">Female</td>
 <td style="width: 17.9887%">Engineer 
 
 </td>
 <td style="width: 21.1048%">🚴 </td>
 </tr>
 <tr style="height: 16.5563%">
 <td style="width: 12.1813%">2</td>
 <td style="width: 23.2295%">Robert 
 
 </td>
 <td style="width: 9.91501%">28</td>
 <td style="width: 15.5807%">Male</td>
 <td style="width: 17.9887%">Graphic Designer </td>
 <td style="width: 21.1048%">🚗 </td>
 </tr>
 <tr style="height: 16.5563%">
 <td style="width: 12.1813%">3</td>
 <td style="width: 23.2295%">William 
 
 </td>
 <td style="width: 9.91501%">35</td>
 <td style="width: 15.5807%">Male</td>
 <td style="width: 17.9887%">Teacher</td>
 <td style="width: 21.1048%">🚗 </td>
 </tr>
 <tr style="height: 16.5563%">
 <td style="width: 12.1813%">4</td>
 <td style="width: 23.2295%">Laura Grace 
 
 </td>
 <td style="width: 9.91501%">42</td>
 <td style="width: 15.5807%">Female</td>
 <td style="width: 17.9887%">Doctor</td>
 <td style="width: 21.1048%">🚌 </td>
 </tr>
 <tr style="height: 16.5563%">
 <td style="width: 12.1813%">5</td>
 <td style="width: 23.2295%">Andrew James 
 
 </td>
 <td style="width: 9.91501%">45</td>
 <td style="width: 15.5807%">Male</td>
 <td style="width: 17.9887%">Lawyer</td>
 <td style="width: 21.1048%">🚕 </td>
 </tr>
 </tbody>
 </table><h2>Elevating Your Content with Images</h2>Images can be added to the editor by pasting or dragging into the editing area, using the toolbar to insert one as a URL, or uploading directly from the File Browser. Easily manage your images on the server by configuring the
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/documentation/api/rich-text-editor/#insertimagesettings" title="Insert Image Settings API" aria-label="Open in new window">insertImageSettings</a> to upload, save, or remove them. The Editor can integrate with the Syncfusion
 ® Image Editor to crop, rotate, annotate, and apply filters to images. Check out the demos
 <a class="e-rte-anchor" href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/image-editor-integration.html" title="Image Editor Demo" aria-label="Open in new window">here</a> .
 <img alt="Sky with sun" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" style="width: 440px" class="e-rte-image e-imginline" />

2232

Description

The Rich Text Editor is WYSIWYG ("what you see is what you get") editor that is used to create and edit content, and return valid HTML markup. The editor provides a standard toolbar to format content using its commands. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo the operation, HTML view, and more. Injecting Module The above features built as modules have to be included in your application. For example, to use image and link, inject the specific module using RichTextEditor.Inject (Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, FileManager, Audio, Video, EmojiPicker, PasteCleanup).

Example of IFrame in Javascript Rich Text Editor Control

All Controls / Rich Text Editor / IFrame

All Controls

/

Rich Text Editor

/

IFrame