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">

<h3>Canonically invalid domain-name strings</h3>

<p>The three domain-name strings below are all invalid, as per <a href="https://www.rfc-editor.org/rfc/rfc6761.html">RFC 6761</a> and <a href="https://www.rfc-editor.org/rfc/rfc2606.html">RFC 2606</a>.</p>

<p>Type a space after each string.</p>

<ol>
<li>www.invalid.com</li>
<li>www.site.example</li>
<li>www.site.invalid</li>
</ol>

<p>Note each of them is:

<ol>
<li>turned into a clickable link by the <a href="https://tiny.cloud/docs/tinymce/6/autolink">Autolink</a> plugin; and then, after a short delay,
<li>highlighted in red by the <strong>Link Checker</strong> plugin.</li>
</ol>

<p>Choose <strong>View → Source code</strong>, or click the <strong>Source code</strong> toolbar button, to see that each automatically created anchor tag has also had the <code>aria-invalid="true"</code> attribute added by the <strong>Link Checker</strong> plugin.</p>

<h3>Valid domain-name strings</h3>

<p>The three domain-name strings below are all valid</p>

<p>Type a space after each string.</p>

<ol>
<li>www.tiny.cloud</li>
<li>www.plupload.com</li>
<li>www.ephox.com</li>
</ol>

<p>Note each of them is:</p>

<ol>
<li>turned into a clickable link by the <a href="https://tiny.cloud/docs/tinymce/6/autolink">Autolink</a> plugin; and then
<li><strong>not</strong> highlighted in red by the <strong>Link Checker</strong> plugin.</li>
</ol>

<p>Choose <strong>View → Source code</strong>, or click the <strong>Source code</strong> toolbar button, to see that each automatically created anchor tag does <em>not</em> have the <code>aria-invalid="true"</code> attribute.</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 }'
});

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.

Type: String

Example: using linkchecker_service_url

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