These instructions alter the default options for tinyMCE's insertlink option. Currently SS lets you choose where to link to, and other options, but there are no SEO options for FOLLOW/NOFOLLOW, to allow "pagerank sculpting" of your site structure. These revisions will add a new area called "Link Type" with radio button options for Follow and No Follow. The links will always default to NOFOLLOW, unless the user chooses otherwise (you can change the order of the array options below if you want to default to FOLLOW instead).

Remember to make backups of all files before making any changes, use these lines of code at your own risk. All my changes were made to a default installation of SS 2.4 with no prior changes to the code. Please account for any customizations you may have made, before using my sample code.

First we need to add the new Follow / NoFollow options to the insertLink form used by tinyMCE
locate the /sapphire/forms/HtmlEditorConfig.php file and add the following code:

Around line 240, look for the section that reads:

array(
						'internal' => _t('HtmlEditorField.LINKINTERNAL', 'Page on the site'),
						'external' => _t('HtmlEditorField.LINKEXTERNAL', 'Another website'),
						'anchor' => _t('HtmlEditorField.LINKANCHOR', 'Anchor on this page'),
						'email' => _t('HtmlEditorField.LINKEMAIL', 'Email address'),
						'file' => _t('HtmlEditorField.LINKFILE', 'Download a file'),			
					)
				),
				$siteTree,
				new TextField('external', _t('HtmlEditorField.URL', 'URL'), 'http://'),
				new EmailField('email', _t('HtmlEditorField.EMAIL', 'Email address')),
				new TreeDropdownField('file', _t('HtmlEditorField.FILE', 'File'), 'File', 'Filename', 'Title', true),
				new TextField('Anchor', _t('HtmlEditorField.ANCHORVALUE', 'Anchor')),
				new TextField('LinkText', _t('HtmlEditorField.LINKTEXT', 'Link text')),
				new TextField('Description', _t('HtmlEditorField.LINKDESCR', 'Link description')),
				new CheckboxField('TargetBlank', _t('HtmlEditorField.LINKOPENNEWWIN', 'Open link in a new window?')),
				new HiddenField('Locale', null, $this->controller->Locale)
			),

Change the section to read:

array(
						'internal' => _t('HtmlEditorField.LINKINTERNAL', 'Page on the site'),
						'external' => _t('HtmlEditorField.LINKEXTERNAL', 'Another website'),
						'anchor' => _t('HtmlEditorField.LINKANCHOR', 'Anchor on this page'),
						'email' => _t('HtmlEditorField.LINKEMAIL', 'Email address'),
						'file' => _t('HtmlEditorField.LINKFILE', 'Download a file'),			
					)
				),
				//custom-code: BOF add follow - nofollow option to tinyMCE insert link
				new OptionsetField(
					'TypeofLink',
					_t('HtmlEditorField.TYPEOFLINK', 'Type of Link'), 
					array(
                                        //the first option listed will be the default option
						'nofollow' => _t('HtmlEditorField.LINKFOLLOW', 'NOFOLLOW'), 
						'follow' => _t('HtmlEditorField.LINKNOFOLLOW', 'FOLLOW'),
					  )
					),
				//custom-code: EOF add follow - nofollow option to tinyMCE insert link
				$siteTree,
				new TextField('external', _t('HtmlEditorField.URL', 'URL'), 'http://'),
				new EmailField('email', _t('HtmlEditorField.EMAIL', 'Email address')),
				new TreeDropdownField('file', _t('HtmlEditorField.FILE', 'File'), 'File', 'Filename', 'Title', true),
				new TextField('Anchor', _t('HtmlEditorField.ANCHORVALUE', 'Anchor')),
				new TextField('LinkText', _t('HtmlEditorField.LINKTEXT', 'Link text')),
				new TextField('Description', _t('HtmlEditorField.LINKDESCR', 'Link description')),
				new CheckboxField('TargetBlank', _t('HtmlEditorField.LINKOPENNEWWIN', 'Open link in a new window?')),
				new HiddenField('Locale', null, $this->controller->Locale)
			),

Now that our new form is set up, we need to alter the tinyMCE functions to add the value of our users selection (Follow or NoFollow) and the appropriate "rel' element to the anchor tag tinyMCE inserts.

Locate the /sapphire/javascript/tiny_mce_improvements.js file.

Look for the section near line 222 that reads:

		    title : this.elements.Description.value,
		    innerHTML : this.elements.LinkText.value ? this.elements.LinkText.value : "Your Link"

Change it to read:

		    title : this.elements.Description.value,
			//custom-code: BOF add follow - nofollow option to tinyMCE insert link
			rel : (Form.Element.getValue(this.elements.TypeofLink)),
			//custom-code: EOF add follow - nofollow option to tinyMCE insert link
		    innerHTML : this.elements.LinkText.value ? this.elements.LinkText.value : "Your Link"

Because the code further down on that page uses all the items within the "attributes" variable to create the link, the easiest way for us to add the new "rel" value we need, without altering much, is to bundle it in with the other attributes.
The new line we just added, adds the rel element to the list of attributes. Now whenever tinyMCE creates a link, it will append our "rel' element and the value the user has chosen (follow or nofollow). The rel will be added before the href element of the anchor tag, but this is irrelevant since the rel element can be put at the beginning or end of an anchor tag.

That's it. Make sure you refresh your editor window to see the changes. Now whenever you add a link you can choose the follow state and check the html code and you'll see the rel element was correctly added.

Since I'm new to SS, can someone tell me if there was a "cleaner" way to do this. I edited the sapphire core files and am wondering if it would have been better to somehow put similar code in separate files somewhere so I can "isolate" my changes to SS from its default files. Something similar to how modules work.

Thanks for posting this code, it worked with a 2.3.7 installation. Having this option for rel="nofollow" to better manage SEO is another reason to choose SS.

A different location for the files with 2.3.7 though:
- the code was in /sapphire/forms/HtmlEditorField.php rather than /sapphire/forms/HtmlEditorConfig.php
- the js was in /jsparty/tiny_mce_improvements.js rather than /sapphire/javascript/tiny_mce_improvements.js

After following the trail of the code for the target=_blank through the project files, including css, I don't know of a cleaner way to do this, well done I say, and it is a minimum of code to keep up with in future upgrades. This would be a good for the SS wish-list.

Cheers.

Thanks for a great post, it saved me hours of hunting around.

In version 3.0.3 the file locations are:

/framework/forms/HtmlEditorField.php

/framework/javascript/HtmlEditorField.js

Does anyone know in SS3 where and what do i modify in HtmlEditorField.js

exactly what i need!

Thanks a lot!

In SS3 there is hook in HtmlEditorField.php LinkForm() line 367 $this->extend('updateLinkForm', $form);
Add an extension to your _config file and create your class eg

class MyToolbarExtension extends Extension {
public function updateLinkForm($form) {
$fields = $form->Fields();
$fields->push( new CheckboxField('TypeofLink',
_t('HtmlEditorField.TYPEOFLINK', 'Make Link a No follow ?')));

}
}
this will create a checkbox field in the add a link form for you.
As to updating the HtmlEditorField.js file you will need to add the rel tag to insertLink method under $("form.htmleditorfield-linkform").entwine -> about line 515
as well as several other methods

If anyone knows a better way to hook into entwine methods or overide instead of hacking core files please let me know ?