Skip to content

pageembed.adoc

Latest commit

 

History

History
88 lines (62 loc) · 4.11 KB

pageembed.adoc

File metadata and controls

88 lines (62 loc) · 4.11 KB

Page Embed plugin

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.

Try our Page Embed plugin demo

liveDemo::page-embed[]

Creating a Page Embed toolbar button

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  menubar: 'view',
  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:

  1. Click on the Page Embed(Page Embed) toolbar button.

  2. The InsertEdit Iframe dialog box appears. InsertEdit Iframe

  3. In the General tab, enter the url in the Source field, or click on the Source(Source) icon to upload a file.

  4. 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(Constrain Proportions) lock icon to change the default values.

      Note
      		 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

    Note
    		 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.

  5. In the Advanced tab, provide a name and title for the iframe in the Name and Title fields.

  6. 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 Source(Long description URL) icon to upload a description file.

  7. Click on the Show iframe border radio button to display iframe borders.

  8. Click on the Scrollbar radio button to add scrollbars to the iframe.

  9. 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.

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

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.

Important
 The following CSS script must be added to the webpage for the default CSS to work correctly. 
link:partial$css-codeblock/pageembed-plugin-css.adoc[role=include]

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