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 (https://github.com/farbelous/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 :
    require([
                'composer/formatting',
                'composer/controls',
                'translator',
    //	    'vendor/colorpicker/colorpicker',
    	    'bootstrap-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;
    		    $('li[data-format="color"]').colorpicker();
    // 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 :

    this.element.trigger({type:"changeColor",color:this.color,value:this.input.val()})}};e.colorpicker=o;e.fn.colorpicker=function(t){var i=Array.prototype.slice.call(arguments,1)
    

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