Drupal 8 - 画布元素被移除页面

Question

我是Drupal 8的新手。我正在尝试在Drupal 8中使用Chart js。

我正在尝试创建一个<canvas>元素来加载图表。但是在渲染页面时，<canvas>元素会自动删除。
以下是控制器代码。

class DashboardController extends ControllerBase {

  public function content() {

    return array(
        '#type' => 'markup',
        '#markup'   =>  '<div class="chart"><canvas id="test"></canvas></div>',
    );
  }
}

这里，我只得到了 <div class="chart"></div>

我无法在页面中找到画布。因此，图表无法加载。

请帮助我找出确切的问题。

- Edwin Alex

---

这个问题应该移动到Drupal Answers。 - Jamie Hollern

Answer 1

非常抱歉回答晚了，但我自己也遇到了这个问题，有两种“正确”的方法可以解决。

来自渲染API概述:

#markup：指定数组直接提供HTML标记。除非标记非常简单，例如段落标签中的说明，否则通常更喜欢使用#theme或#type代替，以便主题可以自定义标记。请注意，该值通过\ Drupal \ Component \ Utility \ Xss :: filterAdmin()传递，该函数会剥离已知的XSS向量，同时允许一系列不是XSS向量的HTML标记。 （即，和 不允许。）请参阅\ Drupal \ Component \ Utility \ Xss :: $ adminTags获取将被允许的标记列表。如果您的标记需要任何不在此白名单中的标记，则可以实现一个主题钩子和模板文件和/或资产库。或者，您可以使用渲染数组键＃allowed_tags来更改过滤的标记。

因此，您可以实现主题钩子或进行稍微不太优雅的操作：

use Drupal\Component\Utility\Xss;

class DashboardController extends ControllerBase {

  public function content() {

    return array(
        '#type' => 'markup',
        '#markup'   =>  '<div class="chart"><canvas id="test"></canvas></div>',
        '#allowed_tags' => array_merge(Xss::getHtmlTagList(), ['canvas', 'div'])
    );
  }
}

- Jamie Hollern

Answer 2

这解决了我的问题。谢谢 Jamie。

return array(
    '#type' => 'markup',
    '#markup'   =>  '<div class="chart"><canvas id="test"></canvas></div>',
    '#allowed_tags' => array_merge(Xss::getHtmlTagList(), ['canvas', 'div'])
);

我们针对Xss有其他选项（基于管理员或非管理员用户）。

https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Component%21Utility%21Xss.php/class/Xss/8.2.x

- Silambarasan

Answer 3

发生的情况是，<canvas> 元素被 Drupal 自动删除了（呃）。我不知道如何停止它，但我有一个解决方法。您可以使用 JavaScript 程序将画布编程式地添加到文档中。由于它已经在运行 JavaScript，因此很容易添加所需的元素以使其与 JavaScript 协同工作。

  $("#chart").append("<canvas id=\"test\">");

这段代码在表明你的 div 具有一个 <div id="chart"></div>，然后只需要通过javascript添加canvas标签而不是通过Drupal。它使用jQuery但是你也可以 在不使用jQuery的情况下实现。

- Tatarize