Drupal 8 - Canvas 元素已从页面中删除

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>

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

任何人都可以帮我找出确切的问题。

Answer 1

对迟到的答案表示歉意，但我自己偶然发现了这个问题，有两种“正确”的方法可以做到这一点。

来自 渲染 API 概述：

#markup: 指定数组直接提供 HTML 标记。除非标记非常简单，例如a中的解释 段落标签，通常最好使用#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'])
    );
  }
}

Answer 2

这解决了我的问题。谢谢杰米。

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

Answer 3

发生的事情是

<canvas>

元素被 drupal 自动删除（废话）。我不知道如何阻止它，但我确实有一个解决办法。您可以使用 JavaScript 以编程方式将画布添加到文档中。由于它已经在运行 javascript，因此添加使其与 javascript 一起工作所需的那些元素并不难。

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

此代码表示您的 div 有一个

<div id="chart"></div>

，然后只需在 javascript 中添加 canvas 标签，而不是通过 drupal。使用 JQuery，但您也可以不用它也能做到。