Tutorial PrestaShop Rich-Text-Editor 24. August 2012

Der PrestaShop Richt-Text-Editor (RTE) wird im Back Office an vielen Stellen verwendet. Hiermit lassen sich intuitiv Texte formatieren, Links setzen, Dokumente verlinken und Texte mit Bildern versehen.

Grundlage des Rich-Text-Editors ist der TinyMCE, eine sogenannter JavaScript WYSIWYG Editor, der Firma Moxiecode Systems AB. Dabei werden vordefinierte Textfelder im Eingabeformular benutzt, um im Hintergrund HTML-Code zu erzeugen und das ohne jegliche HTML-Kenntnisse zu besitzen. Neben den typischen Formatierungsmöglichkeiten für Fettschrift (B), kursiv (I), durch- (S) und unterstrichen (U), gibt es auch die Möglichkeit die Absätze links-, rechtsbündig oder zentriert zu formatieren.

PrestaShop zeigt standardmäßig 4 Zeilen Formatierungsbuttons an, mit denen unterschiedliche Aktionen möglich sind. Zwei oft gebrauchte, aber nicht ganz triviale Aktionen sind Verlinkungen – also Links setzen und Dokumente verlinken – und Bilder im Textbereich einfügen.

Verlinkungen / Links setzen mit dem RTE

Um eine Verlinkung vorzunehmen, muss im Textfeld zuerst das zu verlinkende Wort oder die Wortgruppe, bzw. ein Bild markiert sein. Erst dann wird das Link-Symbol aktiv. Das Symbol befindet sich in der zweiten Reihe und zeigt einige Kettenglieder:

