在 Drupal 8 admin 中添加弹出窗口

Question

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

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

谢谢。

Answer 1

我会创建一个模块：

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

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

文件：templates/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'

在 Drupal 8 admin 中添加弹出窗口

Add a popup in Drupal 8 admin

drupal

admin

drupal-8