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> ≠ <a href="http://www.google.com">www.google.com</a></p>
<p><a href="https://www.tinymce.cloud">https://www.tinymce.cloud</a> ≠ <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.
Cloud Instructions
If you are using Tiny Cloud, add "linkchecker"
to your plugins list, and the service will be automatically configured.
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
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
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 };
}
});