Beim Klick auf den Button lässt sich ein Linkziel eingeben. Am einfachsten und sichersten ist es, wenn man das Linkziel vorher im Browser bereits geöffnet hatte und dann aus der Adresszeile des Browsers die Internetadresse herauskopiert hat (die mit http://www….).

Mit einem Klick auf „Insert“ wird das Wort/die Wortgruppe/das Bild mit dem Linkziel verlinkt und ist im Grunde hiermit fertig. Nachdem die Seite oder das Produkt gespeichert wurde, kann man auf den Link klicken und wird zum Linkziel im Browser weitergeleitet.

Dokumente verlinken

Verlinken lassen sich nicht nur Webseiten, sondern auch alle Dokumente, wie zum Beispiel pdf-, Excel- oder Word-Dokumente. Dazu bei Link URL auf den Button „Browse“ klicken, der hinter der Zeile angeordnet ist:

Danach erscheint ein zugegeben etwas unübersichtliches Auswahlfeld. Das Wichtigste: rechts sind in einer Listenansicht bereits hochgeladene Dokumente aufgeführt, die im Ordner /img/cms/ der PrestaShop-Installation liegen. Am oberen Rand befinden sich Aktionsschaltflächen, um z.B. neue Ordner (New Folder) anzulegen oder Dateien hochzuladen (Upload).

Über die Upload-Funktion lassen sich neue Dokumente in das aktuell ausgewählte Verzeichnis einfügen. Erst öffnet sich das „File Upload Form“, nach Klick auf Durchsuchen kommt der typische Dialog des Betriebssystems, um Dateien auf der lokalen Festplatte auszuwählen:

Das grüne Symbol mit dem Pluszeichen erzeugt weitere Upload-Felder, wodurch sich mehrere Dateien auf einmal in das Verzeichnis auf dem PrestaShop-Server laden lassen. Das spart etwas Zeit. da man nicht jedes mal diesen Dialog öffnen muss.

 

Nach dem Klick auf Upload werden die Daten hoch-geladen und die Dateien erscheinen in der Liste. Ein Klick auf die Checkbox vor der Datei lässt im Bereich „File Information“ einen Select-Button erscheinen. Nach Klick auf diesen wird die URL der Datei übernommen.

Über „Target“ kann man bestimmen, ob sich ein neuer Tab aufbauen soll. Damit bleibt die aktuelle Seite stehen, was z.B. bei Dateiuploads durchaus erwünscht ist. Nach Klick auf „Insert“ wird das ausgewählte Dokument verlinkt.

Um eine Verlinkung wieder zu lösen, klicken Sie erst im RTE den Link an und danach auf die Symbolfläche rechts neben der Verlinkung:

Bilder im Rich-Text-Editor von PrestaShop platzieren

Über den RTE lassen sich auch bequem Bilder einfügen. Dazu setzen Sie den Cursor mit Klick in das Textfeld, wo das Bild später erscheinen soll und wählen das Symbol „Bild im Bilderrahmen mit dem grünen Plus-Zeichen“:

Statt wie im vorherigen Beispiel die Link URL erscheint jetzt ein ähnliches Fenster mit einer Image URL. Das ist der Pfad auf dem Server zu dem Bild. Auch externe Grafiken könnten sich einbinden lassen, wenn man die http-Adresse kennt. Hinter der Image URL klicken Sie auf das „Browse“-Symbol und es erscheint der bekannte Dialog:

Der weitere Ablauf mit Datei-Upload, Datei auswählen und in die URL Einsetzen ist identisch mit dem Abschnitt oben „Dokumente verlinken“:

Danach sollte man noch eine Bildbeschreibung (Alt-Attribut) und einen Title (title-Attribut) vergeben. In der Preview wird das Bild bereits angezeigt:

Nach Klick auf „Insert“ wird das Bild im Text eingefügt.

Der Reiter Appearance ist für die Anordnung der Bilder im Text interessant. Damit lassen sich einfache HTML-Attribute im img-Tag setzen und per Dropdown auswählen, z.B. die Ausrichtung (Alignment):

Oder man kann auf vorhandene Klassen der global.css von PrestaShop zurückgreifen, um die Bildanordnung noch besser über CSS zu steuern. Im Bereich „Class“ könnte man eine Klasse wählen, die ein Bild Links vom Text ausrichtet, dabei aber nach rechts und unten etwas Aussenabstand zum Text bietet:

Die Klasse rteImgLeft muss natürlich vorher in der global.css definiert worden sein.

Über „Insert“ wird das Bild in den RTE eingefügt.

Mit etwas Übung sollte es so jedem Shopbetreiber möglich sein, ansprechende Produktbeschreibungen zu verfassen, auf Dokumente (pdf, xls, doc, … )  zu verlinken und CMS-Seiten individuell mit Bildern zu gestalten.

 

 

 

9 Antworten zu “Tutorial PrestaShop Rich-Text-Editor”

  1. Christian sagt:

    Hallo,
    Ich habe eine Frage zu dem Datei Browser. Im Laufe des Tages wollte ich ein Bild austauschen (CMS) und mich dazu der upload Funktion bedienen. Aus für mich NICHT erkennbarem Grund öffnet das Fenster nicht mehr das (zugegeben etwas unübersichtliche Auswahlmenü) sondern es wird lediglich meine Webseite angezeigt.
    Ich habe keinerlei (bewusste) Änderungen vorgenommnen. Es wurde lediglich eine Google Sitemap eingestellt. Die Browser Funktion im Wysiwig ist einfach nihct mehr zu nutzen… Hat evtl. jemand eine Idee oder ähnliches Problem gehabt? Für jede Antwort schon an dieser Stelle ein herzliches Dankeschön 🙂

  2. Uwe S. sagt:

    Hallo,

    dieser aktuelle Rich-Text-Editor überzeugt leider nicht wirklich im Prestashop, wieil da imponiert mir der Modified- RTE viel besser.

    Aber kann man da nicht generell mal was ordentliches in den Prestashop bauen, am besten eine Lösung mit Rechtschreibprüfung? = Diese ist nicht meine Stärke, schon gar nicht wenn die Zeit knapp ist, oder ich mal wieder eine neue Tastatur vor dem Bauch habe. Die derzeitige Lösung im Prestashop ist nicht überzeugend, das bringt doch nichts. Wie macht Ihr das? Selbst der Firefox hat eine sinple Lösung parat, aber wenn man darin den Prestashop (Backend) öffnet werden nur Träume wach, nicht wahr! 😉

    • gurkcity sagt:

      Der Editor ist sicherlich nicht der beste und komfortabelste. Aber für die meisetn Shopbetreiber ist der RTE vollkommen ausreichend. Wer mehr will, kann den Code verändern, selbst bessere Editoren einbauen oder mit Tools wie Dreamweaver & Co. den HTML-Code vorbereiten und dann einfügen.

  3. Uwe S. sagt:

    Übrigens: Zieht man dieses Textfeld hier größer, werden Wörter z. T. unsichtbar, verlaufen sich am Textrahmen. Das ist auch nicht ganz Ast – rein. Liegt’s einfach nur am Browser? 😉 Okay, egal … weiterhin viel Freude mit Prestashop, wird schon noch – irgendwann mal.

  4. Uwe S. sagt:

    Hi,
    bei den Produktbereichen klemmt es vermutlich auch noch? Es steht z. B. im Bereich Zubehör: „Geben Sie die ersten Buchstaben des Produktnamens ein und wählen Sie dann das Produkt aus der Dropdown-Liste (Vergessen Sie anschließend nicht, das Produkt zu speichern)“

    Jaja, haben wir alles brav gemacht und das Produkt ist in dem Bereich (Backend) auch sichtbar erzeugt, aber es werden danach keine Produkte im Frontend sichtbar. Wieder so eine tote Funktion, die so wie es ist keinem wirklich was bringt?

    Ich bin gespannt wann die endlich mal deutsche klar verständliche Workshopvideos bringen werden? Weil sowas hier versteht keiner, wenn es mal (wie so oft bei Prestashop) nicht ordentlich zuverlässig funktioniert! Wieso geben die Ihre Videos nicht zur Nachvertonung in alle Sprechen frei? Das wäre doch sehr hilfreich und würde die Franzosen weiter nach vorne bringen! Denn sooo schlecht ist ja der Prestashop unterm Strich garnicht. Ich will sagen: Wer sich damit als Anwender beschäftigen soll, muss auch miot solchen Bereichen bitte simpel und erfolgreich klar kommen und soll nicht stundenlang in äußerst unbrauchbaren Forenbereichen bei Prestashop lesen müssen, wo die Leute dann auch noch dumm, arrogant und bösartig für Fragen angemacht werden, nur weil die eben eine überarbeitete Version nutzen. Woran Prestashop auch noch selber schuld ist, denn dafür gibt es eindeutig auch seine Gründe! Stichwort Rechtssicherheit usw., weil das ist noch lange nicht perfekt und sorgt nur für konsequente Softwareablehnung! Denn wir können hier keine neunen Nutzer (die umsteigen würden und er sich neu gegründet haben) ab solche miesen Schwerpunkte überzeugen, weil zu heftige (unseriös gewollte) Nebekosten für den Zweck abgelehnt werden, die wohl ganz vorsätzlich so auf diese Art werzeugt werden. Wie link oder oberfaul muss man die Software noch gestalten? Die bekommen wohl Provision? Das ist äußerst verdächtig und das fragen sich schon sehr viele Leute!

    Zurück zum Thema „Mit folgenden Kategorien verknüpft“: Normal ist der Produktbereich fast selbsterklärend, so muss das bei guter Software auch sein. Aber wenn es nicht funktioniert … hm? Diese Software macht einen immer wieder Hilflos! Es fragt sich täglich bei allen Bugs und Umständen, ob sie es wirklich wert ist weiter benutzt zu werden? Wir sind immer mehr im Zweifel und fühlen uns hin und her gerissen!

  5. Uwe S. sagt:

    Noch ein Abschließendes Wort zu den Updates, weil diese dauern auch viel zu lange! Und auf sinnlosen Schnick-Schnack warten Unternehmer ganz bestimmt nicht, da zählen eindeutig ganz andere Prioritäten. Das ist der Ausgangspunkt bei dem Thema. Oder wie sehen das die Anwender?

    Spielt Ihr noch mit Prstashop – oder verkauft Ihr schon damit? Hm? Ich sehe nur eine nicht ernst zu nehmende Spielwiese die produktiv ein absolutes Desaster ist. Ich hab 10.000 Besucher und einen Verkauf, der auch noch unsauber agbelaufen ist, weil die VK-Formulare auch noch der blanke Misthaufen sind und äußerst riskannt auf mein Hirn wirken! Einfach anpassen kannman die nicht ohne heftig im Code einzugreifen. Hilfshinweise wirken extrem aufwendig. Muss man sich diese Shopsoftware wirklich antun? Kann man die ganze Qualität nicht vor Erscheinugsterm ordentlich auf den Punkt bringen? Wir fargen uns täglich was der ganze Fusch soll und lesen uns unendlich im Internet durch, kommen zu keine produktiven Arbeiten mehr. Das überaus dumme ist: Andere Shops sind auch nicht besser! Die Frage ist: Für wem ist denn nun konsequent der verantwortungslose Fusch gemacht? Für Anwender oder IT-Agenturen?

    Die Franzosen wollen es vermutlich genau so!? Mann macht vermutlich mit endlosen Pfusch heftig Kasse, erzwingt Rechtsschutz, Supportarbeiten und sonstige dreiste Nebenkosten? Den Eindruck erweckt die komplette Programmierung und das Supportverhalten inkl. unbeliebtes Prestashop-Forum!

    Wer soll sowas gut finden? Schon klar, die Anwender garnicht! Nur die IT-Agenturen, Abmahnvereine, Entwickler usw. freuen sich über jedes Problem das die Kassen füllt, da habt ihr unterm Strick noch lange keinen Cent verdient und könnt euer Gewerbe abmelden – mit genau sowas. Anwender müssen echt vorsichtig sein, weil genau DAS ist SO nicht seriös!

    Dei DE-Fixe vom Prestashop-Forum bleiben ein Schwerpunkt in der BRD = dem lächerlichen Rechtsstaat – so wie man das für amtliche … Profitgier aufzieht, dass könnt Ihr also auch vergessen, ist alles nur Pfusch und leider Mittel zum unseriösen Zweck!

    Also NICHT zu schnell auf neue Version updaten! Die Franzosen sollen am besten ein „DE-1-Klick-Update“ bereit stellen, wenn wir die Software in unserem Staat ernst nehmen bzw. als brauchbar anerkennen sollen! Es kann nicht sein das ca. 500.000 Anwender mit solchen Quatsch ihre Shops zerschießen oder nach Update und Fixe-Anwendung IT-Spezialisten um Hilfe bitten müssen! Was soll der ganze verantwortungslose und Vorsätzliche Betrug an der Wirtschaft? es nervt und frustriert total, weil man hat reichlich Zeit in den Prestashop investiert und Time is Money! Okay, die IT-Barache macht dann mal schnell 10 bis 100 Mio. ganz nebenbei für den arglistigen Quatsch, weil Prestashop wohl Provision bekommt? Oder warum mitet man der Wirtscahft soclhen listigen Quatsch endlos zu, oder was wird das?

    Der Bund der Steuerzahler ruft auch schon bei Unternehmen an, um jeglichen Steuerbetrug … zu unterdrücken, vielleicht passt ja dieses miese Geschäftsgebahren von den Franzosen da auch schon mit rein, wenn das deutsche Anwender über sich ergehen lassen sollen? Wollen die Franzosen so unseriös in die Schlagzueilen kommen und dann auch noch irgendwann mal wieder Spenden von der BRD haben wollen, wenn der ganze Fusch die Franzosen mit so eienr qualitatiev schlechten Software zum scheitern bringt?

    Beifall gibt es besonders für den Installer udn auch für wenige neue Ideen! Aber bitte: Erst mal sollten die Basics wirklich ausgereift und richtig funktionieren! Denn dann wird man sich für Neuerungen in Software auch sehr gerne in passenden Foren am Thema gelassen, ruhig und nicht frustriert beteiligen, sogar überaus nett sinnvolle eigene Wünsche äußern und gerne nicht produktiver Umgebung testen, solange das wirklich auch verständlich bleibt. Denn mit Englisch/Dennglisch wollen wir leider auch nicht arbeiten!

    Trotzdem möchten wir gerne positiv von der Software denken, es muss uns nur über ordentliche Mängelbeseitigung vor Veröffentlichung richtig ermöglicht werden, denn viele Probleme sind vermeidbar, wenn man seinen Job wirklich ordentlich macht! Von uns wird doch auch beste Qualität erwartet, anderenfalls wirkt das Widerrufsrecht und wir wollen uns hier im Bereich Freeware bzw. generell in Software nicht jedem Irrsinn schutzlos ausliefern, weil es geht um Existenzen die man mit all dem Fusch vernichtet, dass ist das Problem! Über diese Sorgen reden wir!

    Es wird höchste Zeit das sich die Politik mit sowas beschäftigt, das sagen wir auch imemr öfter und schleißen uns den vielen Meinungen dazu an. Weil die vielen Probleme sind unzumutbar, siehe Bugtracker und stendig werden es mehr und viele neue Probleme über die man in Foren garnicht mehr diskutieren will, weil man sich dazu von den Problemen genötigt fühlt! Haben wir nichts zu tun? Oder was wird das? Wem sagen wir das am besten? Prestashop-Forum könnt Ihr alle voll vergessen, direkte Email an Prestashopentwickler auch, das geht denen alles am A*ch vorbei, via noreply usw.!

    Also gruppieren wir uns als Hilfesuchende ganz wo anders und reden auch mal mit der IHK, den Wirtschaftsministerium usw. über alles weitere?! Wem wählen wir überhaupt noch in der BRD? = Wo bekommt man wirklich wirtschaftliche Hilfe die am Ende dem Arbeiter oder Unternekmer etwas bringt? Wollen wir nicht Arbeitnehmer beschäftigen, statt immer weiter wegen jeglichen Fusch entlassen zu müssen? Tut mir leid Leute, aber wie weit denken Unternehmer? Muss man sich vorsätzlich via sehr schlechter Softwarequalität vorsätzlich abzocken lassen? Man kann mit fragwürdiger AGB oder unsinniger Lizenzbestimmungen nicht immer nur seine Hände in Unschuld waschen, da begibt man sich auch auf sehr dünnen Eis! Aber wo kein Kläger ist, ist auch kein Richter, oder was mauss man sich im Arbeitsalltag alles noch vernichtend gefallen lassen?

    Wer soll für den vorsätlich erzeugten Fusch in Software aufkommen, etwa der Steuerzahler? Ich vermute mal über all die negativén Kreisläufe denkt heuter gar keiner mehr nach, weil sich wohl jeder mit extremer Profitgier der nächste ist? Was ist das für eine Welt?

    Für einen Kfz braucht Ihr normal den Führerschein, wie sieht es bei Bananensoftware und Möchtegernprogrammierer aus? Mit beiden kann man Menschen komplett vernichten, nicht nur in wirtscahftlicher existenz! Auch mit Strom, Alkohol, Gewalt, Mobbing und Drogen, …, es giebt viele endlos aufzehlbare Möglichkeiten, aber kann das ein Ziehl von seriösen Menschen sein? Schlechet Qualität im Gewerbe wird niemals richtigen Erfolg haben udn Deutschland ist auch nicht China im Vergleich, wir stehen auf deutsche ordentliche Qualität, mit der man auch etwas anfangen kann! das bedrückt uns bei Prestashop wirklich sehr!

    Wir haben übrigens ganz andere französiche Handelsparter und sind mit diesen Extrem zufreiden, niemals gab es seit vielen Jahren ein Problem und haben unsere Handelspartner sehr positiv ins herz geschlossen! Wir haben leider nur dauerhaft im Prestashop immer wieder neue Probleme. Es ist ein Desaster und davon raten wir sehr bald jeden neuen und alten Anwender der Prestashops konsequent ab, wenn das nicht besser wird.

    Fördert also lieber deutsche Firmen in Eurem eigenem Land, denn die müssen mal Eure Rente mit verdienen, dass tut nicht das Ausland, weil die wollen doch nur Spendengelder und muten uns jeglichen Fusch zu!

    Es ist so grauenhaft und benötigt bei vielen den Bezug von Harz IV, weil mit Fusch ist kein sauberes Geld zu verdienen, man kommt nicht vorwärts, hat für eigene Projekte keinen Kopf mehr frei und macht den ganzen Quatsch in der Summe besser um ungewollten Nebengewerbe, egal ob Ihr dann 10 Nebenjobs im HomeOffice am Tag schaft oder nicht, weil viele Menschen wollen wirklich fleißig arbeiten und sich nicht von Dritte so dreist sabotieren lassen. Das sind die Fakten bei Bananensoftware! Denkt drüber nach … und unternehmt was gehen all den Fusch, auch in der Fachpresse, weil so eine Zumutung sollte man nicht weiter dulden, weil die Franzosen speilen unsere Softwareentwickler mit heftigen Fusch kaputt und das geht gar nicht!

    Euch allen schöne Feiertage & super Grillwetter!

  6. ayari sagt:

    Hallo,
    warum wenn ich pdf datei laden bekomme ich eine schlechte qualität?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.