WE 9 Textarea und Klassen.

Fragen zum Erstellen von Templates für webEdition.
mtbrmatze
Senior Member
Beiträge: 136
Registriert: Di 22. Jan 2013, 19:46

WE 9 Textarea und Klassen.

Beitragvon mtbrmatze » Sa 1. Mai 2021, 23:49

Hallo Community,

ich scheitere gerade kläglich, eine CSS Datei mit Klassen in die Textarea einzulesen. Der CSS-Klassen Dropdown bleibt leer auch im Fenster "Grafik einfügen" bleibt der CSS style Dropdown ohne Einträge.

Code: Alles auswählen

<we:css id="30" applyto="wysiwyg"     media="all" rel="stylesheet"/>
Die CSS Datei ist im Template eingebunden.

Code: Alles auswählen

<we:textarea wysiwyg="true" name="TXT-1" width="100%" editorcss="30" class="my-textarea-true" height="400" imagestartid="10" />
Dieser Code steht in der Template.

Natürlich könnte ich die gewünschten Klassen mit classes="" einbinden, aber kommt eine neue Klasse dazu, ist dies in allen Vorlagen zu ändern.

Das muss doch anderswie gehen, oder.

Danke.
Matze

mokraemer
Senior Member
Beiträge: 3619
Registriert: So 8. Aug 2010, 01:23
Wohnort: Mainz

Re: WE 9 Textarea und Klassen.

Beitragvon mokraemer » So 2. Mai 2021, 11:03

Auch sowas sollte in der Doku beantwortet werden. Wäre also schön, wenn sich hier weitere Leute beteiligen würden.
webEdition-Kern-Entwickler

NilSole
Senior Member
Beiträge: 303
Registriert: Mi 27. Mär 2019, 15:28

Re: WE 9 Textarea und Klassen.

Beitragvon NilSole » So 2. Mai 2021, 22:14

Eigentlich könnte das so klappen, wie von dir beschrieben. Hast du vielleicht das CSS innerhalb von <we:ifNotWebEdition> o.ä. eingesetzt? Das muss für die tiny-Textarea auch verfügbar sein.

mtbrmatze
Senior Member
Beiträge: 136
Registriert: Di 22. Jan 2013, 19:46

Re: WE 9 Textarea und Klassen.

Beitragvon mtbrmatze » Mo 3. Mai 2021, 10:55

Ich habe drei CSS Files für das Template. Diese sind nicht über WE verwaltet, sondern liegen per FTP auf dem Server. Und eben die Datei mit den Klassen für die Textarea.

Code: Alles auswählen

<link rel="stylesheet" href="/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/css/style.min.css" type="text/css" />
<we:ifEditmode>
<we:css id="30" applyto="all"         media="all" rel="stylesheet"/>
</we:ifEditmode>
Im Firefox Inspector werden unter dem <iframe> von TinyMCE alle CSS Files eingebunden auch jene die nicht in WE liegen.

Passt ja eigentlich, da ich ja auf alle Schriften und Styles zugreifen möchte, bzw. will dass die Textarea dem Content so nahe wie möglich dargestellt wird.

Wenn ich nun die externen 3 Css Files mit <we:ifNotEditmode> rausnehme, ist die Textarea ohne Styles aber das Klassen Menu funktioniert.

Jetzt hab ich unter Einstellungen den Eintrag in we:tag Standards im Visier.
Bildschirmfoto 2021-05-03 um 10.51.23.png
Bildschirmfoto 2021-05-03 um 10.51.23.png (16.74 KiB) 1722 mal betrachtet
Ich dachte, die Auswahl "arround" lässt alles umfliessen, ist aber auch nicht so.

Wie kann ich die grafische Darstellung so nahe am Endprodukt haben, aber auf die wenigen Klassen zugreifen?

Da bräucht ich nochmals Hilfe.

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: WE 9 Textarea und Klassen.

Beitragvon WBTMagnum » Mo 3. Mai 2021, 11:18

Hallo Matze,

