eSpace Blog RSS
18Nov

FCKEditor and Radiant: Adjusting the Link Target According to Link Type

3

In one of my projects at eSpace, I was building a site using Radiant CMS. I decided toput  FCKEditor as the rich text editor to be used by the site administrator. FCKEditor is one of the great text editors available; using it you can add links to the page content and decide whether those links open in the same window or in new window. The default for the link is to open in the same window, but we decided that any external links must open by default in a new window and any internal links (links to site pages) must open by default in the same window.

 

So, to do that you need first to configure the FCKEditor to set the default target for any new link to be "_blank" for a new window. You have two ways to do that:

  1. Edit the HTML for the add link dialog. This can be done through two steps:                                                                             
    1. Open file "<SITE_ROOT>\public\javascripts\fckeditor\editor\dialog\fck_link.html". Search for the select input with name "cmbTarget" and remove the "selected='selected'" from the option "DlgGenNotSet" and put it in the option"DlgLnkTargetBlank":

      <select id="cmbTarget" onchange="SetTarget(this.value);">
      ...
      <option value="" fckLang="DlgGenNotSet">&lt;not set&gt;</option>
      <option value="_blank" fckLang="DlgLnkTargetBlank" selected="selected">New Window (_blank)</option>
      ...
      </select>

    2. In the same file, search for input "txtTargetFrame" and change its value to be "value='_blank'":

      <input id="txtTargetFrame" style="WIDTH: 100%" type="text" onkeyup="OnTargetNameChange();" onchange="OnTargetNameChange();" value="_blank"/>                                                                  

  2. The other easier way is to configure the FCKEditor for that. Open the file "<SITE_ROOT>\vendor\extensions\fckeditor\app\views\fckeditor\config.js.erb" and add the configuration line:

    FCKConfig.DefaultLinkTarget = "_blank";

Now, any new link inside the page content will be opened in a new window without manually changing the link target in the add link dialog.

The second step is to distinguish between internal links and external links in order for them to open in a new window or in the same window.
Links to internal site pages can be added through the link dialog by selecting "others" in link protocol combo-box. This way you can depend on the protocol value to make this distiniction.

  1. Create a javascript function in the file "<SITE_ROOT>\public\javascripts\fckeditor\editor\dialog\fck_link\fck_link.js" to adjust the link target automatically according to the protocol value:

    function adjustTarget(protocolValue){
      if (protocolValue == ""){
        GetE('cmbTarget').value = "";
        GetE('txtTargetFrame').value = "";
      }else{
        GetE('cmbTarget').value = "_blank";
        GetE('txtTargetFrame').value = "_blank";
      }
    }

  2. Call this function from the "onchange" method of the input with id "cmbLinkProtocol". You can find this input in the file "<SITE_ROOT>\public\javascripts\fckeditor\editor\dialog\fck_link.html".  Once the user changes the protocol, it will adjust the link target automatically:

    <select id="cmbLinkProtocol" onchange="adjustTarget(this.value);">

Now, you have edited the FCKEditor to have this nice functionality, opening internal links internally and open external links externally.

 

Written By:

Wael Shaban (wshaban.blogspot.com)

Comments

1 Thomas wrote: on Friday, March 27, 2009:

I've tried this but for me it didn't work. I use FCKEditor 2.6.4

2 Wael Shaban wrote: on Sunday, March 29, 2009:

I applied it to an older version of FCKEditor 2.5 beta, it works fine with me.

Which step not working with you, the first one that opens the link in new window by default or the second step?

3 Dete Ctive wrote: on Wednesday, June 03, 2009:

Hi, good post. I have been wondering about this issue,so thanks for posting.

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments