脚注

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

Footnotes 插件允许用户在 TinyMCE 编辑器中插入脚注。

每次添加脚注时，都会在当前插入点或当前所选内容的末尾放置一个上标脚注编号。

该插件会在编辑器底部的脚注部分添加一个新行，并将插入点移至该新行。这允许立即创建与新创建的脚注相关的脚注条目内容。

交互式示例

HTML

<div id="tiny-ui">
  <textarea id="footnotes" style="width: 100%; height: 500px;">
    <h2>Welcome to Footnotes</h2>
    <p>Try this demo of the Footnotes<sup id="footnote_34327763141662096813220" class="mce-footnote"><a href="#footnotes_entry_34327763141662096813220">1</a></sup> Premium Plugin.</p>
    <ol>
      <li>Place the insertion point where the new footnote should appear.<sup id="footnote_46102500311662090427490" class="mce-footnote"><a href="#footnotes_entry_46102500311662090427490">2</a></sup></li>
      <li>Click the <em>Insert Footnote</em> icon in the toolbar, or choose <em>Insert > Insert footnote</em> from the TinyMCE menu.</li>
      <li>A superscripted footnote number is added to the document.</li>
      <li>And the insertion point is moved down to a new entry in the footnotes section at the bottom of the TinyMCE editor.<sup id="footnote_795387001171662097474091" class="mce-footnote"><a href="#footnotes_entry_795387001171662097474091">3</a></sup></li>
      <li>Anything typed immediately following adding a footnote number is added to the footnote entry.<sup id="footnote_83105724181662097486697" class="mce-footnote"><a href="#footnotes_entry_83105724181662097486697">4</a></sup>.</li>
    </ol>
    <p>Footnotes are available for TinyMCE as a Premium Plugin<sup id="footnote_6878577521662090521962" class="mce-footnote"><a href="#footnotes_entry_6878577521662090521962">5</a></sup>. To test Footnotes in your own TinyMCE environment, sign up for a Tiny account. New Tiny accounts include 14-day free trials of all Tiny Premium Plugins, including Footnotes.</p>
    <div class="mce-footnotes"><hr>
      <ol>
        <li id="footnotes_entry_34327763141662096813220"><a class="mce-footnotes-backlink" href="#footnote_34327763141662096813220">^&nbsp;</a><span class="mce-footnotes-note">The Footnotes plugin works with TinyMCE 6.2 or later and is available with all TinyMCE Premium Plans.</span></li>
        <li id="footnotes_entry_46102500311662090427490"><a class="mce-footnotes-backlink" href="#footnote_46102500311662090427490">^&nbsp;</a><span class="mce-footnotes-note">If there is a highlighted selection when a footnote is added, the new footnote is added to the end of the highlighted selection.&nbsp;</span></li>
        <li id="footnotes_entry_795387001171662097474091"><a class="mce-footnotes-backlink" href="#footnote_795387001171662097474091">^&nbsp;</a><span class="mce-footnotes-note">Scrolling the document to the end, if necessary.</span></li>
        <li id="footnotes_entry_83105724181662097486697"><a class="mce-footnotes-backlink" href="#footnote_83105724181662097486697">^&nbsp;</a><span class="mce-footnotes-note">The footnotes section contains every footnote entry.</span></li>
        <li id="footnotes_entry_6878577521662090521962"><a class="mce-footnotes-backlink" href="#footnote_6878577521662090521962">^&nbsp;</a><span class="mce-footnotes-note">See <a href="https://www.tiny.cloud/docs/tinymce/8/plugins/">Premium plugins</a> for details.</span></li>
      </ol>
    </div>
  </textarea>
</div>

CSS

div.mce-footnotes hr {
  margin-inline-end: auto;
  margin-inline-start: 0;
  width: 25%;
}

div.mce-footnotes li > a.mce-footnotes-backlink {
  text-decoration: none;
}

@media print {
  sup.mce-footnote a {
    color: black;
    text-decoration: none;
  }
  div.mce-footnotes {
    break-inside: avoid;
    width: 100%;
  }
  div.mce-footnotes li > a.mce-footnotes-backlink {
    display: none;
  }
}

JS

tinymce.init({
  selector: 'textarea#footnotes',
  plugins: 'code footnotes link',
  toolbar: 'bold italic underline | footnotes | link code'
});

基本设置

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

有关使用 module bundlers 捆绑此插件的信息，请参阅 Bundling TinyMCE - 概述。

