Text Formats

Owned by Scott Worthington
Last updated: Mar 20, 2024 by Matthew Gary Page
4 min read

Text formats are composed of a series of filters and change how HTML tags are processed and displayed on your site. When a user creates content, the text format is associated with the content, and the full, original text is stored in the database. The content is then passed through filters in the text format before it becomes output on the site.

Each text format is associated with a visual WYSIWYG (What You See Is What You Get) HTML editor. The core Text Editor gives you the ability to configure the editors (such as adding and removing buttons from their toolbars). The core CKEditor5 module offers the renowned CKEditor, empowering users to edit HTML content seamlessly within your site.

There are three different editing modes you can use for CKEditor5, Basic HTML, Restricted HTML, and Full HTML text formats. Each text format has an associated permission, so that you can pick and choose what user can use which text format. This filters certain users from using Basic HTML, which filters out dangerous HTML tags.

Basic HTML

Basic HTML provides the ability to add some basic text formatting to your document. When enabled, it adds the Bold, Italic, Styles and Linking toolbar buttons that apply these styles.

basic-image.png

If you want to remove basic styles from your document, you can also insert and remove a Numbered List or a Bulleted List as well in this mode. With the Source button, you can quickly switch between Basic HTML mode to Source code mode, where you can hardcode your HTML tags manually.

  • Allowed HTML tags: <br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <span> <a hreflang href class title target="_blank"> <blockquote cite> <ul type> <ol type start> <img src alt height width data-entity-type data-entity-uuid data-align data-caption> <strong> <em> <li>

  • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple of blank lines.

  • Web page addresses and email addresses turn into links automatically.

Restricted HTML

The Restricted HTML mode allows you to use raw HTML tags in your document. When the editor is initialized in this mode, the user can only edit the content within the regions chosen by the user in the standard editing mode.

restrict-image.png

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>

  • Lines and paragraphs break automatically.

  • Web page addresses and email addresses turn into links automatically.

Full HTML

With Full HTML mode you can edit entire HTML pages (from <html> to </html>), including the page metadata like DOCTYPE, character set encoding, meta tags, text and background colors, or margins.

When Full HTML is enabled, the button is automatically added to the toolbar. Once clicked, it opens up the document properties dialog window where you are then able to manipulate document metadata.

  • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple of blank lines.

  • Web page addresses and email addresses turn into links automatically.

  • You can align images, videos, blockquotes and so on to the left, right or center. Examples:

    • Align an image to the left: <img src="" data-align="left" />

    • Align an image to the center: <img src="" data-align="center" />

    • Align an image to the right: <img src="" data-align="right" />

    • … and you can apply this to other elements as well: <video src="" data-align="center" />

  • You can caption images, videos, blockquotes, and so on. Examples:

    • <img src="" data-caption="This is a caption" />

    • <video src="" data-caption="The Drupal Dance" />

    • <blockquote data-caption="Dries Buytaert">Drupal is awesome!</blockquote>

    • <code data-caption="Hello world in JavaScript.">alert("Hello world!");</code>

Embed

With Embed, you can enter your content in the Text field. For the best results, remove all existing formatting before copying and pasting into this field.

Embed will include the entire HTML needed to display the resource in the data.