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

Posted 2023-05-09

【中文标题】将nicedit.js的颜色选择器更改为photoshop之类的

【英文标题】：Change colorpicker for nicedit.js to photoshop like

【发布时间】：2016-09-11 02:28:18

【问题描述】：

我想更改 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());  
  
);

【参考方案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内循环