此插件仅适用于付费 TinyMCE 订阅。

linkchecker 插件可在您输入时验证 URL。无效的 URL 将显示为红色高亮，并具有专属的上下文菜单，其中提供了编辑链接、在新标签页中打开、移除链接或忽略链接等选项。

Link Checker 插件依赖 HTTP 响应状态码来确定链接是否有效。返回错误或无效 HTTP 响应的网页将被标记为无效或"损坏"。有关有效的 HTTP 响应状态码的信息，请参阅：MDN Web Docs - HTTP 响应状态码。

交互式示例

HTML

<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://www.tiny.cloud/docs/tinymce/8/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.uploadcare.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://www.tiny.cloud/docs/tinymce/8/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>

JS

tinymce.init({
  selector: 'textarea#linkchecker',
  plugins: 'linkchecker ' + /* 启用链接检查器插件 */
    'autolink ' + /* 在输入时将类似 URL 的文本转换为超链接 */
    'link ' + /* 允许用户使用对话框添加/移除超链接 */
    'code',
  toolbar: 'link code',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

云端使用说明

如果您使用的是Tiny Cloud，请将 "linkchecker" 添加到您的插件列表中，服务将自动配置。

使用 Tiny Cloud 的基本设置

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 修改此值
  plugins: 'linkchecker'
});

有关将此插件与模块打包工具捆绑的信息，请参阅Bundling TinyMCE - Overview。

自托管环境使用说明

使用自托管环境的用户需要通过 linkchecker_service_url 参数提供其部署的链接检查服务的 URL

自托管基本设置

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 修改此值
  plugins: 'linkchecker',
  linkchecker_service_url: 'http://example.com/linkchecker'
});

选项

以下配置选项会影响 Link Checker 插件的行为。

linkchecker_content_css

在检查链接有效性后，会通过 data-mce-linkchecker-status 属性将验证结果添加到链接中。验证有三种可能的结果：valid、invalid 和 unknown。对于 invalid 结果，Link Checker 会通过将以下 CSS 样式注入编辑器中来直观地显示：

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 属性会设置为 true。此情况仅发生于 invalid 链接。

可以通过 linkchecker_content_css 选项提供自定义样式表的 URL，以替换或扩展这些样式。

类型：String

示例：使用 linkchecker_content_css

tinymce.init({
  selector: 'textarea', // 根据您的 HTML 修改此值
  plugins: 'linkchecker',
  linkchecker_content_css: 'http://example.com/linkchecker_content.css'
});

linkchecker_preprocess

linkchecker_preprocess 函数用于在执行链接检查前对链接进行调整。

类型： Function

示例：使用 linkchecker_preprocess

tinymce.init({
  selector: 'textarea',  // 请根据你的HTML修改此值
  plugins: 'linkchecker',
  linkchecker_preprocess: (data) => {
    /* 本示例将对URL进行编码或二次编码 */
    const newUrl = encodeURIComponent(data.url);
    return { url: newUrl };
  }
});

linkchecker_service_url

服务器端链接验证服务的URL。此项为必填项，若缺失，插件将无法运行，并会在屏幕上显示相应的警告信息。

类型： String

示例：使用 linkchecker_service_url

tinymce.init({
  selector: 'textarea', // 请根据你的HTML修改此值
  plugins: 'linkchecker',
  linkchecker_service_url: 'http://example.com/linkchecker'
});