كود لزيادة زر الصندوق

$(function() {$(function() {
    var colorPicker = '<div id="colorCubePopup"><style>#colorCubePopup {display:none;position:absolute;color:#333;font-size:10px;background:#fff;border:1px solid #ccc;padding:0;box-shadow:1px 2px 4px rgba(0,0,0,0.2);z-index:9999} #colorCubePopup div { margin:0; } .paletteColor {height:10px;width:10px;border:1px solid #fff;display:inline-block;cursor:pointer;} .paletteColor:hover {border-color:#333;} .marginR {margin-right:10px !important;} .colorPanel {padding:3px !important;border-bottom:1px solid #CCC;} #colorResult {width:48px;height:18px;border:1px solid #CCC;display:inline-block} #hexColor {margin:0 3px !important;vertical-align:top;padding:2px;cursor:text;} </style><div class="colorPanel"><div id="colorResult"></div><input id="hexColor" type="text" placeholder="#" size="8"></div><div id="colorCube" class="paletteColor marginR" style="background:#000000;"></div><div id="colorCube" class="paletteColor" style="background:#000000;"></div><div id="colorCube" class="paletteColor" style="background:#003300;"></div><div id="colorCube" class="paletteColor" style="background:#006600;"></div><div id="colorCube" class="paletteColor" style="background:#009900;"></div><div id="colorCube" class="paletteColor" style="background:#00CC00;"></div><div id="colorCube" class="paletteColor" style="background:#00FF00;"></div><div id="colorCube" class="paletteColor" style="background:#330000;"></div><div id="colorCube" class="paletteColor" style="background:#333300;"></div><div id="colorCube" class="paletteColor" style="background:#336600;"></div><div id="colorCube" class="paletteColor" style="background:#339900;"></div><div id="colorCube" class="paletteColor" style="background:#33CC00;"></div><div id="colorCube" class="paletteColor" style="background:#33FF00;"></div><div id="colorCube" class="paletteColor" style="background:#660000;"></div><div id="colorCube" class="paletteColor" style="background:#663300;"></div><div id="colorCube" class="paletteColor" style="background:#666600;"></div><div id="colorCube" class="paletteColor" style="background:#669900;"></div><div id="colorCube" class="paletteColor" style="background:#66CC00;"></div><div id="colorCube" class="paletteColor" style="background:#66FF00;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#333333;"></div><div id="colorCube" class="paletteColor" style="background:#000033;"></div><div id="colorCube" class="paletteColor" style="background:#003333;"></div><div id="colorCube" class="paletteColor" style="background:#006633;"></div><div id="colorCube" class="paletteColor" style="background:#009933;"></div><div id="colorCube" class="paletteColor" style="background:#00CC33;"></div><div id="colorCube" class="paletteColor" style="background:#00FF33;"></div><div id="colorCube" class="paletteColor" style="background:#330033;"></div><div id="colorCube" class="paletteColor" style="background:#333333;"></div><div id="colorCube" class="paletteColor" style="background:#336633;"></div><div id="colorCube" class="paletteColor" style="background:#339933;"></div><div id="colorCube" class="paletteColor" style="background:#33CC33;"></div><div id="colorCube" class="paletteColor" style="background:#33FF33;"></div><div id="colorCube" class="paletteColor" style="background:#660033;"></div><div id="colorCube" class="paletteColor" style="background:#663333;"></div><div id="colorCube" class="paletteColor" style="background:#666633;"></div><div id="colorCube" class="paletteColor" style="background:#669933;"></div><div id="colorCube" class="paletteColor" style="background:#66CC33;"></div><div id="colorCube" class="paletteColor" style="background:#66FF33;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#666666;"></div><div id="colorCube" class="paletteColor" style="background:#000066;"></div><div id="colorCube" class="paletteColor" style="background:#003366;"></div><div id="colorCube" class="paletteColor" style="background:#006666;"></div><div id="colorCube" class="paletteColor" style="background:#009966;"></div><div id="colorCube" class="paletteColor" style="background:#00CC66;"></div><div id="colorCube" class="paletteColor" style="background:#00FF66;"></div><div id="colorCube" class="paletteColor" style="background:#330066;"></div><div id="colorCube" class="paletteColor" style="background:#333366;"></div><div id="colorCube" class="paletteColor" style="background:#336666;"></div><div id="colorCube" class="paletteColor" style="background:#339966;"></div><div id="colorCube" class="paletteColor" style="background:#33CC66;"></div><div id="colorCube" class="paletteColor" style="background:#33FF66;"></div><div id="colorCube" class="paletteColor" style="background:#660066;"></div><div id="colorCube" class="paletteColor" style="background:#663366;"></div><div id="colorCube" class="paletteColor" style="background:#666666;"></div><div id="colorCube" class="paletteColor" style="background:#669966;"></div><div id="colorCube" class="paletteColor" style="background:#66CC66;"></div><div id="colorCube" class="paletteColor" style="background:#66FF66;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#999999;"></div><div id="colorCube" class="paletteColor" style="background:#000099;"></div><div id="colorCube" class="paletteColor" style="background:#003399;"></div><div id="colorCube" class="paletteColor" style="background:#006699;"></div><div id="colorCube" class="paletteColor" style="background:#009999;"></div><div id="colorCube" class="paletteColor" style="background:#00CC99;"></div><div id="colorCube" class="paletteColor" style="background:#00FF99;"></div><div id="colorCube" class="paletteColor" style="background:#330099;"></div><div id="colorCube" class="paletteColor" style="background:#333399;"></div><div id="colorCube" class="paletteColor" style="background:#336699;"></div><div id="colorCube" class="paletteColor" style="background:#339999;"></div><div id="colorCube" class="paletteColor" style="background:#33CC99;"></div><div id="colorCube" class="paletteColor" style="background:#33FF99;"></div><div id="colorCube" class="paletteColor" style="background:#660099;"></div><div id="colorCube" class="paletteColor" style="background:#663399;"></div><div id="colorCube" class="paletteColor" style="background:#666699;"></div><div id="colorCube" class="paletteColor" style="background:#669999;"></div><div id="colorCube" class="paletteColor" style="background:#66CC99;"></div><div id="colorCube" class="paletteColor" style="background:#66FF99;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#CCCCCC;"></div><div id="colorCube" class="paletteColor" style="background:#0000CC;"></div><div id="colorCube" class="paletteColor" style="background:#0033CC;"></div><div id="colorCube" class="paletteColor" style="background:#0066CC;"></div><div id="colorCube" class="paletteColor" style="background:#0099CC;"></div><div id="colorCube" class="paletteColor" style="background:#00CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#00FFCC;"></div><div id="colorCube" class="paletteColor" style="background:#3300CC;"></div><div id="colorCube" class="paletteColor" style="background:#3333CC;"></div><div id="colorCube" class="paletteColor" style="background:#3366CC;"></div><div id="colorCube" class="paletteColor" style="background:#3399CC;"></div><div id="colorCube" class="paletteColor" style="background:#33CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#33FFCC;"></div><div id="colorCube" class="paletteColor" style="background:#6600CC;"></div><div id="colorCube" class="paletteColor" style="background:#6633CC;"></div><div id="colorCube" class="paletteColor" style="background:#6666CC;"></div><div id="colorCube" class="paletteColor" style="background:#6699CC;"></div><div id="colorCube" class="paletteColor" style="background:#66CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#66FFCC;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FFFFFF;"></div><div id="colorCube" class="paletteColor" style="background:#0000FF;"></div><div id="colorCube" class="paletteColor" style="background:#0033FF;"></div><div id="colorCube" class="paletteColor" style="background:#0066FF;"></div><div id="colorCube" class="paletteColor" style="background:#0099FF;"></div><div id="colorCube" class="paletteColor" style="background:#00CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#00FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#3300FF;"></div><div id="colorCube" class="paletteColor" style="background:#3333FF;"></div><div id="colorCube" class="paletteColor" style="background:#3366FF;"></div><div id="colorCube" class="paletteColor" style="background:#3399FF;"></div><div id="colorCube" class="paletteColor" style="background:#33CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#33FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#6600FF;"></div><div id="colorCube" class="paletteColor" style="background:#6633FF;"></div><div id="colorCube" class="paletteColor" style="background:#6666FF;"></div><div id="colorCube" class="paletteColor" style="background:#6699FF;"></div><div id="colorCube" class="paletteColor" style="background:#66CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#66FFFF;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FF0000;"></div><div id="colorCube" class="paletteColor" style="background:#990000;"></div><div id="colorCube" class="paletteColor" style="background:#993300;"></div><div id="colorCube" class="paletteColor" style="background:#996600;"></div><div id="colorCube" class="paletteColor" style="background:#999900;"></div><div id="colorCube" class="paletteColor" style="background:#99CC00;"></div><div id="colorCube" class="paletteColor" style="background:#99FF00;"></div><div id="colorCube" class="paletteColor" style="background:#CC0000;"></div><div id="colorCube" class="paletteColor" style="background:#CC3300;"></div><div id="colorCube" class="paletteColor" style="background:#CC6600;"></div><div id="colorCube" class="paletteColor" style="background:#CC9900;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC00;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF00;"></div><div id="colorCube" class="paletteColor" style="background:#FF0000;"></div><div id="colorCube" class="paletteColor" style="background:#FF3300;"></div><div id="colorCube" class="paletteColor" style="background:#FF6600;"></div><div id="colorCube" class="paletteColor" style="background:#FF9900;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC00;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF00;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#00FF00;"></div><div id="colorCube" class="paletteColor" style="background:#990033;"></div><div id="colorCube" class="paletteColor" style="background:#993333;"></div><div id="colorCube" class="paletteColor" style="background:#996633;"></div><div id="colorCube" class="paletteColor" style="background:#999933;"></div><div id="colorCube" class="paletteColor" style="background:#99CC33;"></div><div id="colorCube" class="paletteColor" style="background:#99FF33;"></div><div id="colorCube" class="paletteColor" style="background:#CC0033;"></div><div id="colorCube" class="paletteColor" style="background:#CC3333;"></div><div id="colorCube" class="paletteColor" style="background:#CC6633;"></div><div id="colorCube" class="paletteColor" style="background:#CC9933;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC33;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF33;"></div><div id="colorCube" class="paletteColor" style="background:#FF0033;"></div><div id="colorCube" class="paletteColor" style="background:#FF3333;"></div><div id="colorCube" class="paletteColor" style="background:#FF6633;"></div><div id="colorCube" class="paletteColor" style="background:#FF9933;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC33;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF33;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#0000FF;"></div><div id="colorCube" class="paletteColor" style="background:#990066;"></div><div id="colorCube" class="paletteColor" style="background:#993366;"></div><div id="colorCube" class="paletteColor" style="background:#996666;"></div><div id="colorCube" class="paletteColor" style="background:#999966;"></div><div id="colorCube" class="paletteColor" style="background:#99CC66;"></div><div id="colorCube" class="paletteColor" style="background:#99FF66;"></div><div id="colorCube" class="paletteColor" style="background:#CC0066;"></div><div id="colorCube" class="paletteColor" style="background:#CC3366;"></div><div id="colorCube" class="paletteColor" style="background:#CC6666;"></div><div id="colorCube" class="paletteColor" style="background:#CC9966;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC66;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF66;"></div><div id="colorCube" class="paletteColor" style="background:#FF0066;"></div><div id="colorCube" class="paletteColor" style="background:#FF3366;"></div><div id="colorCube" class="paletteColor" style="background:#FF6666;"></div><div id="colorCube" class="paletteColor" style="background:#FF9966;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC66;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF66;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FFFF00;"></div><div id="colorCube" class="paletteColor" style="background:#990099;"></div><div id="colorCube" class="paletteColor" style="background:#993399;"></div><div id="colorCube" class="paletteColor" style="background:#996699;"></div><div id="colorCube" class="paletteColor" style="background:#999999;"></div><div id="colorCube" class="paletteColor" style="background:#99CC99;"></div><div id="colorCube" class="paletteColor" style="background:#99FF99;"></div><div id="colorCube" class="paletteColor" style="background:#CC0099;"></div><div id="colorCube" class="paletteColor" style="background:#CC3399;"></div><div id="colorCube" class="paletteColor" style="background:#CC6699;"></div><div id="colorCube" class="paletteColor" style="background:#CC9999;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC99;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF99;"></div><div id="colorCube" class="paletteColor" style="background:#FF0099;"></div><div id="colorCube" class="paletteColor" style="background:#FF3399;"></div><div id="colorCube" class="paletteColor" style="background:#FF6699;"></div><div id="colorCube" class="paletteColor" style="background:#FF9999;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC99;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF99;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#00FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#9900CC;"></div><div id="colorCube" class="paletteColor" style="background:#9933CC;"></div><div id="colorCube" class="paletteColor" style="background:#9966CC;"></div><div id="colorCube" class="paletteColor" style="background:#9999CC;"></div><div id="colorCube" class="paletteColor" style="background:#99CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#99FFCC;"></div><div id="colorCube" class="paletteColor" style="background:#CC00CC;"></div><div id="colorCube" class="paletteColor" style="background:#CC33CC;"></div><div id="colorCube" class="paletteColor" style="background:#CC66CC;"></div><div id="colorCube" class="paletteColor" style="background:#CC99CC;"></div><div id="colorCube" class="paletteColor" style="background:#CCCCCC;"></div><div id="colorCube" class="paletteColor" style="background:#CCFFCC;"></div><div id="colorCube" class="paletteColor" style="background:#FF00CC;"></div><div id="colorCube" class="paletteColor" style="background:#FF33CC;"></div><div id="colorCube" class="paletteColor" style="background:#FF66CC;"></div><div id="colorCube" class="paletteColor" style="background:#FF99CC;"></div><div id="colorCube" class="paletteColor" style="background:#FFCCCC;"></div><div id="colorCube" class="paletteColor" style="background:#FFFFCC;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FF00FF;"></div><div id="colorCube" class="paletteColor" style="background:#9900FF;"></div><div id="colorCube" class="paletteColor" style="background:#9933FF;"></div><div id="colorCube" class="paletteColor" style="background:#9966FF;"></div><div id="colorCube" class="paletteColor" style="background:#9999FF;"></div><div id="colorCube" class="paletteColor" style="background:#99CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#99FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#CC00FF;"></div><div id="colorCube" class="paletteColor" style="background:#CC33FF;"></div><div id="colorCube" class="paletteColor" style="background:#CC66FF;"></div><div id="colorCube" class="paletteColor" style="background:#CC99FF;"></div><div id="colorCube" class="paletteColor" style="background:#CCCCFF;"></div><div id="colorCube" class="paletteColor" style="background:#CCFFFF;"></div><div id="colorCube" class="paletteColor" style="background:#FF00FF;"></div><div id="colorCube" class="paletteColor" style="background:#FF33FF;"></div><div id="colorCube" class="paletteColor" style="background:#FF66FF;"></div><div id="colorCube" class="paletteColor" style="background:#FF99FF;"></div><div id="colorCube" class="paletteColor" style="background:#FFCCFF;"></div><div id="colorCube" class="paletteColor" style="background:#FFFFFF;"></div></div>';
    var hideCube = function() { if ($('#colorCubePopup').css('display') !== 'none') { $('#colorCubePopup').hide() } };
   
    $('.sceditor-button-color').after('<a class="sceditor-button sceditor-button-cube" title="خلفية للنص"><div style="background-image:url(http://i57.servimg.com/u/f57/11/54/61/22/color-10.png);"></div></a>');
    $('body').append(colorPicker);   
    $(document).on('click','.sceditor-button-cube',function() {
        if ($('#colorCubePopup').css('display') == 'none') {
            var X = $('.sceditor-button-cube').offset().left;
            var Y = $('.sceditor-button-cube').offset().top + 25;
           
            $('#colorCubePopup').css('left',X + 'px').css('top',Y + 'px').show();
        }
        else { hideCube() }
    });
   
    $(document).on('mouseover','#colorCube',function() {
        var color = $(this).attr('style').replace(/background:(.*?);/,'$1');
        $('#colorResult').attr('style','background:'+color+';');
        $('#hexColor').val(color);
    });
   
    $(document).on('click','#colorCube',function() {
      var color = $(this).attr('style').replace(/background:(.*?);/,'$1');
      $('#text_editor_textarea').sceditor('instance').insertText('<span style="background-color:' + color + ';">','</span>');
      hideCube();
    });

    $(document).on('keypress','#hexColor',function(e) {
        setTimeout(function() {
            var updateColor = $('#hexColor').val();
            $('#colorResult').attr('style','background:'+updateColor+';')
        },200);
       
        if (e.keyCode == 13) {
          var color = $('#hexColor').val();
          $('#text_editor_textarea').sceditor('instance').insertText('<span style="background-color:' + color + ';">','</span>');
          hideCube();
          return false;
        }
    });
   
    $('.sceditor-button-source').click(function() { $('.sceditor-button-cube').removeClass('disabled') });
    $('.sceditor-button').not('.sceditor-button-cube').click(function() { hideCube() });
    $('.sceditor-container textarea').focus(function() { hideCube() });
    $('.sceditor-container iframe').contents().mousedown(function() { hideCube() });
})});