主题: 颜色增加手动输入功能
作者: 无梦, 发布日期: 2012-06-05 14:53:24, 浏览数: 3080

修改涉及两个文件

kindeditor.js

lang\zh_CN.js

 

1.先说语言文件的修改

在92行noColor : '无颜色',下面增加一行

inputColor : '输入颜色',

 

2.主文件修改

此文件修改比较大

1) 查找KColorPicker   从4020开始修改

init函数体增加

 


  //添加手动填颜色 by ziyi[20120604]
  row = table.insertRow()
  cell = row.insertCell(0);
  cell.colSpan = colors[0].length;
  self._addAttr(cell, 'input', 'ke-colorpicker-cell-inputbt'); 

 

2)下在_addAttr这个函数修改比较大

cell.attr('title', color || self.options.noColor)改成

//添加手动填颜色 by ziyi[20120604]
  if(color=="input")
   cell.attr('title', self.options.inputColor);
  else
   cell.attr('title', color || self.options.noColor);

 

3)修改点击事件

cell.click(function(e) {
    e.stop();
    self.options.click.call(K(this), color);
   });

 

改为

 


  //添加手动填颜色 by ziyi[20120604]
  if(color=="input"){
   cell.click(function(e) {
    var inputcolordlg=_dialog({
      width : 180,
      title : self.options.inputColor,
      body : '<div style="margin:10px;"><input type="text" name="ke-colorpicker-form-input" id="ke-colorpicker-form-input" class="ke-colorpicker-form-input"/></div>',
      closeBtn : {
       name : KindEditor.lang('close'),
       click : function(e) {
        inputcolordlg.remove();
       }
      },
      yesBtn : {
       name : KindEditor.lang('yes'),
       click : function(e) {
        var tmpcolor=K('#ke-colorpicker-form-input').val();
        if(tmpcolor)
        {
         self.options.click.call(K(this), tmpcolor);
        }
        inputcolordlg.remove();
       }
      },
      noBtn : {
       name : KindEditor.lang('no'),
       click : function(e) {
        inputcolordlg.remove();
       }
      }
     });
    e.stop();
   });
  }else{
   cell.click(function(e) {
    e.stop();
    self.options.click.call(K(this), color);
   });
  }

 

4)修改

if (color) {
   cell.append(K('<div class="ke-colorpicker-cell-color" unselectable="on"></div>').css('background-color', color));
  } else {
   cell.html(self.options.noColor);
  }

 

改成

 

//添加手动填颜色 by ziyi[20120604]
  if (color && color!="input") {
   cell.append(K('<div class="ke-colorpicker-cell-color" unselectable="on"></div>').css('background-color', color));
  } else if(color=="input") {
   cell.html(self.options.inputColor);
  } else {
   cell.html(self.options.noColor);
  }

 

 

 

最后还有一个样式改一下

.ke-colorpicker-cell-top改成.ke-colorpicker-cell-top,.ke-colorpicker-cell-inputbt

 

下载地址:http://www.ziyiblog.cn/upload/kindeditor_color.zip

 

点击下载

作者: 无梦, 发布日期: 2012-06-05 14:54:29
强烈希望作者加上这个功能,我自己写上去的。。。怕你升级后我又得改,谢谢作者了。
回复
作者: Roddy, 发布日期: 2012-06-05 16:47:31
回复无梦:像ckeditor那样的效果很不错的,又可以输入,又可以选择很多颜色,我先放到 totolist 里。
回复
作者: 无梦, 发布日期: 2012-06-13 21:14:53
非常希望下一个版本里能有这个功能。还有一个小问题就是命名描记就是a标题给name或给id还是需要有这个功能了。我有空改了会发这边。
回复
发表新帖 发表回复