WYSIWYG editor Jquey: color not working

Topic: WYSIWYG editor Jquey: color not working

smachesney pro asked 2 days ago


The color picker works on the wysiwyg editor in MBPro Jquery version but it doesn't change the color of the selected text.If I look at your examples for wysiwyg editor in MDB 5 it works, since you have the solution can you please tell me so I can include it in?

I've seen someone else ask the question and you said it would go on the bug list, but you already have it working on the MDB 5 so I would appreciate whatever code it is that is needed & absent.

Thanks Sonia

Krzysztof Wilk staff answered 2 days ago


I created a snippet with an example for you. You can find it here: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2895189#html-tab-view

Necessarily tell if it meets your expectations and I understood you right :)

Best regards

smachesney pro answered 2 days ago

Hi Krzysztof

Unfortunately no, this does help my situation.

It looks like your using MDB5, I have MDB4 Pro jQuery.

I bought the WYSIWYG plugin for my version but the color button on the top nav bar doesn't work. I need the code that will make the color button work in order to change color. It also doesn't work on your website.

Seeing as you have it working for the WYSIWYG plugin MDB5, I need it for the WYSIWYG plugin MBD4

Krzysztof Wilk staff commented 22 hours ago


As you can see in the snippet settings - I used MDB4 jQuery 4.19.2 version, so the example is correct. These plugins in MDB5 have a kind other structure.

  1. Could you precise about which examples don't work in our documentation? Because everything works as expected in my browser :(
  2. Could you create a snippet with your navbar, color picker, and WYSIWYG editor? It's better to understand the problem with code. I'll try to fix it :)

Best regards

smachesney pro commented 22 hours ago

Hi Krzysztof, please see my reply below

smachesney pro answered 22 hours ago

Thanks Krzysztof, it doesn't work on your website: *https://mdbootstrap.com/docs/b4/jquery/plugins/wysiwyg/*

Highlight some words and use the color button to change color:

color button

It doesn't work.

I've taken your snippet and put it into my code and it says: Pickr in undefined as I do not have the color picker plugin. Removing:

const pickr1 = new Pickr({ el: '#color-picker-1', default: "303030", useAsButton: true, components: { preview: true, opacity: true, hue: true,

interaction: {
  hex: true,
  rgba: true,
  hsla: true,
  hsva: true,
  cmyk: true,
  input: true,
  clear: true,
  save: true
}   },

onChange(hsva, instance) { $('.text-color').css('color', hsva.toRGBA().toString()); } });

The color button now doesn't work.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.19.2
  • Device: desktop
  • Browser: Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No