how to add javascript to an article? [closed]

Question

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?

Answer 1

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.