CKEditor 5 add rel=nofollow to links
Reading time: 0,0 min
Nowadays it is not easy to find answers by just doing a google search. You want to make your site more SEO friendly? Are you using CKEditor 5? A few lines of Javascript will do the job for you
The solution
const ckEditorPostTextArea = document.querySelector('#maintextarea');
if(ckEditorPostTextArea) {
ClassicEditor
.create( document.querySelector( '#maintextarea' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', 'blockQuote', 'codeBlock', 'insertTable', '|', 'undo', 'redo'],
mediaEmbed: {previewsInData:true},
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
]
},
link: {
decorators: {
addTargetToExternalLinks: {
mode: 'manual',
label: 'Open in a new tab',
attributes: {
target: '_blank',
rel: 'nofollow'
}
}
}
}
} )
.then( editor => {
theEditor = editor;
} )
.catch( error => {
console.error( error );
} );
}
// You just have to paste the "link" portion of this code in your existing CKEditor configuration
link: {
decorators: {
addTargetToExternalLinks: {
mode: 'manual',
label: 'Open in a new tab',
attributes: {
target: '_blank',
rel: 'nofollow'
}
}
}
}
