How to Add rel="nofollow" to Hyperlink using TinyMCE Link Pop-Up Box

by Updated July 1, 2021

UPDATE: The better way to do this is to use TinyMCE "rel_list" in the javascript for TinyMCE as seen here.  Rather than changing the code in the plugin.min.js file, as shown below (after this update).  Also just to note that in TinyMCE version 4.5 they added the following to the Changlog "Added new security feature where links with target="_blank" will by default get rel="noopener noreferrer".  So unless you add the code such as "{ title: 'No Follow No Opener No Referrer', value: 'nofollow noopener noreferrer' },"  to your TinyMCE javascript (see below for example), you will not see No Follow in the Rel drop down list box of a link that has a target="_blank" within TinyMCE.  Essentially, any values you want to show up in the Rel drop down list, you need to add them here (or else it will show up as "None" even though the html may have rel= values:

 rel_list: [
                     { title: 'None', value: '' },
                     { title: 'No Follow', value: 'nofollow' },
                     { title: 'No Follow No Opener No Referrer', value: 'nofollow noopener noreferrer' },
                     { title: 'No Opener No Referrer', value: 'noopener noreferrer' },
                     { title: 'UGC', value: 'ugc' },
                     { title: 'Sponsored', value: 'sponsored' }
                     ]

END UPDATE

------

Here's how you can add rel="nofollow" to your hyperlinks when using the TinyMCE text editor 'insert/edit link'.  Just keep in mind for this example I'm using TinyMCE version 4.4.3, so if you're using a newer versions of TinyMCE, code has likely been changed (especially if you are using versions 4.6 or later).

  1. Go into the 'tinymce' folder -> 'plugins' folder -> then go to the 'link' folder. 
  2. Open up the plugin.min.js file.
  3. Now replace the following line of code:
a.settings.rel_list && (p = { name: "rel", type: "listbox", label: "Rel", values: c(a.settings.rel_list) }),

Replace it with this new line code:

a.settings.rel_list !== !1 && (a.settings.rel_list || (a.settings.rel_list = [{ text: "None", value: "" },{ text: "No Follow", value: "nofollow" }, { text: "UGC", value: "ugc" }, { text: "Sponsored", value: "sponsored" } ]), p = { name: "rel", type: "listbox", label: "Rel", values: c(a.settings.rel_list) }),

Note, I've added 4 list boxes: None, No Follow, UGC and Sponsored

Feel free to remove 'UGC' or 'Sponsored' listboxes if you don't think you'll use, but I would keep the 'None' in the listbox.

Below you can download the updated plugin.min.js file for the TinyMCE / plugin / link  folder.

 


FILES: TinyMCE link plugin js

0
0

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:

Comment:
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


If you've recently moved a Visual Studio.net web site project (wsp) or web application project(wap) to deploy on Internet Information Services 7 (IIS7) you may have discovered that your Tiny_MCE text editor no longer is showing up and getting the pop-up...  more »

Here's how you can do a simple validation check for blank spaces in javascript. In the example below, the javascript function first trims the text value to make sure there is no extra white space and then checks the length for 0: function...  more »

I recently discovered an issue after I upgraded to TinyMCE 4.1.3 version text editor in my ASP.NET web pages that was causing the formatting of my <pre> tags to not keep its line break formating on PostBack. At first I thought this might be a CSS...  more »

In the code below, you will be able to find the baseUrl of your website using javascript. The following javascript code will work when used on your localhost or when it's used in a live site (finds the root url of the domain address). Just add this...  more »

Here's how you can find the text of a particular TextBox witnin an ASP.NET GridView row and then Select and Copy the text to Clipboard with Javascript. First put the following javascript in the HTML of your page (either in HEAD of your html page or...  more »