↓
 

TinyMCE Advanced – Besser formatieren

WP Bistro Gepostet am in der Kategorie Plugins | 27 Replies

Zuletzt aktualisiert am 11. August 2019 um 03:13 Uhr

Formatierungs-Icons im EditorIn 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

Teile diesen Beitrag mit Deinem Netzwerk

Einladung zum Weiterstöbern

  1. Tolle Alternative zum Text-Widget – Black Studio TinyMCE Widget
  2. Textauszüge auf der Blogseite anzeigen
  3. Platzhalter für Seiten in die Navigation einfügen
  4. Google Analytics ganz einfach – mit „Google Analyticator“

Über Michaela

Michaela Steidl ist Gründerin des WP Bistros. Seite 2011 unterstützt Sie Selbstständige und Unternehmer dabei, Ihre WordPress-Websites selbst zu pflegen und zu administrieren.

Kommentare

TinyMCE Advanced – Besser formatieren — 27 Kommentare

  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.

    Antworten ↓

  2. Pingback:Blogschau Juli - WordPress in den Blogs

  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

    Antworten ↓

    • 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.

      Antworten ↓

      • 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?

        Antworten ↓

  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!

    Antworten ↓

  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.

    Antworten ↓

  7. 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

    Antworten ↓

  8. 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

    Antworten ↓

    • 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

      Antworten ↓

  9. 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

    Antworten ↓

  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

    Antworten ↓

  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.

    Antworten ↓

  12. Pingback:Meine Plugins – Wandern, Reisen und mehr

  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?

    Antworten ↓

  15. 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

    Antworten ↓

    • 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

      Antworten ↓

  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!

    Antworten ↓

Schreibe einen Kommentar

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

HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

↑