Wie sind denn deine Klassen definiert? Wenn ich mich recht erinnere, dürfen hier wirklich nur einfache Klassen ohne zusätzliche Selektoren angegeben sein, damit diese im Select aufscheinen (z.B. ".bild{...}").

Weiters brauchst es denke ich nicht beide Angaben. Entweder das CSS über das Attribut "editorcss" referenzieren, oder eben via "<we:css applyto="wysiwyg"/>" laden. Das Attribut classes="" darf keinesfalls gesetzt sein, da damit alle automatisch erfassten Klassen überschrieben werden (nur der Vollständigkeit halber).


Ich hab jetzt noch deine letzte Antwort gesehen. Das ist mysteriös. Was passiert, wenn du die drei CSS Dateien mittels <we:css/> einbindest? Klappt es dann?


Liebe Grüße,
Sascha

ThomasGoebe

Re: WE 9 Textarea und Klassen.

Beitragvon ThomasGoebe » Mo 3. Mai 2021, 11:18

Hallo Matze,

mit

Code: Alles auswählen

<we:css id="30" applyto="wysiwyg"     media="all" rel="stylesheet"/>
legst Du nur fest, dass die CSS Anweisungen im Editor zur Anwendung kommen sollen. D.h. wenn in der CSS Datei für p etwas definiert ist, dann greifen diese Anweisungen für alle Paragraphen im Editor. (Aber zunächst auch nur dort).

Selbst definierte Klassen (.meineklasse) greifen natürlich nur, wenn einem Element auch diese Klasse zugewiesen wird. Damit dies geht, muss der Editor wissen, welche Klassen zugewiesen werden können. Daher brauchst Du das classes Attribut.

Code: Alles auswählen

<we:textarea classes="meineklasse" wysiwyg="true" name="TXT-1" width="100%" editorcss="30" class="my-textarea-true" height="400" imagestartid="10" />
Damit Du das nun eben nicht in allen Vorlagen ändern musst, wenn eine neue Klasse dazu kommt, nutze einfach eine globale Variable in einem settings Template, das Du in alle anderen Vorlagen (oder in der Hauptvorlage) einbindest:

Code: Alles auswählen

<we:setVar to="global" nameto="textareaClasses" value="meineklasse" />
In der Textarea dann so:

Code: Alles auswählen

<we:textarea classes="\$textareaClasses" wysiwyg="true" name="TXT-1" width="100%" editorcss="30" class="my-textarea-true" height="400" imagestartid="10" />

NACHTRAG: WBTMagnum wies gerade daraufhin, dass wenn classes nicht definiert ist, alle Klassen aus der CSS Datei im Auswahldialog stehen sollten. Das ist für mich neu aber logisch. Also ist meine Antwort damit ggf. falsch oder hinfällig.

mtbrmatze
Senior Member
Beiträge: 136
Registriert: Di 22. Jan 2013, 19:46

Re: WE 9 Textarea und Klassen.

Beitragvon mtbrmatze » Mo 3. Mai 2021, 12:50

Hallo,

danke nochmals für die Antworten.

Ich habe nun alle CSS Files in WE geladen und mit we:css eingebunden, das Ergebnis könnt ihr auf den Bildern sehen.
Cool wäre, wenn alles wie in Textarea 2 funktioniert. Sämtlicher CSS Code der Seite wird zur Darstellung verwendet, aber in Klassen, Bilder und Link ist nur die editorcss verwendbar.
result-site.png
result-site.png (86.29 KiB) 1707 mal betrachtet
Hier der Code

