Author Topic: CKEditor - Farbpalette anpassen  (Read 594 times)

Offline Hollol

  • Posts: 204
CKEditor - Farbpalette anpassen
« on: October 07, 2016, 09:35:35 AM »
Hallo zusammen,

ich würde gerne im CKEditor die Farbpalette für Schriftfarbe, Hintergründe etc. anpassen und site-spezifische Farben hinzufügen. Nur leider finde ich nirgends etwas, wo ich die hinterlegen kann.
Im FCK-Editor war das kein Problem.

Oder bin ich gerade betriebsblind?

Grüße
Hollol

Offline jacobi22

  • Posts: 5685
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: CKEditor - Farbpalette anpassen
« Reply #1 on: October 07, 2016, 10:19:36 AM »
zuerst in der include.php des ckeditors um Zeile 77 $bWbConfigSetting auf true stellen, damit schaltet man dann u.a. auch die Funktionen in den Dateien editor.template.js, editor.styles.js oder wb_ckconfig.js frei, die sich im Ordner modules/ckeditor/wb_config oder in Hauptordner deines Templates befinden bzw befinden können. Ich arbeite gern mit update-sicheren Lösungen, darum kopiere ich mir die drei Dateien in mein(e) Template(s)

einene Farben und Schriften lassen sich dort z.b. so definieren wie unten angegeben. Beachte dabei, das Vorder- und Hintergrundfarbe eine gemeinsame Definition haben. Bei Farben hat man noch die Möglichkeit, zur Original-Palette zu wechseln. Bei den Schriften werden dann nur die festgelegten ermöglicht

(aus wb_ckconfig.js)
Code: [Select]
CKEDITOR.editorConfig = function( config )
{
config.colorButton_colors = '2F4F4F,9D3232,595959,000,800000,008080,000080,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,FFA500,FFFF00,D3D3D3,FFF';

config.font_names =
'Arial/Arial, Helvetica, sans-serif;' +
'Georgia/Georgia, serif;' +
'Tahoma/Tahoma, Geneva, sans-serif;' +
'Tangerine/Tangerine, Arial, Helvetica, sans-serif;' +
'Verdana/Verdana, Geneva, sans-serif';
}

eigene Styles kommen aus der Datei editor.styles.js, siehe auch das Original im Ordner modules/ckeditor/wb_config
Dabei wird einem zuvor markiertem Text eine festgelegte CSS-Klasse zugewiesen - nach meinen Erfahrungen eher etwas für geübtere Leute

Beispiel:
Code: [Select]
CKEDITOR.addStylesSet( 'wb',
[
{ name : 'Seitentitel_h3', element : 'span', attributes: {'class' : 'site_title_h3' } },
{ name : 'Seitentitel_h2', element : 'span', attributes: {'class' : 'site_title_h2' } },
{ name : 'Seitentitel_h1', element : 'span', attributes: {'class' : 'site_title_h1' } },
{ name : 'UL Slider', element : 'ul', attributes : { 'class' : 'slider' } },
{ name : 'UL quad', element : 'ul', attributes : { 'class' : 'quad' } },
{ name : 'UL quad2', element : 'ul', attributes : { 'class' : 'quad2' } },
{ name : 'italic 1', element : 'span',  attributes : { 'class' : 'italic1' } },
{ name : 'italic 2', element : 'span', attributes : { 'class' : 'italic2' } },
{ name : 'h3_lnk', element : 'span', attributes : { 'class' : 'h3_lnk' } }
]);

site_title_h3 ist nicht das gleiche wie ein "einfaches" h3, eher eine eigene Definition einer Klasse, die ähnlich dem h3 ist


Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline hgs

  • Betatester
  • **
  • Posts: 1059
    • EFG MG
Re: CKEditor - Farbpalette anpassen
« Reply #2 on: October 07, 2016, 10:32:40 AM »
Soviel ist weiß wird sowas doch in deiner css festgelegt.
Wenn du im CKEditor das gleiche wie im FE sehen willst (so habe ich deine Frage verstanden) kannst du eine editor.css in deinem Template-root erstellen und hinterlegen.
Hier trägt du alle wichtigen Dinge ein.
Damit sehen meine Autoren die Seite incl. Link-Farben im Editor so wie sie im FE aussieht (gilt dann nur für den Hauptcontent mit 500px Contentbreite)

Hier mal ein Beispiel von meiner editor.css
Code: [Select]
body {
padding-top: 15px;
width:500px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #333;
}


 h1 {
font-size: x-large;
margin: 20px 0 20px 0;
color: #808080;
}

 h2 {
    font-size: large;
    margin: 25px 0 10px 0;
}

 p {
    font-size: 14px;
line-height: 20px;
text-align: justify;
margin-bottom: 10px;
}

 p a {
    /*color: #333;*/
    color: #FF7600; /* Linkfarbe mit Textfarbe getauscht hgs*/
    font-weight: bold;
    text-decoration: none;
}

p a:hover {
    color: #333; /* Linkfarbe mit Textfarbe getauscht hgs*/
}

/*Anfang eingefügt hgs*/
 img
{
max-width: 500px;
margin: 10px;
}

 table
{
max-width: 500px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}

#content table tr td
{
padding: 5px;
}
/*Ende eingefügt hgs*/
/*Eingefügt für die Sitemap*/
 ul {
  margin-left:1em;
}

 ul li {
  margin-left:1em;
}

 ul li a
{
    color: #FF7600;
    text-decoration: none;
}

 ul li a:hover
{
color: #333;
}
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

Offline Hollol

  • Posts: 204
Re: CKEditor - Farbpalette anpassen
« Reply #3 on: October 07, 2016, 10:46:35 AM »
Perfekt! Danke!

Das hier hatte ich gesucht:

Quote
CKEDITOR.editorConfig = function( config )
{
config.colorButton_ colors = '2F4F4F,9D3232,595959,000,800000,008080,000080,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,FFA500,FFFF00,D3D3D3,FFF';


Da ich mich in meiner Frage in der Eile etwas unglücklich ausgedrückt habe, hat hgs wahrscheinlich meine nächste Frage gleich schon mitbeantwortet  :-D

Quote
Damit sehen meine Autoren die Seite incl. Link-Farben im Editor so wie sie im FE aussieht
(Y)

Besten Dank an euch beide...


Offline hgs

  • Betatester
  • **
  • Posts: 1059
    • EFG MG
Re: CKEditor - Farbpalette anpassen
« Reply #4 on: October 08, 2016, 09:40:39 AM »
Immer wieder gerne
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

 

postern-length