Revision as of 12:22, 28 October 2010

Links and E-mails

The Link feature of CKEditor is a powerful option that lets you add clickable hyperlinks or e-mail addresses to your documents as well as control the way they look and work.

To insert a link to you document, press the button on the toolbar. The Link dialog window that will open lets you choose the link type and various configuration options pertaining to your choice.

The Link dialog window includes two or four tabs that group link options, depending on a link type:

• Link Info
• Target (this tab is only available for the URL link type)
• Upload (this tab is only available for the URL link type)
• Advanced

All tabs contain the and buttons that let you accept the changes or close the dialog window without performing any changes, respectively.

Once inserted into the document, the link can be edited at any time by double-clicking it. The Link dialog window will open again and you will be able to introduce changes to the link configuration options.

If you attempt to close the Link dialog window without saving the changes, you will be prompted to do so:

An alert window prompting to save the changes made to the link

You can either proceed without saving your changes by choosing OK or close the alert window with the Cancel command and save the changes.

Link Type: URL

URL is the default link type that lets you add a website address to your document. For this sort of link all four tabs of the Link dialog window are available.

Link Info

The Link Info tab is the default tab that opens after you press the button on the toolbar. It allows you to choose the link type as well as set the link protocol and URL.

Link Info tab of the Link window for the URL link type

Below is an overview of all Link Info tab elements:

• Link Type — the category of the link that will be inserted into the document. You can choose between the following options:
  • URL — the plain web address of any resource available in the Internet: a website, a PDF document, or an image.

    Example:

    http://example.com/about.html

    http://example.com/images/image1.jpg

  • Link to anchor in the text — an internal link pointing the reader to a designated point in your document.

    Example:

    #anchor1

  • E-mail — the e-mail address.

    Example:

    myname@example.com

• Protocol — the communication protocol used with the web address. You can choose between the following options: http://, https://, ftp://, news://, or <other>.

• URL — the web address of the resource that the link is pointing to. It 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/about.html

    http://example.com/images/image1.jpg

  • Local server: If the resource is located on the same server, you can use an absolute path that omits the domain name and starts with a slash.

    Example:

    /about/mission.html

    /howto/printing.avi

    If CKEditor is integrated with a file browser (like CKFinder), you can also use the Browse Server button to select a resource from the ones that are available on the server.

Target

The Target tab is only available for the URL link type. It specifies the location where the link will open after you click it. By default the target of the URL is not set and the link will open in the same browser window or tab as the document.

Target tab of the Link window for the URL link type

This tab contains only one element: a drop-down Target list that lets you choose the location where the link will open. The list contains the following options:

• <not set> — the default setting that opens the link in the same browser window or tab as the document.
• <frame> — the setting that opens the link in the frame specified in the Target Frame Name text box. The text box is only visible after you choose <frame> as the target.

Target tab of the Link window for the URL link type with frame chosen as target

• <popup window> — the setting that opens the link in the pop-up window specified in the Popup Window Name text box. The text box is only visible after you choose <popup window> as the target.

Target tab of the Link window for the URL link type with pop-up window chosen as target

• If you choose to open the link in a pop-up window, you may configure some further options that control the appearance of the pop-up. Note, however, that the users' browser settings might override these options and make the pop-up window appear in a standard new browser tab or window instead. The following options are available:

  • Resizable — this parameter controls whether the pop-up window may be resized.
  • Status bar — this parameter controls whether the pop-up window will contain the status bar.
  • Location bar — this parameter controls whether the pop-up window will contain the location bar.
  • Toolbar — this parameter controls whether the pop-up window will contain the toolbar.
  • Menu bar — this parameter controls whether the pop-up window will contain the menu bar.
  • Full screen — this parameter controls whether the pop-up window will be maximized (full-screen).
  • Scroll bars — this parameter controls whether the pop-up window will contain the scroll bars.
  • Dependent — this parameter controls whether the pop-up window will close when the window that opens it closes (works in Netscape only).
  • Width — the width of the pop-up window.
  • Height — the height of the pop-up window.
  • Left Position — the offset of the pop-up window from the left side of the screen.
  • Top Position — the offset of the pop-up window from the top of the screen.
• New Window (_blank) — the setting that opens the link in a new window.
• Topmost Window (_top) — the setting that opens the link in a window that is positioned on the top.
• Same Window (_self) — the setting that opens the link in the same window as the document.
• Parent Window (_parent) — the setting that opens the link in the window that the document window is nested in.

Upload

Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.

The third bookmark refers to "Upload":

• Upload: specifies the location of the file which user want to upload. In order to choose the file user can type it's location either manually or by pressing "Browse...".
• Send it to Server: sends the file specified in "Upload" to the server.
  

Link to anchor in the text

If user chooses "Link to anchor in the text" then new options will be displayed in the Link Info bookmark.

File:CKEditor anchor link.png

User may select the link to the anchor in two ways.

• By Anchor Name: After creating a new anchor, user can select the anchor by name.
• By Element Id: Selects the anchor by Id.

Pressing "OK" inserts the link in user's document.

E-mail

If user sets "E-mail" new options will appear in the Link Info bookmark:

File:CKEditor link email.png

• E-mail Address: specifies the e-mail address which link refers to.
  
• Message Subject: specifies the subject of the message which is send to the e-mail address.
  
• Message Body: specifies the text of the message which is send to the e-mail address.
  

Press "OK" to insert the link in your document.

Advanced options

No matter which Link Type user chooses, bookmark called "Advanced" remains unchangeable:

File:CKEditor link advanced.png

• Id: specifies link's ID.
  
• Language Direction: sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
• Access Key: sets up an access key to the link.
  
• Name: specifies link's name.
  
• Language Code: defines the code of the language e.g. en, pt, pt
• Tab Index: defines the tab index.
  
• Advisory Title: specifies the description of the target object.
• Advisory Content Type: specifies the MIME type of the target object.
  
• Stylesheet Classes: specifies the name of the CSS class.
  
• Linked Resource Charset: specifies the charset of the target object.
  
• Style: defines the style

Press "OK" to insert the link.

Anchors

In order to insert an anchor in the text place the cursor before the text or section you want to the anchor to refer and press File:CKEditor anchors.png button on the toolbar. A popup window called "Anchor Properties" appears:

File:CKEditor anchor add.png

• Anchor Name: specifies the anchor name. User refers to this name while linking to the anchor.

The anchor appears in the document after pressing "OK” button.