[Question] Add grapesjs color picker to a new trait type?

@nojacko I’ve modified my code a little, here’s basically what I’m doing:

 getInputEl: function() {
      if (!this.inputEl) {
        var input = document.createElement('div');
        input.innerHTML = this.inputHtml
        var inputEl = input;
        var pickerEl = inputEl.querySelector(".myolorPicker");
        pickerEl.id = "ppcp" + this.cid;
        if (!this.model.colorPickerEl) {// add the jQuery spectrum color picker to our trait editor
          this.model.colorPickerEl = editor.TraitManager.getType('color').prototype.getInputEl.apply(this, arguments);
        }
        pickerEl.appendChild(this.model.colorPickerEl)
        
        ... code to handle value changes and update other fields ...

      return this.inputEl;
}

Hope this helps. This is still a work in progress 😃

Note that the getInputEl method of the colorPicker appends a spectrum colorpicker to the body of the canvas each time it’s called, and it appears to be mapped to the element it returns, which is why I’m only calling it if I don’t already have that element as part of my model. I suspect there are probably better ways to handle this, but this is working for my app at the moment.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.