Banner - WP Bistro Sparringspartner für WordPress

TinyMCE Advanced – Besser formatieren

Formatierungs-Icons im Editor

Verfasst von

in

Formatierungs-Icons im Editor

In WordPress die Texte einer Website zu pflegen ist kinderleicht. Mit Hilfe des visuellen Editors und den Formatierungs-Werkzeugen, die man in der Regel aus der Arbeit mit MS Word kennt, ist es auch für wenig technikaffine Menschen kein Problem, einen Text in WordPress zu erfassen und ansprechend zu formatieren.

Leider ist die Werkzeugleiste im visuellen Editor nicht vollständig. Oft werde ich gefragt, wie man die Schriftgröße in einem Text oder die Schriftart ändern kann. Diese Angaben sind normalerweise im verwendeten Theme fest programmiert und können standardmäßig im visuellen Editor nicht angepasst werden.

Aber natürlich gibt es auch hierfür eine Lösung 🙂

Wer sich mehr Formatierungsmöglichkeiten über die Werkzeugleiste wünscht, dem empfehle ich einen Blick auf das Plugin TinyMCE Advanced.

Zusätzliche Optionen zur Formatierung im visuellen Editor

Nach der Installation erweitert das Plugin die Werkzeugleiste im visuellen Editor um eine horizontale Leiste mit verschiedenen Optionen:

Werkzeugleiste aus TinyMCE Advanced
Zum Vergrößern bitte Bild anklicken

In diesem Dropdown-Menü finden sich eine ganze Reihe neuer Funktionen. So kann man zum Beispiel über „Datei“ -> „Drucken“ direkt aus dem Editor heraus ein Dokument ausdrucken.

Unter „Bearbeiten“ finden sich neben den aus Word bekannten Menüpunkten „Ausschneiden“, „Kopieren“ und „Einfügen“ auch eine Möglichkeit, nach Begriffen zu suchen und diese zu ersetzen.

Bearbeiten - TinyMCE
Zum Vergrößern bitte Bild anklicken

Wenn man den Menüpunkt „Einfügen“ auswählt, findet man als neue Optionen unter anderem die Möglichkeit, ein Video oder eine horizontale Trennlinie einzufügen. Auch Sprunganker innerhalb der Seite können über diesen Menüpunkt eingefügt werden.

Unter dem Punkt „Formate“ finden sich neben den bereits im Standard-Editor vorhandenen Funktionen „fett“ und „kursiv“ die oft vermissten Möglichkeiten für „unterstreichen“ und „durchstreichen“.

Außerdem können aus diesem Menü zahlreiche weitere Formatierungsmöglichkeiten für Überschriften und Ansätze ausgewählt werden.

TinyMCE Formate
Zum Vergrößern bitte Bild anklicken

Über den Menüpunkt „Tabellen“ sollte man Tabellen in seine Seite einfügen können. Eigentlich eine schöne Sache.

Allerdings gestaltete sich das in meinem Selbsttest ausgesprochen hakelig und nicht besonders intuitiv. Für Tabellen würde ich daher eher das Plugin „Shortcode Ultimate“ empfehlen.

Individuelle Einstellungen für das Plugin

Wer das Dropdown-Menü nicht mag oder einige zusätzliche Icons für Formatierungen in die Werkzeugleiste einfügen möchte, der kann sich über „Einstellungen“ -> „TinyMCE Advanced“ seine ganz individuelle Werkzeugleiste zusammen stellen:

Einstellungen Plugin TinyMCE Advanced
Zum Vergrößern bitte Bild anklicken

Durch Entfernen des Häkchens bei „Enable the Editor Menü“ kann das Dropdown Menü im visuellen Editor ausgeblendet werden.

Per Drag & Drop lassen sich die Formatierungs-Buttons an die gewünschte Stelle in der Werkzeugliste ziehen oder daraus entfernen.

Und wer sich für das Einfügen von Links schon immer ein paar mehr Möglichkeiten gewünscht hat, der sollte bei „Also enable“ ein Häkchen bei „Links“ setzen. Dadurch wird das Standard-Link-Menü des Editors ersetzt durch ein neues Kontext-Menü, in dem man unter anderem auswählen kann, ob ein Link zu einem bestimmten Ankerlink führen soll oder als „nofollow“ eingefügt werden soll.

TinyMCE - Links einfügen
Zum Vergrößern bitte Link anklicken

Fazit

Wem die Formatierungs-Optionen des WordPress Standard-Editors etwas zu dürftig waren, für den lohnt sich ein Blick auf „TinyMCE Advanced“ auf jeden Fall.

Finden Sie die zusätzlichen Optionen dieses Plugins nützlich? Dann teilen Sie diesen Artikel gern in Ihrem Netzwerk. 🙂

Bildquelle:
© rebellium – Fotolia.com

Kommentare

