在 Drupal 8 管理员中添加一个弹出窗口

Question

我想创建一个弹出窗口，在文本区域中显示可能的可用标签示例，我需要它显示在管理员的每个内容编辑页面上。

我需要做什么才能在管理员内容编辑页面中设置这种块？

谢谢。

Answer 1

我会创建一个模块：

• 包含对话框内容的twig 文件。
• 一个用于显示对话框的小 JS 文件，使用 Drupal 8 中包含的 jquery.dialog library。
• 实施hook_from_alter 以附加基于form_ids 的更改。

如下所示，适用于节点编辑表单，但未经过彻底测试：

文件：模板/popuptag.html.twig

<div style="display: none;">
  <div id="popuptag-dialog" title="Tag Usage">
   <p>The tag can be used at vero eos et accusamus et iusto odio
     dignissimos ducimus qui blanditiis praesentium voluptatum
     deleniti atque corrupti quos dolores et quas molestias
     excepturi sint occaecati cupiditate non provident, similique sunt.</p>
  </div>
</div>

文件：js/popuptag.dialog.js

(function ($) {
  'use strict';
  Drupal.behaviors.popuptag_dialog = {
    attach: function (context) {
      $( "#popuptag-dialog" ).dialog();
    }
  };
})(jQuery);

文件：popuptag.module

/**
 * Implements hook_theme().
 */
function popuptag_theme() {
  return [
    'popuptag' => [
      'template'  => 'popuptag',
      'render element' => 'dialog',
    ],
  ];
}

/**
 * Implements hook_form_alter().
 */
function popuptag_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  // Add here other form_ids if needed
  if (in_array($form_id, ['node_page_edit_form'])) {
    $form['popuptag'] = [
      '#theme' => 'popuptag',
      '#form_id' => $form_id,
    ];
    $form["#attached"]["library"][] = 'popuptag/dialog';
  }

}

文件：popuptag.libraries.yml

dialog:
  js:
    js/popuptag.dialog.js: { minified: true }
  dependencies:
    - core/drupal.dialog

文件：popuptag.info.yml

name: 'popuptag'
type: module
description: 'popuptag'
core: 8.x
package: 'Custom'