Applying Class or ID in WYSIWYG Editor

Hello All,

I’m curious if there is the ability to add a class or ID to an element via the WYSIWYG editor or nICE editor (1.0 or 2.0)? I looked everywhere in both the WYSIWYG editor as well as the current nICE editor and the beta nICE 2.0 editor and I don’t see anywhere to do this? For example, I want to show a client how to add class=“button” to an <a href> tag so that it styles the button according to the template (in this case the Treepl ‘Lawyer’ Template). Am I missing something, or is the ability to apply a class or ID to an element not built into the platform at this time? It would be great if clients could select from a list, similar to Adobe BC or something like that as 99% of my clients won’t know how to go in and add a class in the code view.

Thank you!

2 Likes

Hi @StudioRTP.
There is no such possibility at the moment.

@Peter-Schmidt , please add it to the public backlog and we will implement this in future releases.

Sure @Eugene
Added here: https://treepl.co/public-backlog-state/applying-class-or-id-in-wysiwyg-editor :+1:

Funny thing. I was just having a conversation about this with a user a couple of days ago. I think it’s a great idea. I’m not sure how it would be implemented. Are you just thinking the a button that opens a string field where a user could add a class? Would it show existing classes?
Or would there be some way to see the classes that have already been added on a page?
Or would there be a way for dev’s to add classes to a dropdown for users?

Hello @Alex_B_Centrifuge - I do like the ability to only offer certain classes and ID’s to clients based on what the partner makes available, so I liked the way Adobe had it set up where the partner could set certain classes and ID’s to be available and then the end-client could select a class or ID from a dropdown menu. However, I’d be open to alternatives if anyone has an idea on a better way. I’m going to cast my vote on this one here in a minute because right now my client has no other option but to add a class in the source code for a button (for example), which is a bit clunky for and end-client who is not familiar with HTML code.

Thank you for the add @Peter-Schmidt!

  • Ryan

@StudioRTP, can I ask what the use case is for your client needing to add classes to an element?

Chiming in here… as I had requested this a while back as well. I too need an option to add Classes and/or ID to the WYSIWYG editor for a variety of reasons:

  • If I need to add a specific brand colour as an option (so clients can update with their font or BG colour)
  • Maybe a specific alignment so I am not having to use !important to overide inline styles
  • To add extra features not included in the editor - for example, a custom box-shadow
  • To add custom animations to elements - i.e. AOS

These are just a few of the reasons.

If this is implemented, I would suggest a Text String Field for the Label (this is what would show up in the editor) and a Text String Field for the Class and/or ID.

I would also cascade the style so it appears at the end of the class or ID cascade - i.e. if the element already has a class or ID added, then it would just add it to the end of the class or ID (as a suffix)

1 Like

I definitely like @A3CS’s idea about how to implement. The recent use that a client had for a feature like this was actually a client using the ‘Lawyer’ theme from Treepl CMS. The client asked how to add a button in the page and/or custom module content. The only way I could think to show him how was to record a desktop video to show him how to go into the code view, identify the <a href> tag, and add class=“button” to the tag to get the styles to link up so that it looked like the button that is used elsewhere on the site. However, as @A3CS mentioned, I’ve had clients who also would like to use it for the reasons he listed here.

I hope this helps to explain - please let me know if I can help in any way with further explanation/clarification or any thing else!

1 Like

I see this is somewhat implemented here: 2021-08-24_00-22-23

How do we add our own classes to this list.

A perfect use case is to allow for anchors to display as buttons with a “button” class.

Hello @Neido

I’m curious if you ever found out how to add the classes to the list using the style selector in the admin? It also looks like this feature only works for hyperlinks and there isn’t a way to add a class or ID to something like setting a specific alignment for an element, add animations to elements, etc. I checked the Wishlist and the backlog and I don’t see this request even listed so I’m assuming that means it’s not up for a vote. I have a project that I’m working on that would be great to have the ability to set classes/IDs to certain elements to make content management a bit easier for clients who manage their own content, but aren’t coders. Am I the only one that would find this feature useful or has anyone else found a workaround?

Maybe it’s just me! Just curious how others are setting up pages with more design flexibility for their clients who aren’t developers, but would like more layout options/flexibility. Thank you - appreciate any help and/or advice anyone can share!

I can’t remember what my workaround was in this example, I think I just ended up creating a custom content module instead as I couldn’t add custom classes.

Thank you @Neido , I appreciate you taking the time to respond! Hopefully I can find some sort of workaround. In this case there would be so many fields I’d have to set up for every possible page configuration. It could be done, but it might be a bit of a convoluted process. Anyways, thanks for your time and feedback!