javascript - 将 nicedit.js 的颜色选择器更改为 photoshop 之类的

Question

我想更改 nicedit.js 的默认颜色选择器在浏览 js 文件时，我可以看到下面的代码正在生成颜色选择器。使用 colorList 变量设置数据。任何人都可以帮助我获得像 photoshop 或更相关的颜色选择器。

var nicEditorColorButton = nicEditorAdvancedButton.extend({ 
  addPane : function() {
      var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'};
      var colorItems = new bkElement('DIV').setStyle({width: '270px'});

      for(var r in colorList) {
        for(var b in colorList) {
          for(var g in colorList) {
            var colorCode = '#'+colorList[r]+colorList[g]+colorList[b];

            var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems);
            var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare);
            var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder);

            if(!window.opera) {
              colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent;
            }

          } 
        } 
      }
      this.pane.append(colorItems.noSelect());  
  }
});

Answer 1

我会将 colorList 更改为包含 photoshop 十六进制值的数组，然后像这样使用它:

var nicEditorColorButton = nicEditorAdvancedButton.extend({ 
  addPane : function() {
  var colorList = {0 : '000000',1 : 'FFFFFF'};  /* here goes color list */
  var colorItems = new bkElement('DIV').setStyle({width: '270px'});

  for(var g in colorList) {
    var colorCode = '#'+colorList[g];
    var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems);
    var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare);
    var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder);

    if(!window.opera) {
      colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent;
    }

  }
  this.pane.append(colorItems.noSelect());  
}});

不确定我的代码是否被正确编辑，但您已经了解了基本概念。去掉2个for循环，直接在colorList中循环