WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Hilfe & Support (deutsch) => General Help & Support => Module => Topic started by: Hollol on October 07, 2016, 09:35:35 AM

Title: CKEditor - Farbpalette anpassen
Post by: Hollol 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
Title: Re: CKEditor - Farbpalette anpassen
Post by: jacobi22 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


Title: Re: CKEditor - Farbpalette anpassen
Post by: hgs 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;
}
Title: Re: CKEditor - Farbpalette anpassen
Post by: Hollol 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...

Title: Re: CKEditor - Farbpalette anpassen
Post by: hgs on October 08, 2016, 09:40:39 AM
Immer wieder gerne