[Tutorial] Individuelle Farbpalette der Editoren gestalten

Hinweise und Tipps

1. Administrations-Bereich > Allgemeines > Nachrichten und E-Mails > Einstellungen > Beiträge >
   
2. 
   
3. Klick dann unterhalb auf "ABSENDEN".
   

Installieren des Scripts

1. Administrations-Bereich > Module > HTML und JAVASCRIPT > Javascript Codes Verwaltung
   
2. Falls noch nicht geschehen, bitte noch "Die Javascript-Code Verwaltung aktivieren", durch einen Klick auf den Radiobutton "Ja" und danach auf "ABSENDEN".
   
3. Nun klickt auf "EIN NEUES JAVASCRIPT ERSTELLEN".
   
4. Titel: Editor-Farbpalette
   
5. Platzierung: Auf allen Seiten
   
6. Bei "Javascript Code" den nachfolgenden Code einsetzen und klickt dann auf "ABSENDEN".
   

Code:

$(function(){$(function(){
          if ($("#text_editor_textarea").length < 1) return;
          $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
            var mColorBasic = [],
            html = $('<div />');
                       
            // Anfang der Farbpalette
                     
            mColorBasic["Schwarz"] = "#000000";
            mColorBasic["Dunkelblau"] = "#00008B";
            mColorBasic["Krickentengrün"] = "#008080";
            mColorBasic["Dunkelgrün"] = "#006400";
            mColorBasic["Indigo"] = "#4B0082";
            mColorBasic["Karmesinrot"] = "#DC143C";
            mColorBasic["Orangerot"] = "#FF4500";
            mColorBasic["Braun"] = "#663300";
               
            mColorBasic["Dunkelgrau"] = "#666666";
            mColorBasic["Königsblau"] = "#4169E1";
            mColorBasic["Dunkeltürkis"] = "#00CED1";
            mColorBasic["Grün"] = "#008000";
            mColorBasic["Dunkelviolett"] = "#9400D3";
            mColorBasic["Rot"] = "#FF0000";
            mColorBasic["Orange"] = "#FF9933";
            mColorBasic["Siennaerde"] = "#A0522D";
               
            mColorBasic["Hellgrau"] = "#D3D3D3";
            mColorBasic["Himmelblau"] = "#87CEEB";
            mColorBasic["Türkis"] = "#00FFFF";
            mColorBasic["Limonengrün"] = "#32CD32";
            mColorBasic["Orchidee"] = "#DA70D6";
            mColorBasic["Lachsfarben"] = "#FA8072";
            mColorBasic["Gold"] = "#FFD700";
            mColorBasic["Peru"] = "#CD853F";
               
            mColorBasic["Weiß"] = "#FFFFFF";
            mColorBasic["Blasstürkis"] = "#AFEEEE";
            mColorBasic["Aquamarinblau"] = "#7FFFD4";
            mColorBasic["Blassgrün"] = "#98FB98";
            mColorBasic["Rosa"] = "#FFC0CB";
            mColorBasic["Pfirsich"] = "#FFDAB9";
            mColorBasic["Gelb"] = "#FFFF00";
            mColorBasic["Gelbbraun"] = "#DEB887";
                     
            // Ende der Farbpalette
                     
            for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
                     
            html.find('span').click(function(e) {
              callback($(this).attr('color'));
              editor.closeDropDown(true);
              e.preventDefault();
            });
                     
            editor.createDropDown(caller, "color-picker", html);
          }
        })});

Einsetzen des CSS-Codes

Code:

/* -- Anfang zum Script Editor-Farbpalette -- */
/*Farbpaletten Icons*/
.color-option {
  display: inline-block !important;
  width: 15px !important; /* Weite der Icons */
  height: 15px !important; /* Höhe der Icons */
  border: 2px solid #fff !important;  /* Rahmen um die Icons */
  margin: 3px !important; /* Abstand der Icons */
  box-shadow: 0 0 2px #778899; /* Schatten */
  cursor: pointer !important;
}
.color-option span{
  display: block !important;
  width: 15px !important; /* Weite der Icons */
  height: 15px !important; /* Höhe der Icons */
}
.color-option, .color-option span {
  border-radius: 2px; /* Abrunden der Icons */
}
/*Farbpalette komplett, beeinflusst wird die Breite sowie die Anzahl der Icons in einer Reihe*/
.sceditor-dropdown.sceditor-color-picker {
  width: 200px !important; /* Breite der Palette */
  height: 100px !important; /* Hoöhe der Palette */
  padding: 5px !important;
  border-radius: 5px !important;
}
/* -- Ende zum Script Editor-Farbpalette -- */

Individuelle Gestaltung der Farbpalette

1. MColorBasic ["Weiß"]: Setzt den Namen der Farbe ein, dieser erscheint sobald sich der Mauscursor (bei Mouseover) darüber befindet.
   
2. #FFFFFF: Hier kann der Farbwert entsprechend angepasst werden.
   
3. Auch können weitere Farben durch hinzufügen nach gleichem Schemata eingesetzt oder aber auch entfernt werden.