Editor Icons

  • Hier erhaltet ihr mal eine kleine Übersicht über die Funktionsweise der einzelnen Icons die im Editor zur Verfügung stehen.


    Ich versuche einmal die einzelnen Icons so gut wie möglich zu erklären und hoffe das dies so verständlich wird.

    1 Quellcode

    2 Rückgängig

    Eben gemachte Eingaben werden rückgängig gemacht

    3 Wiederholen

    Nach einem Rückgängig kann man sie auch wiederherstellen

    4 Vollbild

    Der Editor wird auf die gesamte Fläche eures Bildschirms vergrößert

    5 Überschrift

    Hier sind diverse Absatzformate hinterlegt wobei es sich hauptsächlich um Überschriften handelt, die dafür sorgen das die ganzen Texte etwas einheitlicher werden.


    Normaler Text

    Überschrift 1

    Überschrift 2

    Überschrift 3

    Im Forum hat das nur Einfluss auf die jeweiligen Schriftgrößen, im Blog und dem Lexikon wird aus den verschiedenen Absatzformaten automatisch eine Inhaltsübersicht generiert. Ich habe das Prinzip auch beim Erstellen dieses Beitrags verwendet und damit automatisch ein kleines Inhaltsverzeichnis mit Sprungmarken erstellt, dass man rechts oben sehen kann.

    6 Fett

    Der markierte Text wird fett geschrieben.

    7 Kursiv

    Der markierte Text wird kursiv geschrieben

    8 Unterstrichen

    Der markierte Text wird unterstrichen

    9 Durchgestrichen

    Der markierte Text wird durchgestrichen

    10 Tiefgestellt

    Der markierte Text wird tiefgestellt

    11 Hochgestellt

    Der markierte Text wird hochgestellt

    12 Schriftart

    Der markierte Text kann in verschiedenen Schriftarten dargestellt werden

    13 Schriftgröße

    Der markierte Text wird in verschiedenen Größen dargestellt 8 10 12 14 18 24 36

    14 Schriftfarbe

    Der markierte Text kann in den unterschiedlichsten Farben dargestellt werden

    15 Liste

    Der Text kann mit Aufzählungszeichen dargestellt werden.

    • Dies bietet sich wie der Name schon sagt, vor allem für diverse Listen an.
    1. Dies bietet sich wie der Name schon sagt, vor allem für diverse Listen an.

    16 Ausrichtung

    Der markierte Text, aber auch Bilder, Dateien, Videos und dergleichen, können damit ausgerichtet werden.


    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.

    17 Link

    Einen Link zu markiertem Text hinzufügen oder entfernen. Alternativ kann auch direkt erst das Icon geklickt und dort sowohl Link als auf anzuzeigender Text eingetragen werden.

    So sieht das dann zum Beispiel aus: Bestimmungsleitfaden

    18 Bild

    Hier kann, wenn es denn unbedingt sein muss, ein externes Bild eingebunden werden


    19 Tabelle

    Hiermit kann man eine Tabelle erstellen und bearbeiten

    Spalte 1 - Zeile 1
    Spalte 2 - Zeile 1
    Spalte 3 - Zeile 1
    Spalte 1 - Zeile 2 Spalte 2 - Zeile 2 Spalte 3 - Zeile 2

    In den Tabellenfeldern können auch wieder alle anderen Textattribute verwendet werden.

    20 Medien

    Dieses Icon ist Admins und Moderatoren vorbehalten und dient zur Medienverwaltung auf dem Server

    pilzforum.eu/attachment/13/

    21 Zitat

    Zitat

    Hiermit kann man Zitate aus externen Quellen recht gut veranschaulichen. Dafür einfach den entsprechenden Text markieren und schon wird er hervorgehoben und als Zitat markiert.

    Um einen Beitrag aus dem Forum zu zitieren, steht euch unterhalb des jeweiligen Beitrags ein eigenes Icon zur Verfügung.

    22 Code

    Hier im Pilzforum wird es nicht oft vorkommen, passieren kann es aber trotzdem. Angenommen, ihr möchtet hier eine Fehlermeldung posten, die aber einen gewissen Anteil an Quellcode enthält, wird es ohne dieses Icon schwierig. Der Editor würde den Code erkennen und ihn sofort umwandeln und ggf. ausführen. Zu sehen bekämen wir ihn somit nicht im Original. Hier mal ein Stück Quellcode aus der Software als Anschauung.

    Code
    1. @import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300,900");@font-face{font-family:'Glyphicons Halflings';src:url('templates/Honeygrid/assets/fonts/bootstrap/glyphicons-halflings-regular.eot');src:url('templates/Honeygrid/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('templates/Honeygrid/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2') format('woff2'), url('templates/Honeygrid/assets/fonts/bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('templates/Honeygrid/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('templates/Honeygrid/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,sect

    23 Spoiler

    Man möchte nicht das alle sofort sehen was hier geschrieben steht, der Nutzer sich also explizit dafür entscheiden muss den folgenden Text zu sehen, dann kann man etwas spoilern.

    Wer also nicht wissen will wie die letzte Staffel von Game of Thrones ausgeht, sollte nicht auf den folgenden Spoiler klicken.

    Alternativ kann man einen Spoiler aber auch verwenden um einen viel zu langen Text wie den folgenden, nur für diejenigen zugänglich zu machen die das auch wirklich interessiert.

    24 Inline-Code

    Hiermit kann man einen Text hervorheben, indem man ihn in einen schmalen Rahmen packt

    25 Unsicheres HTML

    Code
    1. Dieses Icon ist den Admins vorbehalten, da man damit das komplette Forum zerstören könnte.
    2. Wenn ich hier einen HTML-Code schreiben würde, würde die Forensoftware diesen auch so ausführen wie geschrieben. Damit kann man auf diverse Gegebenheiten eingehen die mit Boardmitteln nicht umsetzbar sind, man könnte aber auch einen Virus oder dergleichen ausführen.

    26 Editier Hinweis anzeigen

    [ edit=Takumi ]Manchmal ist es nötig das ein Beitrag durch Moderatoren oder Admins geändert wird, dies soll aber auch nachvollziehbar bleiben. Ebenso kann es passieren das man einen Schmarrn geschrieben hat und es schon Folgebeiträge gibt die sich darauf beziehen. Dann kann man seinen eigenen Beitrag bearbeiten und diesen Editier Hinweis hinterlassen um dies zu zeigen[ /edit ] ergibt dann:

    Edit by Takumi

    Manchmal ist es nötig das ein Beitrag durch Moderatoren oder Admins geändert wird, dies soll aber auch nachvollziehbar bleiben. Ebenso kann es passieren das man einen Schmarrn geschrieben hat und es schon Folgebeiträge gibt die sich darauf beziehen. Dann kann man seinen eigenen Beitrag bearbeiten und diesen Editier Hinweis hinterlassen um dies zu zeigen

    27 Statusmeldungen

    Ebenfalls nicht für alle zugänglich, für das Team aber eine gute Möglichkeit auf etwas aufmerksam zu machen.


    [ info=info ]Eine Info die besondere Aufmerksamkeit verdient[ /info ] ergibt:

    Eine Info die besondere Aufmerksamkeit verdient


    [ info=warning ]Eine Warnung die gesehen werden sollte[ /info ] ergibt:

    Eine Warnung die gesehen werden sollte


    [ info=success ]Etwas ist erledigt worden und wir wollen das mitteilen[ /info ] ergibt:

    Etwas ist erledigt worden und wir wollen das mitteilen


    [ info=error ]Ein Fehler auf den wir aufmerksam machen möchten[ /info ] ergibt:

    Ein Fehler auf den wir aufmerksam machen möchten


    28 Border BBCode

    [ border ]Ein Rahmen um markierten Text[ /border ] ergibt:

    Ein Rahmen um markierten Text


    29 Button

    Hiermit lässt sich ein Link besonders hervorheben, zudem wird dabei auch gleich die Info der Seite geholt und mit angezeigt.

    Code
    1. [ but ]www.pilzmaennchen.de[ /but ] ergibt:


    30 OffTopic

    [ offtopic ]Der so markierte Text hat nichts mit dem ursprünglichen Thema zu tun. Da dies nicht gern gesehen ist, wird er in der Regel als OffTopic markiert um zu zeigen das man sich dessen bewußt ist.[ /offtopic ] ergibt:

    OffTopic

    Der so markierte Text hat nichts mit dem ursprünglichen Thema zu tun. Da dies nicht gern gesehen ist, wird er in der Regel als OffTopic markiert um zu zeigen das man sich dessen bewußt ist.

    31 Trennlinie einbinden

    Manchmal gibt es Situationen in denen möchte man etwas deutlich voneinander abgrenzen,

    [ trennlinie ][ /trennlinie ] ergibt:



    mit der Trennlinie ist dies recht einfach zu realisieren.

    32 Quelle einfügen

    Ihr habt einen Text im Netz gefunden den ihr hier zeigen möchtet, meist geht dabei die Quelle aber unter.

    Code
    1. [ quelle ]https://de.wikipedia.org/wiki/Quellenangabe[ /quelle ]ergibt:

    Quelle

    33 Thema schließen

    Für Moderatoren und Admins verfügbar, um deutlich zu zeigen das dieses Thema geschlossen wurde.

    [ close ][ /close ] ergibt:

    • Thema wurde geschlossen!

    34 Font Awesome Icons

    Das sind standardisierte Icons die man immer häufiger antrifft. Sie können von jedermann verwendet werden, ohne auf irgendwelche Quellen zu verweisen, sind klein, flexibel und sehr leicht anpassbar. Man kann sowohl die Größe als auch die Farbe ändern, indem man sie einfach wie Text behandelt.


    35 Referenz / Quelle

    Steht nur hier im Lexikon zur Verfügung und ist eigentlich überflüssig da bereits an anderer Stelle für alle Bereiche verfügbar.


    Nun hoffe ich doch sehr, euch einen kleinen Einblick verschafft zu haben, bei Fragen dazu stehe ich natürlich gerne weiterhin zur Verfügung.

    Antonius behüt und herzliche Grüße

    Frank

Teilen

Kommentare 2

  • Die hier im Beitrag eingefügten Bilder/Fotos (Abbildung der Icons?) sind nicht zu sehen, auch nicht, wenn man auf die Lupe klickt.