27 Kommentare zu „TinyMCE Advanced – Besser formatieren“

  1. Als ich anfing mich mit WordPress zu beschäftigen, war ich erstmal auch erstaunt, dass der Standard Editor nur so wenige Formatierungsmöglichkeiten bietet. Besonders für Autoren, die direkt im WordPress Editor arbeiten und keine umfangreichen programmiertechnischen Kenntnisse haben, ist das Plugin eine super Unterstützung.

  2. […] individuell zu gestalten. Welche neuen Befehle das Plugin noch erlaubt, könnt ihr im WordPress Bistro Blog […]

  3. Mit den Funktionen dieses Plugins bin ich ganz zufrieden. Bis auf eine Ausnahme. Wenn ich anfange zu schreiben, dann erscheint eine Mini-Schrift. 8 oder 9 Punkt wird es wohl sein. Ich habe bisher nicht herausgefunden, wo man diese Standardschrift z.B. auf 14 Punkt einstellen kann. Es gibt ein paar Ansätze auf Webseiten. Doch die Pfade, die dort angegeben sind. Um auf dem Server die richtige Datei zu finden. Die stimmen nicht. Zumindest zu dieser Zeit und bei WordPress nicht. Ich habe im Dashbord rechts neben dem Plugin auf „Bearbeiten“ geklickt. Dann kommt ein Fenster mit Codes drin. Dort steht auch etwas font-size. Habe dort mal 14pt hin geschrieben. ABer das hat nicht funktioniert. Hast du eine Ahnung wie und vor allem wo diese mickrige Standardschrift umzustellen geht? Vielen Dank

    1. Also ich habe gestern selber die Schrift geändert in meinem Editor und es war in der wp-content.css
      Dort einfach im Body die Font-size ändern. Also bei mir ging es so.

      Ich finde den Advanced Editor auch ganz gut. Mir ist nur letzten aufgefallen, dass die neuste Version des Plugins WP 4.0 voraussetzt. Ich hatte noch 3.9 und hab mich gewundert, wieso ich keine Font-Size im Editor hatte.

      1. Michaela Steidl

        Torben, vielen Dank für Deinen Input.

        Lothar, Ich hatte das Problem mit der Minischrift im Editor noch nie, kann die Thematik also leider nicht nachvollziehen. Vielleicht ist ja der Tipp von Torben hilfreich für Dich?

  4. ich finde die wp-content.css nicht. Kann mir bitte jemand sagen, wo die liegt? In welchem Ordner des Servers. Möglichst eine genaue Pfadangabe. Vielen Dank!

  5. Hallo,
    ich nutze auf meinen Blogs teilweise das Plugin TinyMCE Ultimate, weil ich mit dem Advanced-Plugin einmal Probleme hatte. Da wollte das Blog nicht.

    Ansonsten kann ich auch nur empfehlen, dass man diese beiden Plugins nutzt. Den Ckeditor nutzte ich manchmal auch, was auch nicht so schlecht ist. Aber neulich wurde mir der Ckeditor nicht angezeigt, aus welchem Grund auch immer. Ich habe es dann sein lassen.

  6. Hey,
    das ist mal ein sehr nützliches Plugin! Habe ich direkt mal installiert! 🙂

    1. Hallo Nicole, es freut mich, wenn Dir mein Tipp gefällt 🙂

  7. Peter

    Hallo Michaela, vielen Dank für die vielen Tipps in diesem Eintrag. Frage: gibt es auch ein Plugin bzw. eine Möglichkeit bei Überschriften und Kategorien ebenfalls das Erscheinungsbild zu verändern. Z.B. möchte ich gerne einzelne Buchstaben in einer anderen Farbe darstellen. Aber nur bei einzelnen Kategorien. Geht das irgendwie?
    Vielen Dank, Peter

    1. Michaela Steidl

      Hallo Peter,

      ich habe das selbst noch nie ausprobiert, aber vielleicht ist das Plugin „CSS Hero“ etwas, was Dir weiterhilft: http://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/

  8. Fritz

    Hallo Michaela,

    ich habe ein, zwei Problem mit diesem Editor, vielleicht kannst du mir weiterhelfen.

    1) Lassen sich bei mir bereits gespeicherte Inhalte nicht wieder ändern.

    2) Werden bei mir, wenn ich eine Tabelle einfüge, immer Teile des Rahmens angzeigt.

    lg, Fritz

    1. Hallo Fritz,

      welche Inhalte genau werden bei Dir nicht geändert? Texte die Du im Editor erfasst oder die Einstellungen für die Werkzeugleiste, die Du mit dem TinyMCE Editor einrichten kannst?

      Das der Rahmen um die Tabelle angezeigt wird hat sehr vermutlich mit dem Stylesheet Deines Themes zu tun.

      Versuche mal in einer Custom CSS (entweder in den Theme Options oder z.B. über das Plugin Simple Custom CSS) folgendes einzutragen:

      table, tr, td {border: none !important;}

      Vielleicht löst das bereits Dein Problem.

      Herzliche Grüße
      Michaela

  9. Fritz

    Hallo Michaela,

    ich muss mich recht herzlich bedanken, der Tipp mit dem Plugin Simple Custom CSS hat mein Tabellen-Problem gelöst. 🙂

    Bezüglich überspeichern der Inhalte dürfte wohl eine WP-Aktualisierung – wobei die Aktualisierung des Editors nicht zeitgleich, sondern erst einge Tag später vorgenommen wurde – Grund dafür gewesen sein, dass ein Überschreiben der Inhalte nicht möglich war.

    Ich bedanke mich herzlich für Ihre Hilfe.

    SG

  10. Hallo Michaela,
    ich habe heute Deinen Blog gelesen, gleich das Plugin installiert und bin begeistert. Damit läßt sich prima ein Text über die Bordmittel von WordPress hinaus formatieren, ohne daß man CSS anfassen muss.
    Viele Grüsse und herzlichen Dank!
    Heinrich

  11. Ich hatte das Problem, dass die Bilder die ich einfügen wollte, immer irgendwo auftauchten. Heute habe ich dieses Plugin entdeckt und ich hoffe, dass ich die Bilder besser an die richtigen Orte schieben kann. Das erinnert mich stark an die Arbeit mit MS Word.

  12. Meine Plugins – Wandern, Reisen und mehr

    […] 3. Tiny MCE Advanced Erleichtert die Arbeit im Editor und erweitert dessen Möglichkeiten für mich enorm. Es gibt bereits  Blogs speziell zu diesem Plugin. […]

  13. Hallo Michaela,

    ich habe ein Problem mit weißer Schrift und würde gerne die preview_styles für die Schriftfarbe ausschalten. Der Editor hat ja leider einen weißen Background und dort sehe ich dann die Schrift nicht. Ich habe gesehen, dass man Settings als JSON importieren kann. Kennst Du Dich mit den settings aus?

    1. Hallo Sodah,
      eventuell hilft Dir das hier weiter:
      https://strato.de/blog/echtes-wysiwyg-im-wordpress-editor/

      Ist zwar ein bisschen fortgeschrittener, aber da Du nach Settings als JSON fragst denke ich, dass Du damit klar kommen könntest?

      Herzliche Grüße
      Michaela

  14. Liebe Michaela,

    danke für diesen informativen Artikel. Genau danach habe ich gesucht.
    Du bist meine Rettung!

    Beste Grüße,
    Gerd

    1. Ich freue mich, wenn ich Dir helfen konnte 🙂

      Herzliche Grüße
      Michaela

  15. Lutz

    Vielen Dank für den tollen Artikel,
    vielleicht kannst du mir noch eine Frage beantworten? Wie schaffe ich es, dass der Text „responsive“ wird und sich der Größe der Schrift des Bildschirms anpasst (z.B. bei Mobiler Version.)Denn was nützt mir, wenn ich z.B. die Größe des Textes mit diesem Plugin perfekt für den Desktop einstelle, wenn es dieselbe Schriftgröße im mobilen Modus behält?
    LG Lutz

    1. Hallo Lutz,

      manche Themes haben die Möglichkeit, dass Du die Schriftgröße je nach Gerät individuell festlegst.

      Wenn Dein Theme diese Möglichkeit nicht bietet kannst Du das nur über CSS definieren ( Design – Customizer – Custom CSS ), indem Du für unterschiedliche „Breakpoints“ die Schriftarten vorgibst.

      Also z.B.

      @media screen and (max-width: 550px) {
      body {font-size: 18px;}
      }

      Du kannst diesen Befehl mehrfach definieren und die Breite dabei festlegen, für die er greifen kann.

      Meine Erfahrung ist aber, dass es gar nicht so unbedingt nötig ist, unterschiedliche Schriftgrößen zu definieren. 16px oder 18px Schriftgröße funktionieren nach meiner Erfahrung sowohl auf Smartphone als auch auf den Desktop recht gut.

      Herzliche Grüße
      Michaela

  16. Hallo Michaela, moin! Hast du auch einen Tipp für Textformatierung in die Richtung „Darstellung umrandeter Boxen“ oder anderer Darstellungsmöglichkeiten von Text? Ich denke dabei z.B. an Cornerstone Content, der einfach hübscher, ansprechend lesbarer aufbereitet werden müsste. DANKE im Voraus und beste Grüße aus Hamburg!

    1. Hallo Andreas,
      Meinst Du so etwas wie das hier?

      https://wp-bistro.de/farbige-boxen-mit-css-selbst-gestalten/

      Vielleicht hilft Dir das ja weiter?

      Herzliche Grüße

  17. Vielen Dank für diesen wirklich sehr aufschlussreichen Artikel! Es ist immer schön neues über WordPress zu lesen.

    1. So ganz neu ist dieser Artikel ja leider nicht mehr … Ich freue mich trotzdem, wenn er noch weiterhilft 😉

      Herzliche Grüße
      Michaela Steidl

Schreibe einen Kommentar

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