What we use
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
Let's first keep it simple and convert just one and then we will convert all on the page.
<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
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>
So now we have the element wrapped in an aside.
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.