Code: Alles auswählen

		<we:css id="4" applyto="all"          media="all" rel="stylesheet"   comment="Formatierungen von Feldern in Webedition  "/>
		<we:css id="9" applyto="all"          media="all" rel="stylesheet"   comment="Fonts laden"/>
		<we:css id="28" applyto="all"         media="all" rel="stylesheet"   comment="Bootstrap "/>
		<we:css id="29" applyto="all"         media="all" rel="stylesheet"   comment="Meine Styles"/>

		<we:css id="3" applyto="all"          media="all" rel="stylesheet"    comment="Hier stehen die Formatierungen welche in TA geladen werden sollen."/>

	</head>
	<body>


		<div class="content-wrap">
			<div class="row mb-3">
				<div class="col-md-7 offset-md-1 col-sm-9">
					<small>< wysiwyg="true" name="txt-1" width="100%" editorcss="3" ignoredocumentcss="true" width="100%" height="100" imagestartid="1" /></small>
					<we:textarea wysiwyg="true" name="txt-1" width="100%" editorcss="3" ignoredocumentcss="true" width="100%" height="100" imagestartid="1" />
					<hr>
					<small>< wysiwyg="true" name="txt-2" width="100%" editorcss="3"  width="100%" height="100" imagestartid="1" /></small>
					<we:textarea wysiwyg="true" name="txt-2" width="100%" editorcss="3"  width="100%" height="100" imagestartid="1" />
					<hr>
					<small>< wysiwyg="true" name="txt-3" classes="p-line,link-bg,link-uline" width="100%" height="100"/></small>
					<we:textarea wysiwyg="true" name="txt-3" classes="p-line,link-bg,link-uline" width="100%" height="100"/>
				</div>
			</div>
		</div>

mtbrmatze
Senior Member
Beiträge: 136
Registriert: Di 22. Jan 2013, 19:46

Re: WE 9 Textarea und Klassen.

Beitragvon mtbrmatze » Mo 3. Mai 2021, 13:15

ThomasGoebe hat geschrieben: Mo 3. Mai 2021, 11:18 Hallo Matze,

mit

Code: Alles auswählen

<we:css id="30" applyto="wysiwyg"     media="all" rel="stylesheet"/>
legst Du nur fest, dass die CSS Anweisungen im Editor zur Anwendung kommen sollen. D.h. wenn in der CSS Datei für p etwas definiert ist, dann greifen diese Anweisungen für alle Paragraphen im Editor. (Aber zunächst auch nur dort).

Selbst definierte Klassen (.meineklasse) greifen natürlich nur, wenn einem Element auch diese Klasse zugewiesen wird. Damit dies geht, muss der Editor wissen, welche Klassen zugewiesen werden können. Daher brauchst Du das classes Attribut.

Code: Alles auswählen

<we:textarea classes="meineklasse" wysiwyg="true" name="TXT-1" width="100%" editorcss="30" class="my-textarea-true" height="400" imagestartid="10" />
Damit Du das nun eben nicht in allen Vorlagen ändern musst, wenn eine neue Klasse dazu kommt, nutze einfach eine globale Variable in einem settings Template, das Du in alle anderen Vorlagen (oder in der Hauptvorlage) einbindest:

Code: Alles auswählen

<we:setVar to="global" nameto="textareaClasses" value="meineklasse" />
In der Textarea dann so:

Code: Alles auswählen

<we:textarea classes="\$textareaClasses" wysiwyg="true" name="TXT-1" width="100%" editorcss="30" class="my-textarea-true" height="400" imagestartid="10" />

NACHTRAG: WBTMagnum wies gerade daraufhin, dass wenn classes nicht definiert ist, alle Klassen aus der CSS Datei im Auswahldialog stehen sollten. Das ist für mich neu aber logisch. Also ist meine Antwort damit ggf. falsch oder hinfällig.

Suuuuper danke Thomas.

Dein Vorschlag funktioniert perfekt. Ich bin wohl mit meinem Wissen nicht soweit gegangen, dass webEdition sooo flexibel ist und Variablen in den we Code von Textareas verarbeitet.

Genau solche Vorschläge sollten irgendwo zugänglich sein. Früher gab es einmal das we-devEdge, da wurde man auch immer fündig.

Jetzt habe ich genau nur noch 1 Problem, nämlich jenes aus Eintrag: viewtopic.php?f=87&t=42000


Zurück zu „webEdition Templates erstellen (we:Tags)“

Wer ist online?

Mitglieder in diesem Forum: Bing [Bot] und 9 Gäste