KindEditor 4.x编辑器，取色器(ColorPicker) API

1、以下是KindEditor官方4.x 编辑器拾色器API简介

取色器(ColorPicker) API
Contents 
取色器(ColorPicker) API 
K.colorpicker(options)
K.colorpicker(options)

创建取色器。
参数:
object options: 配置信息
返回: KColorPicker
继承: KWidget ( K.widget(options) )
示例:
var colorpicker = K.colorpicker({
   x : 100,
   y : 200,
   z : 1000,
   selectedColor : 'default',
     click : function(color) {
                alert(color);
   }
});

2、以下是ColorPicker拾色器API使用案例

<script type="text/javascript">

     KindEditor.ready(function(K) {
          var colorpicker;
          K('#colorpicker_one').bind('click', function(e) {
               e.stopPropagation();
               if (colorpicker) {
                    colorpicker.remove();
                    colorpicker = null;
                    return;
               }
               var colorpickerPos = K('#colorpicker_one').pos();
               colorpicker = K.colorpicker({
                    x : colorpickerPos.x,
                    y : colorpickerPos.y + K('#colorpicker1').height(),
                    z : 19811214,
                    selectedColor : 'default',
                    noColor : '默认颜色',
                    click : function(color) {
                         K('#color_one').val(color);
                         colorpicker.remove();
                         colorpicker = null;
                    }
               });
          });
          K('#colorpicker_two').bind('click', function(e) {
               e.stopPropagation();
               if (colorpicker) {
                    colorpicker.remove();
                    colorpicker = null;
                    return;
               }
               var colorpickerPos = K('#colorpicker_two').pos();
               colorpicker = K.colorpicker({
                    x : colorpickerPos.x,
                    y : colorpickerPos.y + K('#colorpicker2').height(),
                    z : 19811214,
                    selectedColor : 'default',
                    noColor : '默认颜色',
                    click : function(color) {
                         K('#color_two').val(color);
                         colorpicker.remove();
                         colorpicker = null;
                    }
               });
          });
          K('#colorpicker_three').bind('click', function(e) {
               e.stopPropagation();
               if (colorpicker) {
                    colorpicker.remove();
                    colorpicker = null;
                    return;
               }
               var colorpickerPos = K('#colorpicker_three').pos();
               colorpicker = K.colorpicker({
                    x : colorpickerPos.x,
                    y : colorpickerPos.y + K('#colorpicker3').height(),
                    z : 19811214,
                    selectedColor : 'default',
                    noColor : '默认颜色',
                    click : function(color) {
                         K('#color_three').val(color);
                         colorpicker.remove();
                         colorpicker = null;
                    }
               });
          });
          K(document).click(function() {
               if (colorpicker) {
                    colorpicker.remove();
                    colorpicker = null;
               }
          });
     });
</script>

3、以下是拾色器效果 的html内容

<div class="container information">
     <ul class="form">
          <form action="#" method="post" accept-charset="utf-8">
               <li>
                    <label>导航背景色：</label><input type="text" id="color_one" name="nav_background_color" value="" class="txt" /><input type="button" id="colorpicker_one" value="打开取色器" />颜色值为，例如 #41a981
               </li>
               <li>
                    <label>导航字体色：</label><input type="text" id="color_two" name="nav_font_color" value="" class="txt" /><input type="button" id="colorpicker_one" value="打开取色器" />颜色值为，例如 #000000
               </li>
               <li>
                    <label>导航选中色：</label><input type="text" id="color_three" name="nav_hover_color" value="" class="txt" /><input type="button" id="colorpicker_one" value="打开取色器" />颜色值为，例如 #349b81
               </li>
               <li>
                    <input type="hidden" name="type" value="nav"><input type="submit" value="提交信息" class="submit"/>
               </li>
          </form>
     </ul>
</div>