Multiple-paragraph Text - Color

Hi!

could you implement text coloring in Multiple-paragraph Text forms?
we would need to diversify some words and hyperlinks with different colors

Thanks, Daniel

Hi @daniel.aquino, and welcome to the Dato forums!

Please bear with me for a moment here… :sweat_smile: You’d think this would be straightforward, but because we’re a headless CMS, this actually requires a bit of setup from your team. Could you please talk to your developers about this first (if you’re not one of them)?

For HTML fields, you can install a plugin like TinyMCE Editor - Plugins — DatoCMS on that field to allow color (and other) HTML formatting:

However, what this gets you in the GraphQL response is inline style props on <span> tags:

{
  "data": {
    "exampleModel": {
      "regularHtmlField": "<p>This is the normal HTML editor</p>",
      "customTinymceEditor": "<p>This is the TinyMCE Editor plugin from our marketplace.</p>\n<p><span style=\"color: #e03e2d;\">It</span> <span style=\"color: #2dc26b;\">has</span> <span style=\"color: #3598db;\">colors</span>!</p>"
    }
  }
}

Depending on how your frontend is set up, this may or may not be desirable (your devs might want to use custom classes instead, for example). But sometimes it’s perfectly fine too. Just better to check with them beforehand :slight_smile:

But generally speaking, using a plugin to add that functionality would probably be the way to go here. Your devs can fork and customize that plugin as necessary, such as to enforce classes, or only allow certain thematic colors to be chosen, etc., along with making the corresponding changes on the frontend CSS (which is altogether separate from DatoCMS).

I know that’s a lot of information for something as simple as coloring… please let me know if I can clarify anything, and hope that’s not too hard to implement!

1 Like