Drupal 8 - Canvas элемент становится удалена со страницы

Question

Я новичок в Drupal 8. Я пытаюсь реализовать диаграммы JS в Drupal 8.

Я пытаюсь создать <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

Что происходит, что элемент <canvas> автоматически удаляется с помощью drupal (duh). Я не знаю, как остановить это, но у меня есть работа. Вы можете использовать javascript для добавления холста в документ программно. Поскольку уже запущено javascript, не сложно добавить те элементы, которые вам нужны, чтобы заставить работать с javascript.

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

Этот код говорит ваш DIV имеет <div id="chart"></div> то просто добавляет холст тег там в JavaScript, а не через Друпала. Использует JQuery, но вы можете do it without it.

Answer 2

Извинения за поздний ответ, но сам наткнувшись на эту проблему, есть два «правильных» способа сделать это.

От Render API overview:

#markup: Указывает, что массив содержит HTML-разметку непосредственно. Если разметка очень проста, например объяснение в теге абзаца , обычно предпочтительнее использовать #theme или #type , чтобы тема могла настроить разметку. Обратите внимание, что значение передается через \ Drupal \ Component \ Utility \ Xss :: filterAdmin(), , который удаляет известные векторы XSS, разрешая разрешающий список HTML-тегов, которые не являются векторами XSS. (I.e, а не ). См. \ Drupal \ Component \ Utility \ Xss :: $ adminTags для списка тегов, которые будут разрешены. Если вашей разметке нужны любые теги , которых нет в этом белом списке, вы можете реализовать тему hook и файл шаблона и/или библиотеку активов. Альтернативно, вы можете использовать ключ массива рендеринга #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 3

Это решило мою проблему. Спасибо Джейми.

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

У нас есть другие возможности для Xss (на основе пользователей admin или non-admin).

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