Adding Aside Content to CKEditor 5 in Drupal, A JavaScript Solution

What we use
createElement()
insertBefore()
appendChild()
Plus other Javascript methods and properties.

This small JavaScript snippet comes from wanting a quick solution to adding aside elements to CKEditor in Drupal. 

After some research, I worked out that I could make a block widget for CKEditor 5 but then I would also need to integrate it into CKEditor 5 in Drupal. Even though I will do this when I get time, I needed a quicker solution so I decided to use what I had already set up using custom styles and JavaScript. 

Using custom styles to style the quote and paragraph tags in Drupal CKEditor 5

I had been using the quote tag in CKEditor to add notes to my articles. I had added some styles to make them look like complementary content but the underlying code was a blockquote element. Also, they all looked the same regardless of whether they were notes, tips, or warnings. And I couldn't actually add blockquotes even if I wanted to.

That said, I want to add some distinction to the type of notes and I will want to use blockquotes to add actual quotes. To do this I set up a bunch of classes on the blockquote element and then added the styles to my stylesheets as described in the article on using the styles widget.

If you need a quick primer on how to implement custom styles in CKEditor in Drupal then I suggest you head over to the article I have written about How to Add Custom Styles to Elements in the Drupal WYSIWYG.

Converting elements to aside using JavaScript

Okay, thus far all good. We have a set of excellent-looking note blocks we can use. But semantically these are wrong so let's change them. To do this we will use JavaScript. 

Let's first keep it simple and convert just one and then we will convert all on the page. 

Below is the HTML followed by the small JavaScript that can do this. 

<blockquote class="hint">
    <h2>
        Heading of a hint aside
    </h2>
    <p>
        Something semi-related to the main content, an aside.
    </p>
</blockquote>

const hint = document.querySelector('blockquote.hint');

/* Simple Wrap using insertBefore */ 
const asideNode = document.createElement("aside");
hint.parentNode.insertBefore(asideNode, hint);
asideNode.appendChild(hint);
Below is what we do line by line. 

• First, we select the element we want to wrap and assign it to a const named hint
  In this case we are selecting the blockquote with a class hint.
• Next, we create a new aside element and assign it to the const asideNode.
• Next, we add the asideNode, the aside element, in the parent node before the hint element. 

This will give you HTML markup like this as you are inserting the aside before hint. 

<aside></aside>
<blockquote class="hint">
    <h2>
        Heading of a hint aside
    </h2>
    <p>
        Something semi-related to the main content, an aside.
    </p>
</blockquote>

If like you could write the 3rd line hint.parentNode.insertBefore(asideNode, hint); in 2 lines like the following.

const hintParent = hint.parentNode;
hintParent.insertBefore(asideNode, hint);

• The final line in the above code adds the hint inside the aside using appendChild instance method.

This now looks better.

<aside>
    <blockquote class="hint">
        <h2>
            Heading of a hint aside
        </h2>
        <p>
            Something semi-related to the main content, an aside.
        </p>
    </blockquote>
</aside>

Below is what the sample code will look like once styled. However, read on to find out how to make this better.

Heading of a hint aside

 Something semi-related to the main content, an aside.

So now we have the element wrapped in an aside.

Summary

For a paragraph this is fine, and there might be some cases where you will want to wrap a blockquote in an aside. But in this case, we don't need the blockquote element. So let's remove it in the next part, Adding Aside Content to CKEditor 5 in Drupal: A JavaScript Solution, Part 2.

Thanks for reading thus far. If you are interested in front-end web development and design, be sure to sign up for my newsletter below.