Inserting IFrames

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Article contents added)
 
(Using IFrames: Typo corrected)
 
(2 intermediate revisions by 2 users not shown)
Line 22: Line 22:
 
**: Example:
 
**: Example:
 
**: <code><nowiki>http://example.com/iframe.html</nowiki></code>
 
**: <code><nowiki>http://example.com/iframe.html</nowiki></code>
** Local server: If the inline frame is located on the same server, you can use an absolute path that omits the domain name and starts with a slash.
+
** Local server: If the inline frame is located on the same server, you can use a relative path that omits the domain name and starts with a slash.
 
**: Example:
 
**: Example:
 
**: <code><nowiki>/pages/iframe.html</nowiki></code>
 
**: <code><nowiki>/pages/iframe.html</nowiki></code>
Line 46: Line 46:
 
* '''Style''' &ndash; CSS style definitions (<code>style</code> attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
 
* '''Style''' &ndash; CSS style definitions (<code>style</code> attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
 
* '''Stylesheet Classes''' &ndash; the class of the inline frame element (<code>class</code> attribute). Note that an <code>iframe</code> element might be assigned more than one class. If this is a case, separate class names with spaces.
 
* '''Stylesheet Classes''' &ndash; the class of the inline frame element (<code>class</code> attribute). Note that an <code>iframe</code> element might be assigned more than one class. If this is a case, separate class names with spaces.
 +
 +
== Using IFrames ==
 +
To insert an inline frame into your document, press the [[Image:CKEditor_iframe.png|IFrame‎]] button on the toolbar. When the '''IFrame Properties''' dialog window is displayed, configure the inline frame settings, including the obligatory URL field and the display properties. Once you click '''OK''', the [[Image:CKEditor_placeholder.png|iframe]] icon along with the iframe placeholder will appear in the document.
 +
 +
[[Image:CKEditor_iframe_example1.png|frame|center|An iframe inserted into in CKEditor]]
 +
 +
 +
If you want to see the inline frame as it will be seen by the end user, use the [[CKEditor 3.x/Users Guide/Document/Preview|Document Preview]] feature of CKEditor. After you press the [[Image:CKEditor_preview.png|Preview‎]] button on the toolbar, the document preview will appear in a new browser window.
 +
 +
[[Image:CKEditor_iframe_example2.png|frame|center|An iframe preview]]
 +
 +
 +
In the example above the <code>iframe</code> element was set to show the [http://ckeditor.com CKEditor] website in a 400px wide and 150px frame with scrollbars and borders.

Latest revision as of 10:56, 21 February 2013

CKEditor makes it possible to insert inline frames to a document. Inline frames, or iframe elements, allow you to insert a frame containing another document in the middle of your document.

In order to insert an iframe, simply press the IFrame button on the toolbar. The IFrame Properties dialog window that will open lets you set configuration options that define the inline frame URL, its size, display properties, or advanced styling settings.

The IFrame Properties dialog window includes two tabs that group iframe options:

For general information on using dialog windows please refer to the Dialog Windows section of the User's Guide.

General

The General tab is the default tab that opens after you press the IFrame button on the toolbar. It allows you to set the iframe URL and configure the way it will appear in the document.

General tab of the IFrame Properties window


Below is an overview of all General tab elements:

  • URL – the web address of the inline frame. The inline frame may be located on the same server as the web site you are currently in or on an external server.
    • External server: If you want to use an external address, use the full absolute path.
      Example:
      http://example.com/iframe.html
    • Local server: If the inline frame is located on the same server, you can use a relative path that omits the domain name and starts with a slash.
      Example:
      /pages/iframe.html
  • Width – the width of the inline frame in pixels.
  • Height – the height of the inline frame in pixels.
  • Alignment – the alignment of the inline frame in the document. Available options are Left, Right, Top, Middle, and Bottom.
  • Enable scrollbars – if this option is checked, when inserted content is larger than the space available in the iframe element, scrollbars will be displayed to enable the user to see the whole inline document.
  • Show frame border – if this option is checked, the inline frame will be displayed with a border.
  • Name – the name of the iframe element (name attribute).
  • Advisory Title – the text of the tooltip that is shown when the mouse cursor hovers over the inline frame (title attribute).
  • Long Description URL – the web address of an HTML page containing a longer description of the inline frame (longdesc attribute).

Advanced

The Advanced tab lets you configure additional inline frame options such as assign it an ID, a class, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the iframe is concerned.

Advanced tab of the IFrame Properties window


  • Id – a unique identifier for an inline frame element in the document (id attribute).
  • Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
  • Stylesheet Classes – the class of the inline frame element (class attribute). Note that an iframe element might be assigned more than one class. If this is a case, separate class names with spaces.

Using IFrames

To insert an inline frame into your document, press the IFrame‎ button on the toolbar. When the IFrame Properties dialog window is displayed, configure the inline frame settings, including the obligatory URL field and the display properties. Once you click OK, the iframe icon along with the iframe placeholder will appear in the document.

An iframe inserted into in CKEditor


If you want to see the inline frame as it will be seen by the end user, use the Document Preview feature of CKEditor. After you press the Preview‎ button on the toolbar, the document preview will appear in a new browser window.

An iframe preview


In the example above the iframe element was set to show the CKEditor website in a 400px wide and 150px frame with scrollbars and borders.

This page was last edited on 21 February 2013, at 10:56.