CKEditor 5 add rel=nofollow to links

Post Photo
Tom
Sunday, 20th September 2020

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'
            }
        }
    }
}

Share Post

If you like this post please share with your friends