当添加第一个脚注时，会创建位于 TinyMCE 编辑器底部的脚注部分。

可以通过以下方式插入脚注：

• 工具栏上的 Insert footnote 按钮；

• 菜单栏中的 Insert > Insert Footnote 命令；

• 或 mceInsertFootnote 命令。

每当在 TinyMCE 编辑器中插入、重新排序或删除脚注时，脚注部分都会自动更新。如果删除了所有脚注，脚注部分将自动移除。

例如，在现有的脚注1和2之间添加新的脚注，新脚注将成为脚注2，原来的脚注2自动变为脚注3。

上标脚注编号还可以拖动到文档中的不同位置。当脚注编号及其对应的脚注条目被拖动到不同位置时，它们之间的关系会自动更新。

每个上标脚注编号都链接到其对应的脚注条目，每个脚注条目前面都有一个指向其对应上标脚注编号的插入符号 — ^。这使得在编辑器内容和脚注部分之间进行导航成为可能。

如果TinyMCE文档足够大以至于产生滚动条，点击脚注条目前的插入符号，文档会滚动到包含该条目上标脚注编号的行。

虽然视口会滚动回包含脚注编号的行，但插入点不会改变。用户必须通过例如在现在已滚动的文档中的某个地方单击I形光标来移动插入点。

CSS

以下CSS用于TinyMCE内部的content.css文件。它可以被自定义的content_css样式表覆盖。

为了使脚注在TinyMCE外部正确显示，请将此CSS添加到已发布的网页中。

div.mce-footnotes hr {
  margin-inline-end: auto;
  margin-inline-start: 0;
  width: 25%;
}

div.mce-footnotes li > a.mce-footnotes-backlink {
  text-decoration: none;
}

@media print {
  sup.mce-footnote a {
    color: black;
    text-decoration: none;
  }
  div.mce-footnotes {
    break-inside: avoid;
    width: 100%;
  }
  div.mce-footnotes li > a.mce-footnotes-backlink {
    display: none;
  }
}

使用说明

更新脚注按钮

更新脚注按钮，顾名思义，更新TinyMCE文档中所有脚注的状态。

要将更新脚注按钮添加到TinyMCE工具栏，请在toolbar中添加footnotesupdate。

tinymce.init({
  selector: 'textarea',  // 根据你的HTML更改此值
  plugins: 'footnotes',
  toolbar: 'footnotes footnotesupdate',
});

通常情况下，脚注在添加、删除或编辑时会自动更新。然而，在某些情况下，用户编辑会改变脚注状态，但脚注本身不会更新。

例如，当带有附加脚注的图片说明被删除（通过取消勾选插入/编辑图片对话框中的显示说明复选框）时，相关的脚注文本不会自动删除。

同样地，如果包含脚注的表格行或列被删除，相关的脚注文本也不会自动删除。

这些孤立的脚注文本可以手动删除。也可以通过点击工具栏中的footnotesupdate按钮来删除它们。

格式化上标脚注编号

1. 上标脚注编号不能进行行内格式化

   如果选定的字符串包含上标脚注编号，并且对该字符串应用了行内格式化，上标脚注编号不会应用所选的格式。

   行内格式化包括将字符串设置为粗体或斜体或等宽字体。

2. 上标脚注编号可以进行块级格式化

   如果选定的字符串包含上标脚注编号，并且对该字符串应用了块级格式化，上标脚注编号会应用所选的格式。

   块级格式化包括将选择内容设为任意级别的标题或将选择内容设置为预格式化。

格式化脚注文本

1. 脚注文本可以进行行内格式化

   脚注文本可以使用行内格式化选项进行格式化，如粗体、斜体或等宽字体。

2. 脚注文本不能进行块级格式化

   脚注文本不能被设置为标题，也不能设置为预格式化。

工具栏按钮

Footnotes插件提供以下工具栏按钮：

这些工具栏按钮可以通过以下方式添加到编辑器中：

• toolbar配置选项。

• quickbars_insert_toolbar配置选项。

• 自定义上下文工具栏。

菜单项

Footnotes插件提供以下菜单项：

这些菜单项可以通过以下方式添加到编辑器中：

• 使用 menu 配置选项。

• 使用 contextmenu 配置选项。

• 自定义菜单工具栏按钮。

命令

脚注插件提供了以下 TinyMCE 命令。

tinymce.activeEditor.execCommand('mceInsertFootnote');
tinymce.activeEditor.execCommand('mceUpdateFootnotes');