Styling Rich Text in CMS or Editor

Design help CMS
1

So I create a collection called “page text” In there I store related text to each page. This makes it very simple for a client to go in and edit the page text with out messing with anything to much.

What I have been struggling with is giving the client the ability to style the text that is there. simple things like bold, or italic, or a highlight color of a certain couple words.

Now lets say I just put the text into the page itself. They can edit but only change the H tag or bold or italic. There does not seem to be the ability to add color of text.

Am I missing something here?

Seems to me that there sholud be some kind of wysiwyg editor for things like blogs?

Here is my public share link: LINK
(how to access public share link)

2

As far as I know it’s not possible for the client to edit the colours of the text.

I would say the main reason it’s that it IS a CMS editor, and not a wysiwyg editor, with the keyword being content.

We are responsible for the styling and the client manages the content. Not sure if this Wishlist is any use?
https://wishlist.webflow.com/ideas/WEBFLOW-I-66

3

Hey @WhiteyG

Agree with @magicmark about the designer having styling control and not having a full WYSIWYG.

You could try and use the H4-H6 headings as custom styling options for the client, but if you need it to be inline text there’s another option.

It will only give you one highlight or styling options but have the client make the desired text Bold and Italic. Then inject some styling code like this to customize it.

<style>
strong em {
background-color: yellow;
font-style: normal;
font-weight: 400;
padding: 2px 4px;}
</style>

The you will get this result.

45
451062×236 22.6 KB

Of course you can style the text however you like this is just an example of a “highlight”. You could also use it to underline, bold, change font, or even make an inline button.

<style>
strong em {
background-color: yellow;
font-style: normal;
font-weight: 400;
padding: 2px 4px;}

a strong em {
background-color: blue;
color: white;
font-style: normal;
font-weight: 700;
padding: 5px 10px;
border-radius: 5px;}
</style>

Here’s the result of that code.

51
51974×238 22.9 KB

The beauty of this is that you can inject this code into your whole site, individual pages, or collections. So for example a blog collection and ad collection could have different formatting. You could also use the <blockquote> tag for additional formatting if the client doesn’t need it. Although that’s not good practice for SEO or accessibility.

Hope this sparks some ideas for you.

3 Likes
4

Kinda figured I was stretching. I defiantly lean more towards controlling everything as the designer. But every now and then I get a client who is like “but I want to color that word so it pops out”.

I think I will go the tags route and just style a couple special ones.

Thanks guys!

2 Likes
5

Hi!

How can we change the color of text with hyperlink?

I dont want the beige and the magenta on mouseover.

6

I’m trying to add something like button to the RTE in the CMS. I’ve tried putting your code in the Project settings > Custom Code > Header and Footer, and as HTML on the page, but nothing gives, I just get Bold. What am I doing wrong?

https://preview.webflow.com/preview/a11y?utm_medium=preview_link&utm_source=designer&utm_content=a11y&preview=441ad9d1392456ec52a90cc94b0319f6&pageId=5d47333bcc4d3a83e2b656cb&itemId=5d487da01ebeba4f4abbbf41&mode=preview

7

@Jonathan_Holden - There is no button element within a RTE. The only way to style an anchor to look like a button would be to use custom code to style all links, since there is no way to add a class to a link, in the RTE.

The only other option would be to use JavaScript to check the link URL and if it matched your value, or the link text, then add a style or class (that had styling) to the element. I needed to do something similar where the client wanted a call to action button inside the RTE that they could create. I instructed the client to create a new line with only a link in it. Link was internal. Then targeted that with JS and added a class I already created for the button. How to do this depends on the exact circumstances of the link.

8

Sorry Jeff, I didn’t explain that properly. I don’t want a button at all. In fact I want Preformatted text anything I want to write here A way of distinguishing some words from other textI will want some of it to say “button” as I am writing a blog about buttons and links. But I’ll also want to write things like <ahref>. As you can see, I can do it here, but I want to be able to do it in the CMS.

I have done this in RTE on a normal page by styling All bolds When nested inside of... but it doesn’t work in the CMS.

thanks in advance
Jonathan

9

Does the CMS RTE have the same class applied? If it does it will behave the same.

10

oh dear. sometimes I am so stupid.
Yep. that was the issue.
I changed the class in the style guide I am building because, well, style guide. And then didn’t add the class in the CMS.

Just reading your blog post too, very interesting!

11

Thank you so much for this. This works like a charm.

12

Since WhityG created this topic, new tools and techniques to style elements inside rich text elements now exist.

Webflow added a custom code insert that can be placed anywhere inside the rich text field. You can place CSS, HTML, and JavaScript there as needed. More information can be found in the Webflow University.

Refokus, an agency in the EU, created a a set of tools called “Refokus Tools” and among them is the Rich Text Enhancer.

Refokus states, “Use Refokus Rich Text Booster to add Classes, IDs, or Custom Attributes to rich text elements in Webflow so you can style text, anchor to it, add animations, add custom functionalities, and more.”

Refokus Tools - Rich Text Enhancer

Finsweet, an agency in the US, created a tool called “Powerful Rich Text” as part of their Attributes tools. They state, “Add HTML to Rich Text elements, add components from the same page or from different pages, add classes, ids, attributes, and more.”

Using JavaScript to manipulate the inner content of a rich text element has always been possible on plans that allow for custom code. But these two tools mentioned above abstract the process to make it much easier for non-coders to get the results their client’s desire.

2 Likes
13

This worked great! Super cool, appreciate you sharing! Used Finsweet, just added in the script to the page header that I wanted it on, added the the custom attribute and then started writing in HTML. It worked! Pretty sure you need to be on the live site to see it though.

14

Hey! I’m looking to use Refokus rich text for having code blocks (not embed, just some code formatted as code).

I’ve googled but I can’t seem to find a detailed guide for achieving this. Do you have any suggestions?

Thanks! Johan

15

Looks like they are using multiple names for the product. Look at =>

Rich Text Enhancer (by Refokus) - Webflow

16

Hey :slight_smile: is adding a class and creating them for Rich Text explained anywhere? I am struggling to get my website to read the classes i created for the rich text snippets.
is there any specific step for creating classes (to use with rt enhancer) for headings used inside CMS Rich Text?
(code added to before tage, classes are created on a separate style page)