CKEditor 3.x/Users Guide/Rich Text/IFrame - Revision history

Anna: /* Using IFrames */ Typo corrected

2013-02-21T09:56:22Z

‎Using IFrames: Typo corrected

Sebstefanov at 11:46, 8 August 2012

2012-08-08T11:46:06Z

Anna: Usage section added

2010-12-17T15:36:37Z

Usage section added

Anna: Article contents added

2010-12-17T14:41:11Z

Article contents added

New page

{{#CUSTOMTITLE:Inserting IFrames}}
__TOC__
CKEditor makes it possible to insert inline frames to a document. Inline frames, or <code>iframe</code> elements, allow you to insert a frame containing another document in the middle of your document.

In order to insert an <code>iframe</code>, simply press the [[Image:CKEditor_iframe.png‎|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 <code>iframe</code> options:
* [[CKEditor_3.x/Users_Guide/Rich Text/IFrame#General|General]]
* [[CKEditor_3.x/Users_Guide/Rich Text/IFrame#Advanced|Advanced]]

{{CKEditor Dialog Windows}}

== General ==
The '''General''' tab is the default tab that opens after you press the [[Image:CKEditor_iframe.png‎|IFrame]] button on the toolbar. It allows you to set the <code>iframe</code> URL and configure the way it will appear in the document.

[[Image:CKEditor_iframe_general.png|frame|center|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:
**: <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.
**: Example:
**: <code><nowiki>/pages/iframe.html</nowiki></code>

* '''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 <code>iframe</code> 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 <code>iframe</code> element (<code>name</code> attribute).
* '''Advisory Title''' – the text of the tooltip that is shown when the mouse cursor hovers over the inline frame (<code>title</code> attribute).
* '''Long Description URL''' – the web address of an HTML page containing a longer description of the inline frame (<code>longdesc</code> 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 <code>iframe</code> is concerned.

[[Image:CKEditor_iframe_advanced.png|frame|center|Advanced tab of the IFrame Properties window]]

* '''Id''' – a unique identifier for an inline frame element in the document (<code>id</code> attribute).
* '''Style''' – 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''' – 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.

← Older revision		Revision as of 09:56, 21 February 2013
Line 58:		Line 58:


−	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.	+	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.

← Older revision		Revision as of 15:36, 17 December 2010
Line 46:		Line 46:
	* '''Style''' – 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''' – 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''' – 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''' – 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.

@@ Line 22: / Line 22: @@
 **: Example:
 **: <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:
 **: <code><nowiki>/pages/iframe.html</nowiki></code>