Streaming live at 10am (PST)

Styling Rich Text in CMS or Editor


#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 @markos84uk 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.

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.

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.


#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!