Link Checker plugin

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://opentiny.mild.blue/opentiny/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://opentiny.mild.blue/opentiny/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'
});