Skip to content

Add the ability to create an inline <span> tag with a custom class in RichText fields via the Toolbar #60684

@eric-michel

Description

@eric-michel

What problem does this address?

The editor toolbar offers a lot of formatting options for content within a Richtext field:
image

However, sometimes we want to be able to apply inline formatting for which there is no option in the Toolbar. For instance let's say we want a single h1 tag that looks like this:
image

In the editor, I can make the text fit on two lines by using shift-enter and can make the top line bold via the Toolbar, but there isn't a way to provide a different font size inline:

image

In general, this is fine. I don't expect the Toolbar to offer every possible formatting option just like I don't expect block controls to offer every possible option either. However, on the block level, we can add custom classes so that we can write our own custom CSS at-will:

image

There is currently no way to do that via the editor interface for a section of inline text.

What is your proposed solution?

In a perfect world, I would love an additional option in the Toolbar that would provide an input field (similar to the ability to add a link to an arbitrary selection of text). When highlighting text and providing this input field with a class name, it would wrap that text in a span tag with that class applied.

This is, of course, currently possible by simply swapping to the Code editor view. However, offering a Toolbar button will definitely reduce friction, just like having the ADDITIONAL CSS CLASS(ES) input field reduces friction for adding custom classes to full blocks.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions