Page Embed plugin

This plugin is only available for paid TinyMCE subscriptions.

The Page Embed plugin embeds a page in the content using an iframe (Inline frames). The size of these iframes can be configured to be responsive or another user-defined dimension. The ability to use iframes helps create visually engaging content which is very useful for:

Online courses and learning materials.
Online advertising
Creating multimedia content

Try our Page Embed plugin demo

TinyMCE
HTML
CSS
JS
Edit on CodePen

<h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

<h2>Got questions or need help?</h2>

<ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

<h2>A simple table to play with</h2>

<table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

<h2>Found a bug?</h2>

<p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

<h2>Finally ...</h2>

<p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>

<textarea id="page-embed">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>

.tiny-pageembed--21by9,
.tiny-pageembed--16by9,
.tiny-pageembed--4by3,
.tiny-pageembed--1by1 {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.tiny-pageembed--21by9::before,
.tiny-pageembed--16by9::before,
.tiny-pageembed--4by3::before,
.tiny-pageembed--1by1::before {
  content: "";
  display: block;
}

.tiny-pageembed--21by9::before {
  padding-top: 42.857143%;
}

.tiny-pageembed--16by9::before {
  padding-top: 56.25%;
}

.tiny-pageembed--4by3::before {
  padding-top: 75%;
}

.tiny-pageembed--1by1::before {
  padding-top: 100%;
}

.tiny-pageembed--21by9 iframe,
.tiny-pageembed--16by9 iframe,
.tiny-pageembed--4by3 iframe,
.tiny-pageembed--1by1 iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

tinymce.init({
  selector: 'textarea#page-embed',
  plugins: 'pageembed code preview',
  toolbar: 'pageembed code preview',
  tiny_pageembed_classes: [
    { text: 'Big embed', value: 'my-big-class' },
    { text: 'Small embed', value: 'my-small-class' }
  ],
  height: 500,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Use the following script to create a Page Embed toolbar button:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  toolbar: 'pageembed'
});

Result: The Page Embed (Page Embed) button appears in the toolbar menu.

Using Page Embed

Use the following procedure for embedding an iframe into the content:

Click on the (Page Embed) toolbar button.
The InsertEdit Iframe dialog box appears.
In the General tab, enter the url in the Source field, or click on the (Source) icon to upload a file.
For setting the iframe size, select the preferred option from the Size drop-down menu.
- Inline Value is used to insert an iframe within a line. To set the dimensions of an inline iframe, provide the values in pixels in the Width and Height input box.
  - The default values are Width 350px and Height 260px. Click the (Constrain Proportions) lock icon to change the default values.
    
    The Width and Height fields are only available if the Inline Value value option is selected.
- Responsive is used to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport. There are four options provided to set the responsive iframe size.
  - Responsive-21X9
  - Responsive-16X9
  - Responsive-4X3
  - Responsive-1X1
    
    The Responsive option has pre-defined width and height values. The Width and Height fields are not available if one of the Responsive values are selected.
In the Advanced tab, provide a name and title for the iframe in the Name and Title fields.
The Long description URL field can be used to describe an iframe by including text in a separate resource when a short text alternative does not adequately convey the function or information provided in the iframe.
- Click on the (Long description URL) icon to upload a description file.
Click on the Show iframe border checkbox to display iframe borders.
Click on the Scrollbar checkbox to add scrollbar to the iframe.
Click Save to save and exit or Cancel to dismiss and exit.

Result: An iframe of the configured size is inserted in the desired location within the content.

Not all pages allow embedding, as the X-Frame-Options header can be set to block embedding. See this page for more information.

Options

`tiny_pageembed_classes`

The tiny_pageembed_classes takes an array of objects with text and value properties that will populate the size selection fields in the plugin dialog.

Type: Array

Default value:

[
  {
    text: 'Responsive - 21x9',
    value: 'tiny-pageembed--21by9'
  },
  {
    text: 'Responsive - 16x9',
    value: 'tiny-pageembed--16by9'
  },
  {
    text: 'Responsive - 4x3',
    value: 'tiny-pageembed--4by3'
  },
  {
    text: 'Responsive - 1x1',
    value: 'tiny-pageembed--1by1'
  }
]

Example: using `tiny_pageembed_classes`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  toolbar: 'pageembed',
  tiny_pageembed_classes: [
    { text: 'Big embed', value: 'my-big-class' },
    { text: 'Small embed', value: 'my-small-class' }
  ]
});

Example: disable select

When the tiny_pageembed_classes value is set to an empty array, the size selection fields are not available and only exact sizes can be set. Use the following script to disable select using the tiny_pageembed_classes option:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  toolbar: 'pageembed',
  tiny_pageembed_classes: []
});

`tiny_pageembed_inline_styles`

The tiny_pageembed_inline_styles option will inline all styles, while also keeping CSS classes, when rendering the embed content. This is useful when the additional CSS classes can’t be added to your site. Defaults to false.

Type: Boolean

Default value: false

Possible values: true, false

Example: `tiny_pageembed_inline_styles`

To inline page embed styles:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  tiny_pageembed_inline_styles: true
});

The Page Embed plugin provides the following toolbar buttons:

Toolbar button identifier Description

Toolbar button identifier	Description
`pageembed`	Opens the insert or edit iframe dialog.

pageembed

Opens the insert or edit iframe dialog.

These toolbar buttons can be added to the editor using:

The toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

The Page Embed plugin provides the following menu items:

Menu item identifier Default Menu Location Description

Menu item identifier	Default Menu Location	Description
`pageembed`	Insert	Opens the insert or edit iframe dialog.

pageembed

Insert

Opens the insert or edit iframe dialog.

These menu items can be added to the editor using:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Default CSS

If the tiny_pageembed_classes setting is left undefined, the default classes will be used. As a result, a responsive size option can be selected.

The following CSS script must be added to the webpage for the default CSS to work correctly.

.tiny-pageembed--21by9,
.tiny-pageembed--16by9,
.tiny-pageembed--4by3,
.tiny-pageembed--1by1 {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.tiny-pageembed--21by9 {
  padding-top: 42.857143%;
}

.tiny-pageembed--16by9 {
  padding-top: 56.25%;
}

.tiny-pageembed--4by3 {
  padding-top: 75%;
}

.tiny-pageembed--1by1 {
  padding-top: 100%;
}

.tiny-pageembed--21by9 iframe,
.tiny-pageembed--16by9 iframe,
.tiny-pageembed--4by3 iframe,
.tiny-pageembed--1by1 iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

For more information on configuring CSS, refer to the content_css section.

Page Embed plugin

Try our Page Embed plugin demo

Creating a Page Embed toolbar button

Using Page Embed

Options

tiny_pageembed_classes

Example: using tiny_pageembed_classes

Example: disable select

tiny_pageembed_inline_styles

Example: tiny_pageembed_inline_styles

Toolbar buttons

Menu items

Default CSS

`tiny_pageembed_classes`

Example: using `tiny_pageembed_classes`

`tiny_pageembed_inline_styles`

Example: `tiny_pageembed_inline_styles`