Warum kein WYSIWYG im Editor?
Hallo,
im habe das Template Webconsult und wollte nun mal einen Artikel eingeben. Dabei ist mir aufgefallen das der Typolight Editor kein richtiges WYSIWYG kann. Sehr störend ist das Aufzählungen nicht im Editor erkennbar sind. Ich möchte für Aufzählungen kein extra Inhaltselement nehmen.
Warum werden Aufzählungen im Editor nicht entsprechend formatiert? Normalerweise kann das der verbendete Editor doch, warum nicht in Typolight?
Bug in den WebConsult Template?
Hi
Mit dem erhältlichen WebConsult Template habe ich erhebliche Probleme. Man erkennt im Editor keine Listen/Aufzählungen wenn man Artikel schreibt. Könnt ihr mal ein Bugfix mitteilen wie man erreicht das man auch im Editor Listen deutlich erkennt? So das man halt gleich loslegen kann und Artikel schreiben kann, so geht das echt übel.
Siehe hier der Thread:
https://community.contao.org/de/show...2178#post32178
Liste der Anhänge anzeigen (Anzahl: 1)
Hat doch keine Stunde gedauert :D
Ich kann das also nicht bestätigen. Nicht dass wir aneinander vorbei sprechen, hast du das 1. oder das 2. Buch? Sieh dir mal den Screenshot an. Ich hab nur die original, unveränderte basic.css geöffnet (was man ja nicht tun sollte, wenn man die CSS-Dateien mit dem Modul verwaltet) und ans Ende den Code für TinyMCE eingefügt. An diesem Code kanns sowieso nicht liegen, da der ID-Selektor body#tinymce im FE nicht greifen kann, es sei denn du hast ihn manuell dort eingefügt.
Andreas
Solltest du wirklich gar nicht klar kommen, schau ich mir auch gerne mal dein BE an.
Liste der Anhänge anzeigen (Anzahl: 2)
Ich muss mich jetzt doch nochmal selbst korrigieren, weil ich auch Mist erzählt habe :o
Das Zeichen > vor den Listen ist doch ein Bild. Dann ist dieses Bild bei dir auf jeden Fall schon mal vorhanden gewesen.
Es ist so, dass wenn du eine Liste mit dem CE 'Aufzählung' erstellst, diese Listen auch formatiert werden. Das geschieht hierrüber in der webconsulting.css ab Zeile 213:
Code:
.ce_list ol
{
margin-left:3em;
list-style-type:decimal;
}
.ce_list ul
{
margin-left:1.5em;
}
.ce_list ul li
{
padding-left:18px;
background-image:url("tl_files/webconsulting/arrow.gif");
background-position:left center;
background-repeat:no-repeat;
}
Erstellst du aber eine Liste innerhalb eines CEs 'Text', dann werden die Listen nicht formatiert. Ändere also die Selektoren (siehe Screenshot2), wenn du diese Formatierung auch für Listen in Textelementen im FE haben möchtest.
Screenshot1 zeigt das Ergebnis im FE. Da Leo im kompletten Template keine Listen innerhalb von Text-Elementen (und schon gar keine eingerückten Listen) benutzt hat, ist die Formatierung im FE für eingerückte Listen, wie du siehst, nicht perfekt, was du aber leicht mit firebug im Firefox korrigieren kannst.
Jetzt müsstest du auch wissen, wie du es hinbekommst, dass die Listen im BE im TinyMCE so aussehen wie im Frontend :D
Andreas
Swap basic.css für korrekte Listen-Anzeige im TinyMCE
Webconsulting 'basic.css'
Code:
/* Style sheet basic */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;vertical-align:baseline;border:0;font-size:100%;outline:0;background:transparent;}
body{font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;font-size:75%;color:#333333;line-height:1.5;}
input,textarea,select{margin:0;padding:0;font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;font-size:1.1em;color:#333333;}
pre,code{font-family:"Andale Mono", monospace;font-size:1.1em;white-space:pre;}
h1,h2,h3,h4,h5,h6{font-family:Helvetica, Arial, sans-serif;font-weight:normal;}
h1{margin-bottom:0.25em;font-size:2.1em;}
h2{margin-bottom:0.4em;font-size:1.75em;}
h3{margin-bottom:0.65em;font-size:1.5em;}
a{color:#133b9a;}
a:hover{color:#1f4ecc;}
ol,ul{list-style-type:circle;}
blockquote,q{quotes:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
*:focus{outline:0;}
* html ul,* html ol{position:relative;}
* html ol{margin-left:2em;}
*:first-child+html ol{margin-left:2em;}
* html legend{margin-bottom:1.4em;}
*:first-child+html legend{margin-bottom:1.4em;}
Musicacademy basic.css
Code:
/* Style sheet basic */
body{margin:0 0 24px 0;padding:0;}
a,body,div,em,input,label,li,ol,p,select,span,strong,td,th,textarea,u,ul{font-family:Verdana, sans-serif;}
a,body,div,input,label,li,ol,p,select,td,th,textarea,u,ul{font-size:11px;}
h1{margin:0 0 12px 0;padding:0;font-weight:bold;font-size:13px;}
h2{margin:0 0 6px 0;padding:0;font-weight:bold;font-size:11px;}
a{text-decoration:none;color:#a84204;}
a:hover{text-decoration:underline;color:#a84204;}
img{vertical-align:middle;border:0px;}
p,pre,form{margin:0;padding:0;}
Wenigstens soweit bin ich rein empirisch gekommen in der Angelegenheit:
Wenn ich in Webconsulting (Version 2 deutsch) die basic.css der Musiacademy einbinde (gemeint ist damit glaube ich diese mit der Webconsulting-basic.css in der Datenbank ersetze), dann macht TinyMCE in Webconsulting genau das Erwartete: es zeigt die Listen korrekt an (wenigstens bei meiner Installation).
Die Frage, die ich aus Zeitgründen noch nicht beantworten kann, ist, welche Notation in der Webconsulting-basic.css die Sache verhindert, ja es verzweigt sogar in die webconsulting.css und installiert die Pfeilgrafik was nicht Sinn der Sache wäre (wie früher im Thread erwähnt).
Gruss
jachen
Aber auch das ist nicht die Lösung des Problems
Die Webconsulting Designer haben im basic.css die Notation ul, li mit list-style-type:none; zugunsten der eigenen Listen im Layout übersteuert. Somit bleibt für
TinyMCE die Funktion inaktiv. Vielleicht kennt hier ein Krack einen Ausweg.
Gruss
Jachen