Colori usanti di recente nell'editor

Installazione Javascript

• Titolo: a tua scelta
  
• Dove: in tutte le pagine
  
• Codice:
  

  Codice:

  /*
* -- Temp Colors --
* Version: 1.0 EN (2017-09-05)
* Author: Wecoc
* References: Font Awesome & Insert new BBCode buttons (Tutorial)
* Description: Adds a new BBCode with the last used colors
*/
 
// Colors are being treated same way as Font Awesome icons
 
$(function(){
  if (!$.sceditor) return;
  var autoClose = 1; // closes drop down after an icon is clicked, if enabled
  // icon list
  var color_array = 6 * 6 * 6;
  // create sceditor button and drop down (color)
  // this part rewrites the basic color chart
  $.sceditor.command.set('color', {
    dropDown : function(editor, caller, callback) {
      var a, color, b = '', c = document.createElement('DIV'), i = 0, ix, iy, iz;
      var data = ['00', '33', '66', '99', 'cc', 'ff'];
      for (i; i < color_array; i++) {
        ix = (i % 6); iy = (Math.floor(i / 6) % 6); iz = (Math.floor(Math.floor(i / 6) / 6) % 6);
        color = "#" + data[5-ix] + data[5-iz] + data[5-iy];
        b += '<a href="javascript:void(0)" class="sceditor-color-option" style="display:inline-block; background-color: ' +
          color + '" data-color="' + color + '" title="' + color + '" unselectable="on"></a>'
      }
      c.innerHTML = b;
      var i, j;
      for (a = c.getElementsByClassName("sceditor-color-option"), i = 0, j = a.length; i<j; i++) {
        a[i].onclick = function() {
          callback(this.title);
          autoClose && editor.closeDropDown(true);
          return false;
        };
      }
      editor.createDropDown(caller, 'color', c);
    },
 
    // wysiwyg
    exec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
    tooltip : 'Color'
  });
 
  // create sceditor button and drop down (color-temp)
  $.sceditor.command.set('color-temp', {
    dropDown : function(editor, caller, callback) {
      var a, color, b = '', c = document.createElement('DIV'), i = 0;
      for (i; i < 6; i++) {
        var ary = localStorage.getObj("color_temp");
        if (!ary) { return false };
        color = ary[i];
        if (color) {
          b += '<a href="javascript:void(0)" class="sceditor-color-option" style="display:inline-block; background-color: ' +
            color + '" data-color="' + color + '" title="' + color + '" unselectable="on"></a>'
        }
      }
      c.innerHTML = b;
      var i, j;
      for (a = c.getElementsByClassName("sceditor-color-option"), i = 0, j = a.length; i<j; i++) {
        a[i].onclick = function() {
          callback(this.title);
          autoClose && editor.closeDropDown(true);
          return false;
        };
      }
      editor.createDropDown(caller, 'color-temp', c);
    },
 
    // wysiwyg
    exec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color-temp').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color-temp').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
    tooltip : 'Recent color'
  });
 
  toolbar = toolbar.replace(/color,/,'color,color-temp,'); // add the button to the toolbar
 
  var color_stored_length = 10; // change here the length of the stored data
 
  // Save color data to the Cache
  function SaveColorCache(color) {
    var ary = localStorage.getObj("color_temp");
    if (!ary) { ary = [] };
    console.log(ary);
    var index = ary.indexOf(color);
    if (index >= 0) { ary.splice( index, 1 ) };
    ary.unshift(color);
    if (ary.length > color_stored_length) { ary.length = color_stored_length };
    localStorage.setObj("color_temp", ary);
  };
});
 
Storage.prototype.setObj = function(key, obj) {
  return this.setItem(key, JSON.stringify(obj));
};
Storage.prototype.getObj = function(key) {
  return JSON.parse(this.getItem(key));
};

Codice di stile CSS

phpBB2, phpBB3, PunBB, Invision

Codice:

div.sceditor-dropdown.sceditor-color, div.sceditor-dropdown.sceditor-color-temp {
  width: 66px;
  padding: 0px;
}
 
.sceditor-color-option{
  height:9px !important;
  width:9px !important;
}
 
.sceditor-button-color-temp div {
  background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/color_10.png) !important;
}

ModernBB

Codice:

div.sceditor-dropdown.sceditor-color, div.sceditor-dropdown.sceditor-color-temp {
  width: 66px;
  padding: 0px;
}
 
.sceditor-button-color-temp div {
  background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/color_10.png) !important;
}