Score:0

how to add javascript to an article?

cn flag

just installed a stock Drupal 9.2.2 core, trying to create an article with the /node/add/article editor, how do i add javascript to the article? enter image description here

Kevin avatar
in flag
You add it in one of the ways described in the documentation. Pasting it into a WYSIWYG (assumed from the screenshot) is not advised and discouraged by Drupal core input filtering.
cn flag
@Kevin described in the documentation where? i see some articles about how to add javascript to modules, or how to add javascript to themes, but don't see anything about how to add them to articles. guess i could do some hackery ala "make a dedicated module just for this article", or something like that, but i haven't see any documentation on how to add javascript to articles specifically..?
Kevin avatar
in flag
https://www.drupal.org/docs/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-module
Kevin avatar
in flag
Articles are just content types. You can implement a hook in a module or a theme that would attach Javascript from a defined library to that node type. https://drupal.stackexchange.com/questions/226861/how-to-attach-a-library-to-a-specific-content-type
hotwebmatter avatar
nr flag
I notice this has been downvoted and upvoted. I think it's a valid question for this forum. Developers come to Drupal from all sorts of backgrounds, and someone whose experience is primarily with JavaScript may not immediately understand the reason why Drupal's WYSIWIG editor is on such a tight lockdown.
Score:2
nr flag

As @Kevin mentioned in the comments above, you are approaching this from the wrong angle.

By design, Drupal core (since at least Drupal 5) uses text filters and input formats to sanitize HTML added by users in WYSIWIG editors like the default CKEditor.

Earlier versions of Drupal were more permissive in this regard, but years of security patches for various cross-site scripting exploits have made it very difficult indeed to insert inline JS in this way -- and for good reason.

With Drupal, you're not just saying "I trust myself to add JS to this one Article," you're saying "I trust all users whose Roles grant them the permission to use this text filter." It's not easy to create an insecure text filter anymore. If you did, you would want to restrict its use to only trusted users with Admin roles.

For an experienced Drupalist, it's no big deal to attach a JavaScript asset to a render array. CSS and JS assets are managed in Drupal by creating libraries which can be attached to Drupal's render arrays in a variety of ways, using either a custom module or a custom theme, via either PHP code or Twig templates.

(If you're putting up a Drupal site without a custom theme, you might want to reconsider. You can quickly make a subtheme of whatever your current theme is, so that you can easily modify things like the JS libraries and Twig templates.)

However, I understand your reluctance to learn custom module or theme development just to add a little JavaScript.

This forum is supposed to be used for answering questions about Drupal core, not recommending contrib modules. Nonetheless, there is a relatively new module that might suit your needs:

Component

From the Component module's Project page:

Adding JS components to your Drupal site just got a whole lot easier. Just combine your JS components (any type) with a *.component.yml and put it in your module or theme. Now, your component will be available in Drupal as a block - automatically!

Admittedly, this is not as easy as pasting something in a WYSIWYG field, but that was never going to work anyway (because security.) You'll still need to start by creating a custom module, theme, or subtheme, so you can add your JS components to the component.yml file. But if you are coming from a JS developer mindset, this approach will allow you to just write the JS and stick it in a block on the page.

Obligatory security note:

This project is not covered by the security advisory policy. Use at your own risk! It may have publicly disclosed vulnerabilities.

But considering that your entire question is about defeating Drupal's built-in security measures against XSS exploits, I can't imagine that this warning will deter you!

FOLLOW-UP: Inline JavaScript is allowed in the Gutenberg editor from WordPress, and that is why @brown-paul recommends using the Gutenberg editor in Drupal, which might be even easier for you if you're coming from a WordPress background.

cn flag
Thanks! checking the Component module. btw ```Admittedly, this is not as easy as pasting something in a WYSIWYG field, but that was never going to work anyway (because security.)``` - an interesting comparison, WordPress's WYSIWYG allows this, it has something called `Custom HTML blocks` where you can insert whatever HTML you want, including javascript
hotwebmatter avatar
nr flag
Yes, it's a different philosophy. With Drupal, you're not just saying "I trust myself to add JS to this one Article," you're saying "I trust all users whose Roles grant them the permission to use this text filter." This _is_ allowed in Gutenberg, and that is why @brown-paul recommends using [the Gutenberg editor](https://www.drupal.org/project/gutenberg) in Drupal, which might be even easier for you if you're coming from a WP background.
hotwebmatter avatar
nr flag
@hanshenrik Did you get this working? If so, what approach did you use?
cn flag
i went with the Gutenberg editor; can you add a mention of Gutenberg to your answer?
hotwebmatter avatar
nr flag
Sure! Normally I would not do that because another user suggested it first and I would not want to steal that karma from @brown-paul -- but since it looks like he deleted his answer, I may as well! :)
hotwebmatter avatar
nr flag
@hanshenrik I updated my answer to include a link to Gutenberg module :)
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.