Problem with color picker + bootstrap-colorpicker...

  • Hello !

    I develop an extension for the markdown editor with a color button to change text color. I started from nodebb-plugin-extended-markdown where there is the same thing with a color picker... It uses the nodebb "integrated" color picker (vendor/colorpicker/colorpicker) but I need to change it for two reasons :

    • Like in nodebb acp, there is a "bug" when clicking in the palette of this color picker : it's necessary to tap and move to select a color, which is counter-intuitive... 😞 (I don't know if it's necessary to write a bug report for this on nodebb github...).
    • I need a greater color picker, like bootstrap-colorpicker ( which has good options (preselector colors...).

    But... all my attemps to use bootstrap-colorpicker (v2 or v3) fail.
    Do you have some guidelines to help me ? How can I have the bootstrap-colorpicker opening/working after click on my composer button added in the nodebb composer ?

  • Global Moderator

    What have you tried?

  • Example of try :

    • Copied nodebb-plugin-extended-markdown as a basis of my plugin (unchanged, it works with colorpicker "of nodebb" like I said above).
    • Added to dependencies in package.json :
    "bootstrap-colorpicker": "^2.x"
    • Added to plugin.json :
    "modules": {
            "bootstrap-colorpicker.js": "node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"
    • I replaced the require call in client.js like this :
    //	    'vendor/colorpicker/colorpicker',
    	], function (formatting, controls, translator) {
                if (formatting && controls) {
                    // params is (language, namespace, callback)
                    translator.getTranslations(window.config.userLang || window.config.defaultLang, 'extendedmarkdown', function (strings) {
                        var composerTextarea;
    // Commented all the following from initial plugin
    //                     $('li[data-format="color"]').ColorPicker({
    //                         eventName: 'showPicker',
    //                         color: '#a67f00',
    // ......
    • I commented also the last line in client.js here :
                        formatting.addButtonDispatch('color', function (textarea, selectionStart, selectionEnd) {
                            if (selectionStart === selectionEnd) {
                                controls.insertIntoTextarea(textarea, '%(#a67f00)[' + strings.color_text + ']');
                                controls.updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 9);
                            } else {
                                var wrapDelta = controls.wrapSelectionInTextareaWith(textarea, '%(#a67f00)[', ']');
                                controls.updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 9);
                            composerTextarea = textarea;
    //                        $('li[data-format="color"]').trigger("showPicker");

    (I must find with what I must replace this last line to call the colorpicker... but the problem is not here...)

    Then, after build of course, when I open the editor in nodebb, I have this message in the console.log of the browser :

    TypeError: e is undefined      bootstrap-colorpicker.js:1:21152

    At 21152 corresponds "e.colorpicker=o;" in the following extract of bootstrap-colorpicker.js :


    I think I make a big mistake in how to use the colorpicker or implement it in nodebb but I'm not a js expert 😞 (I learn about it each day 🙂 ).

Log in to reply

Suggested Topics

  • 1
  • 1
  • 4
  • 2
  • 4
| |