ckeditor

Alternativer Text: was passiert, wenn man ein SVG croppt — Bildunterschrift: SVG gecroppt

Default/Linksbündig Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zentriert Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Rechtsbündig Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Blocksatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zitatblock Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, _{sed diam voluptua. At vero} ^{eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren}, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Nummer 1
Nummer 2
1. Nummer 2.1
2. Nummer 2.2
  1. Nummer 2.2.1
  2. Nummer 2.2.2
3. Nummer 2.3
  1. Nummer 2.3.1
Nummer 3

Und jetzt eine ungeordnete Liste:

Ein Eintrag
- Ein Untereintrag zum Eintrag
  - Ein Unteruntereeintrag
  - Noch ein Unteruntereintrag
- Ein weiterer Untereintrag
noch ein Eintrag
Ein letzter Eintrag

Dies war mal eine ckeditor-h1-Überschrift. Aber mittlerweile ist der ckeditor so eingestellt, dass er keine h1-Überschriften mehr erlaubt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

Eine h2-Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

Eine h3-Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

Eine h4-Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

Eine h5-Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

pre-formatted / "Formatiert". Sollte aussehen wie monospace. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
  "<pre>" gibt
             Whitespace    so
   aus   wie er
                 geshrieben      wird. Macht auch keine automatischen Zeilenumbrüche.

Normal. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. _{Text kann tiefgestellt werden.} ^{Und Text kann auch hochgestellt werden.} Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Es gibt auch Inline-Code (also Text innerhalb von <code>...</code> (via Stil-Dropdown).At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Hier kommt eine horizontale Linie (<hr />):

Da kam gerade eine horizontale Linie.

public class HelloWorld {
  
  public static void main(String[] args) {
    // ein Kommentar
    System.out.println("Hello ckEditor-Code-Schnipsel-Beispiel!");
  }
  
}

CKEditor Inline Image Bug 112 testcase

Does the following inline-image-wrapped-in-a-link not incorrectly add two links? Did it work?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

eins
zwei
drei

eins
zwei
drei

x
y
z

CKEditor Image Supports Funktionen für Inline-Bilder sind recht wackelig zu nutzen:

Bild eingefügt, dann im Quellcode herumeditiert, z.B. versucht, <img /> in einem <div></div> zu wrappen? Gute Chance, dass das eingefügte <img />-Tag nach dem nächsten Speichern weggelöscht wird.
Bild selektieren -> Toolfunktion "Linksbündig" auswählen -> Bild wird nach Abspeichern im Frontend links floaten.
Bild selektieren -> Toolfunktion "Rechtsbündig" auswählen -> Bild wird nach Abspeichern im Frontend rechts floaten.
Um Float aufzuheben: Bild rechtsklicken -> im erscheinenden Pop-Up "Bildeigenschaften" auswählen. Ein Modal erscheint -> "Ausrichtung: <nicht festgelegt>" auswählen -> Im Modal OK klicken.
"Speichern" geklickt und im Editor verweilt: Alle Bilder-Float-Konfigurationen bleiben bestehen und werden für diese "Editorsession" beibehalten.
"Speichern" geklickt und Editor verlassen: Alle Bilder-Float-Konfigurationen bleiben bestehen.
Editor wieder geöffnet: "Na sowas, die Bilder werden im Editor nicht mehr gefloatet angezeigt..."
- Solange man jetzt nicht auf Speichern klickt, bleiben aber alle Bilder-Float-Konfigurationen bestehen.
- "Speichern" geklickt? Tja, Pech gehabt, alle Bilder-Float-Konfigurationen sind ab jetzt auch im Frontend-Futsch. Ergo: Wenn man ein Content-Element beginnt zu editieren, muss man leider manuell bei allen Inline-Bildern wieder das gewünschte Floatverhalten zurechtklicken.
Stabilere Alternative: Im "Quellcode" dem Bild als CSS-Klasse das gewünschte Verhalten geben:
- float-start -> entspricht float: left;
- float-end -> entspricht float: right;
- clear-none -> entspricht clear: none;
- clear-left -> entspricht clear: left;
- clear-right -> entspricht clear: right;
- clear-both -> entspricht clear: both;

Paragraph zentriert, dann via CSS-Klassen an den inline-imgs:

img(float-left clear-none) | img(float-left clear-none) | img() | x | img() | y | img() | img(float-right clear-none) | img(float-right clear-none)

xy

Hier kommt ein <pre></pre>

Lorem ipsum dolor sit amet

Da war ein <pre></pre>

Funktioniert inline-code? BEGINDieser Text steht innerhalb von Tags. Oder die Tags wurden automatisch gelöschtEND Funktionierte inline-code?

Funktioniert inline-tt? BEGINDieser Text steht innerhalb von Tags. Oder die Tags wurden automatisch gelöschtEND Funktionierte inline-tt?

Zwei Bilder, neben dem Text rechts, zwei Spalten, bei Klick vergrößern. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.