Du hast zwei Möglichkeiten, das zu machen, direkt im Code oder mit CSS-Klassen.
1. Direkt im Code
Wenn Du den Editor TinyMCE verwendest, klickst Du den Button mit dem Icon <> an und öffnest so das Fenster, dass den Code anzeigt.
Beim Bild ergänzst Du den Tag
image beispielsweise so:
Code: Select all
<img style="float: left; margin: 0 20px 20px 0;" src="https://...>
Wenn das Bild rechts angezeigt werden soll, verwendest Du
float: right.
margin definiert den Abstand zum Text.
2. CSS-Klassen
Damit Du den CSS-Stil nicht überall manuell eingeben musst, kannst Du Klassen zum Editor TinyMCE hinzufügen.
Dazu erweiterst Du
tinymce.init in der Datei
plugin.php im Verzeichnis
/bl-plugins/tinymce mit vordefinierten Klassen. Beispielsweise:
Code: Select all
image_class_list: [
{title: 'keine', value: ''},
{title: 'Links', value: 'links'}
]
Bei diesem Beispiel würde
tinymce.init dann so aussehen (Zeile 95):
Code: Select all
tinymce.init({
selector: "#jseditor",
auto_focus: "jseditor",
element_format : "html",
entity_encoding : "raw",
skin: "oxide",
schema: "html5",
statusbar: false,
menubar:false,
branding: false,
browser_spellcheck: true,
pagebreak_separator: PAGE_BREAK,
paste_as_text: true,
remove_script_host: false,
convert_urls: true,
relative_urls: false,
valid_elements: "*[*]",
cache_suffix: "?version=$version",
$document_base_url
plugins: ["$plugins"],
toolbar1: "$toolbar1",
toolbar2: "$toolbar2",
language: "$lang",
content_css: "$content_css"
image_class_list: [
{title: 'Keine', value: ''},
{title: 'Links', value: 'links'}
]
});
Weiter musst Du die CSS-Klassen definieren. Dafür kannst Du im Plugin HTML-Code im Feld "Header" Folgendes eingeben:
Code: Select all
<style>
.links {
float: left;
margin: 0 20px 20px 0;
}
</style>
Wenn Du nun das Bild markierst und das Bild-Icon des Editors TinyMCE anklickst (oder die rechte Maustaste verwendest), kannst Du eine der definierten Klassen wählen.
- bildbearbeitung.png (30.84 KiB) Viewed 543 times
