Blockquote CSS and styling in TinyMCE

Blockquotes have been part of the HTML arsenal since the very beginning. They can add more interest and authority to your content, and how they appear on your website plays a significant factor in how much more engaging they make your content too. 

Have you ever observed that we pay much more attention to a wise passage when it is quoted, than when we read it in the original author?

So, for inspiration, here are a few different ways you can style blockquotes and use them in TinyMCE.

This blog post contains some seriously advanced TinyMCE configs 🙅‍♂️. But don't worry – the TinyMCE init config has been documented in each CodePen to help you understand what’s going on.

Styling the blockquote tag

Blockquotes are styled using CSS in the same way as every other element. In TinyMCE, you do this using the content_css or content_style properties in the editor initialization script. Read more about using these options in our blog post about how to change the default font in the editor. 

Here is an example using the pseudo elements ::before and ::after to add a bit of visual flair. Tip: use pointer-events: none to prevent them from messing with the text selection.

Add a citation

When using a blockquote, you often want to add a citation, for example, when inserting a quote, the name of a person who said it. 

To add citations, we can create a custom format that inserts a cite within the blockquote. Take a look at the example below.

Create different styles of blockquotes

If you want to have a range of options for your blockquotes, you can do that by creating custom formats and, for example, use a custom context toolbar to apply the different visual styles. 

In the example below, we have set up three different styles. When you select the blockquote, a context toolbar will appear. Try aligning it to the center, and then to the right.

Using templates

The previous examples have been targeting the blockquote element directly. To insert more complex markup that contains structural elements like <footer>, we can use the template plugin. 

The example below contains a concept where the <div data-shareplaceholder> would be replaced by a share-widget when a user requests the webpage. It also contains structural markup like <footer>, which is not possible via regular formats. Notice the use of contenteditable=’true’ and contenteditable=’false’ to control which parts are editable and to protect certain markup from being removed.

What next?

So there you have it – four different examples of how to implement and style blockquotes in TinyMCE with CSS. 

Take the time to inspect the init config for each example, as these concepts can be applied to other things as well. For example, the formats and context toolbar shown in the third example above can be tweaked to apply to images. And the template plugin provides an unlimited source of ideas for inserting more complex blocks of markup.

Are you familiar with our Skins and Icon Packs premium plugin? Read more about it in my previous blog post, and keep an eye out for some exciting new additions coming soon with TinyMCE 5.2…