Link Checker plugin

This plugin is only available for paid TinyMCE subscriptions.

The linkchecker plugin validates URLs, as you type. URLs considered invalid will be highlighted with red and will have a dedicated context menu with options to either edit the link, try and open it in a separate tab, remove the link, or ignore it.

The Link Checker plugin relies on HTTP response status codes to determine if a link is valid. Web pages that return incorrect or invalid HTTP responses are highlighted as invalid or "broken". For information on valid HTTP response status codes, see: MDN Web Docs - HTTP response status codes.

Interactive example

TinyMCE
HTML
JS
Edit on CodePen

<textarea id="linkchecker">
  <p><a href="http://www.gooogglge.com">www.gooogglge.com</a> &ne; <a href="http://www.google.com">www.google.com</a></p>
  <p><a href="https://www.tinymce.cloud">https://www.tinymce.cloud</a> &ne; <a href="https://www.tiny.cloud/">https://www.tiny.cloud</a></p>
</textarea>

tinymce.init({
  selector: 'textarea#linkchecker',
  plugins: 'linkchecker ' + /* Enables the link checker plugin */
    'autolink ' + /* Converts URL-like text to hyperlinks as you type */
    'link ' + /* Allows users to add/remove hyperlinks using a dialog */
    'code',
  toolbar: 'link code',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Getting started with TinyMCE Link Checker

Creating a Tiny Cloud account

Try the Link Checker plugin and the Tiny Cloud with a free Tiny Account. New accounts receive a 14-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.

Get TinyMCE Link Checker

The Link Checker plugin is included in the following Tiny Cloud plans:

The Tiny Cloud Professional Plan.
Tiny Custom Plans.

A 14-day free trial is available for the Tiny Cloud Professional Plan.

Cloud Instructions

If you are using Tiny Cloud, add "linkchecker" to your plugins list, and the service will be automatically configured.

Basic setup using Tiny Cloud

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'linkchecker'
});

Self-hosted Instructions

Customers using a Self-hosted environment will need to provide a URL to their deployment of the link checking service via the linkchecker_service_url parameter

Basic self-hosted setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'linkchecker',
  linkchecker_service_url: 'http://example.com/linkchecker'
});

Options

The following configuration options affect the behavior of the Link Checker plugin.

`linkchecker_content_css`

After a link is checked for validity, a result of the validation is added to it via data-mce-linkchecker-status attribute. There are three possible outcomes of the validation: valid, invalid and unknown. Link Checker visually reflects invalid outcome by injecting the following CSS styles into the editor:

a[data-mce-linkchecker-status="invalid"] {
    outline-color: rgba(231, 76, 60, 0.25);
    background-color: rgba(231, 76, 60, 0.25)
}

a[data-mce-linkchecker-focus="true"] {
    outline: 1px solid rgba(231, 76, 60, 0.75)
}

data-mce-linkchecker-focus attribute is set to true every time a dedicated context menu is shown on a link. This only happens for invalid links.

It is possible to replace or extend those styles, by providing a URL to custom stylesheet via linkchecker_content_css option.

Type: String

Example: using `linkchecker_content_css`

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'linkchecker',
  linkchecker_content_css: 'http://example.com/linkchecker_content.css'
});

`linkchecker_preprocess`

The linkchecker_preprocess function is used for adjusting links before performing a link check.

Type: Function

Example: using `linkchecker_preprocess`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'linkchecker',
  linkchecker_preprocess: (data) => {
    /* This example will encode or double encode the url */
    const newUrl = encodeURIComponent(data.url);
    return { url: newUrl };
  }
});

`linkchecker_service_url`

A URL of the server-side link validation service. This is a required option, without it, the plugin will fail to operate and will throw a corresponding warning on the screen.