5093 Posts in 1516 Topics by 1113 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 2605 Views |
-
Step by step: Modify back end tinyMCE insert link form to use FOLLOW/NOFOLLOW
3 December 2010 at 6:35pm Last edited: 4 December 2010 7:44am
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.
Attached Files-
SSNoFollowMod.jpg
21 KB
-
-
Re: Step by step: Modify back end tinyMCE insert link form to use FOLLOW/NOFOLLOW
4 December 2010 at 8:59am Last edited: 4 December 2010 9:03am
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.
-
Re: Step by step: Modify back end tinyMCE insert link form to use FOLLOW/NOFOLLOW
10 March 2011 at 4:45pm
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.jsAfter 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.
-
Re: Step by step: Modify back end tinyMCE insert link form to use FOLLOW/NOFOLLOW
4 January 2013 at 1:13pm
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
| 2605 Views | ||
|
Page:
1
|
Go to Top |
