锚点

此插件在工具栏添加一个锚点/书签按钮，可在编辑器光标插入点插入锚点。它还会在Insert菜单下添加anchor菜单项。

当用户点击锚点按钮或菜单项时，会弹出一个对话框提示输入字符串。该字符串将作为锚点id插入到HTML中光标所在位置。例如，用户将光标置于"Hello World"开头，点击锚点按钮并在对话框中输入"start"。生成的HTML将采用<p><a id="start"></a>Hello, World!</p>的形式。== 交互式演示

HTML

<textarea id="anchor-demo">
    <h1>Anchor Plugin Demo</h1>

    <p>
      This demo illustrates the functionality of the TinyMCE Anchor plugin. Anchors allow you to create internal links within your document that jump to specific locations.
    </p>

    <h2>How to Insert an Anchor</h2>

    <p>
      To insert an anchor at the cursor position:
    </p>

    <ol>
      <li>Place your cursor where you want to insert the anchor</li>
      <li>Click the anchor button in the toolbar or use Insert → Anchor from the menu</li>
      <li>Enter a name for your anchor in the dialog box (e.g., "introduction")</li>
      <li>Click OK to insert the anchor</li>
    </ol>

    <h2>How to Create Links to Anchors</h2>

    <p>
      To create a link that jumps to an anchor:
    </p>

    <ol>
      <li>Select the text you want to turn into a link</li>
      <li>Click the link button in the toolbar or use Insert → Link from the menu</li>
      <li>In the Insert/Edit Link dialog, click the "Anchors" dropdown list</li>
      <li>Select the anchor you want to link to from the dropdown</li>
      <li>Click Save to create the link</li>
    </ol>

    <p>
      After creating anchors and links, you can test them by clicking on the links. The editor will automatically scroll to the anchor location in the document.
    </p>

</textarea>

JS

tinymce.init({
  selector: 'textarea#anchor-demo',
  height: 500,
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "anchor |undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  menubar: "file edit view insert format tools table help",
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

基本设置

tinymce.init({
  selector: "textarea",
  plugins: [
    "anchor", "link", // Link plugin is required for linking to anchors
  ],
  toolbar: "link | anchor",
});

有关使用模块打包器打包此插件的信息，请参阅 Bundling TinyMCE - Overview。

选项

allow_html_in_named_anchor

此选项允许您指定编辑器是否应解析并保留命名anchor标签内的html。

类型：Boolean

默认值：false

可能的值：true，false

示例：使用 allow_html_in_named_anchor

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

工具栏按钮

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

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

• 使用 toolbar 配置选项。

• 使用 quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Anchor 插件提供以下菜单项：

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

• 使用 menu 配置选项。

• 使用 contextmenu 配置选项。

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

命令

Anchor 插件提供以下 TinyMCE 命令。

tinymce.activeEditor.execCommand('mceAnchor');