السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم

الكود:

/*
* -- SCEditor HTML5 Color Picker --
* Version: 1.3 EN (2018-05-17)
* Author: Wecoc
* Description: Implements the default HTML5 Color Picker on the SCEditor
*/
 
$(document).ready(function() {
  if ($.sceditor && window.toolbar) {
    // Create SCEditor color buttons
    $.sceditor.command.set('color_h', {
      exec : drawColorHolder,
      txtExec : drawColorHolder
    });
    $.sceditor.command.set('color_p', {
      exec : callColorHolder,
      txtExec : callColorHolder
    });
    toolbar = toolbar.replace(/color/, 'color_h,color_p');
    setTimeout(setColorHTML5Picker, 5);
 
    // Set CSS propierties on SCEditor buttons
    $('head').append('<style type="text/css">' +
        '.sceditor-button-color_h div {' +
            'background-image:url(https://i.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
        '}' +
        '.sceditor-button-color_p div {' +
            'background-image:url(https://i.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
            'background-position: 0 -16px;' +
        '}' +
        '.sceditor-button-color_h {' +
            'padding-right: 2px !important;' +
            'border-radius: 3px 0px 0px 3px !important;' +
            'margin-right: -1px;' +
        '}' +
        '.sceditor-button-color_p {' +
            'padding-left: 2px !important;' +
            'border-radius: 0px 3px 3px 0px  !important;' +
            'width: 4px !important;' +
        '}' +
        '.color_holder {' +
            'position: absolute;' +
            'filter: alpha(opacity=0);' +
            'opacity: 0;' +
        '}' +
    '</style>');
  }
});
 
function setColorHTML5Picker() {
  // Get the color from last time if defined
  var start_color = startColorHolder();
  // Create HTML5 Color picker (hidden)
  var holder = $('<input type="color" class="color_holder" />')[0];
  $(holder).addClass('color_holder');
  holder.addEventListener("change", updateColorHolder);
  holder.value = start_color;
  // Define buttons "Current Color" & "New Color"
  var holder_button = document.querySelector('.sceditor-button-color_h div');
  var picker_button = document.querySelector('.sceditor-button-color_p div');
  // Set HTML5 button position
  var picker = document.querySelector('.sceditor-button-color_p');
  $(picker).after(holder);
  $('head').append('<style type="text/css">' +
      '.color_holder {' +
          'top: ' + picker.offsetTop + 'px;' +
          'left: ' + picker.offsetLeft + 'px;' +
          'width: ' + picker.offsetWidth + 'px;' +
          'height: ' + picker.offsetHeight + 'px;' +
      '}' +
  '</style>');
  // Set button tooltips
  holder_button.title = "Current Color";
  picker_button.title = "New Color";
  // Set button inner HTML (color line)
  holder_button.innerHTML = '<div class="color_line" style="position:relative;height:2px;top:12px;" />';
  refreshColorHolder(start_color);
  // Double hover effect
  var h = $(holder_button.parentElement), p = $(picker_button.parentElement);
  h.hover(function(){ p.addClass("hover") }, function(){ p.removeClass("hover") });
  p.hover(function(){ h.addClass("hover") }, function(){ h.removeClass("hover") });
  holder.addEventListener("mouseover", function(){ p.addClass("hover"); h.addClass("hover"); });
  holder.addEventListener("mouseout", function(){ p.removeClass("hover"); h.removeClass("hover"); });
};
 
function startColorHolder() {
  if (!localStorage.colorHolder) return "#ff0000";
  return localStorage.colorHolder;
};
 
function drawColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  this.insert("[color=" + holder.value + "]", "[/color]", true, true, true);
};
 
function callColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  holder.click();
};
 
function refreshColorHolder(value) {
  var line = document.querySelector('.color_line'); if (!line) return;
  line.style.background = value;
  localStorage.colorHolder = value;
};
 
function updateColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  refreshColorHolder(holder.value);
};