Umbraco 7 Grundkurs

Formatierte Inhalte

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Rich Text Editor ermöglicht es, im Backend HTML-Text zu erfassen, der dann mit einer einzigen Programmierzeile im Razor-Code ausgegeben werden kann.

Transkript

Ich habe jetzt hier in Umbraco einen Dokumenttyp. Hier haben wir ein Property, das ist ein Textfeld, das wir dynamisch auf der Webseite ausgeben. Jetzt möchte ich aber etwas zeigen, was noch viel eleganter ist, als so ein Textfeld. Dazu lege ich ein neues Property an und nenne das Ganze einmal "Fließtext". Jetzt sieht man, dass ein Alias von dem Namen erzeugt wird und da fehlt das scharfe "ß". Also gehe ich hierhin und füge in diesen Alias zwei "s" ein. Der Punkt mit diesem Alias ist, dass hier etwas generiert wird, was als Name in einer Programmiersprache tauglich ist. Also wie JavaScript oder C#. Da solche Sprachen oft nicht mit Umlauten oder Sonderzeichen umgehen können, werden die Umlaute und Sonderzeichen einfach ausgespart. Ich setze stattdessen diese beiden "s" ein, damit das Ganze wieder schön lesbar ist. Jetzt brauchen wir für das Property noch einen Editor und da wähle ich den "Rich-Text-Editor" aus. Dann klicke ich auf "Submit" und speichere das Ganze ab. Jetzt ist es so, dass der Text von meinem Dokument ein Fließtext werden soll. Ich weiß nicht recht, ob die Angabe "Text" stimmt, was machen wir also? Wir gehen hier hinein und nennen es "Überschrift". Dann benenne ich auch diesen Alias noch einmal um, "Überschrift", und speichere das Ganze ab. Das bedeutet natürlich, dass ich auch mein Template ändern muss und das werden wir jetzt machen. Wir geben auf jeden Fall hier mit "h1" diese Überschrift aus und speichern das Ganze dann. Bevor ich jetzt diesen Fließtext ausgebe, möchte ich erst einmal zeigen, was mit unserem Dokument jetzt passiert ist, dadurch dass sich der Dokumenttyp verändert hat. Ich gehe auf die "Home"-Seite, und jetzt sieht man, dass nebst dieser Überschrift auch unser Fließtext da ist. Da kann ich jetzt irgendwelchen Text einfügen. Ich gehe jetzt einmal zu diesem "Blindtextgenerator" und füge mir einen Text in die Zwischenablage, den ich mir aus dieser dann in den Editor hereinhole. Wir machen noch ein paar Absätze hinein und schon haben wir einen schönen Text. Das Fantastische an diesem Rich-Text-Editor ist, dass ich jetzt diesen Text formatieren kann. Ich kann das hier fett stellen, irgendetwas kursiv stellen oder ich kann Links editieren. Zum Beispiel kann ich hier oben einen Link zu einem anderen Dokument im Internet angeben oder hier ist auch der eigene Content-Baum sichtbar. Also im Augenblick ist nur dieses eine Dokument hier darin, daher kann ich nur das eine anwählen, aber normalerweise ist hier der gesamte Dokumentbaum zu sehen. Wenn ich das jetzt hier auswähle, dann habe ich hier einen Link gesetzt. Schön. Wenn mir die ganzen Bearbeitungsfunktionen noch nicht ausreichen, wie zum Beispiel, dass ich auf Mittelsatz stellen kann usw. oder dass ich Listen machen kann, wenn all das nicht reicht, dann habe ich hier so einen Source Code. Der zeigt mir jetzt an, was der Rich-Text-Editor tatsächlich produziert. Das ist ein vollausgezeichneter HTML-Text. Da muss man also überhaupt nichts weiter daran machen. Ich speichere und veröffentliche das Ganze jetzt und damit unser Fließtext jetzt hier erscheinen kann, muss ich ihn natürlich noch in unserem Template ausgeben. Jetzt gehe ich zurück zu dem Template und im Gegensatz zu meiner Überschrift, bei der ich hier noch einen Tag habe angeben müssen, brauche ich jetzt eigentlich nur schreiben: "Model.Content.FliessText". Das ist es. Ich speichere das Ganze einmal ab. Jetzt muss ich noch einmal schauen, wie die Schreibweise ist. Ich gehe noch einmal zurück, jawohl, das "T" ist groß. Das ist ja jetzt hier C#-Code und C# legt einfach Wert auf die Groß- und Kleinschreibung. Dabei möchte ich einfach noch einmal darauf hinweisen, dass Umbraco diese Properties in einer Schreibweise vornimmt, die man "CamelCase" nennt. In CamelCase sind die ersten Buchstaben, also der Anfang des Wortes, immer klein geschrieben und dann könnten Passagen kommen, die Großbuchstaben enthalten. Wenn man aber jetzt hier die Properties verwendet, verlangen diese nach dem "Pascal Case". Der Pascal Case ist mit CamelCase identisch, außer dass der erste Buchstabe groß ist. Das ist hier die Regel bei diesen Alias, wie man sie hier in dem Modell als Properties verwenden kann. So, ich habe mein Template geändert und einfach diesen Fließtext, diese Variable so wie sie ist, eingefügt. Jetzt schauen wir einfach mal, wie unsere Webseite aussieht. Man sieht, unser HTML-Text ist da, die fett und kursiv ausgezeichneten Stellen sind fett und kursiv und unser Link ist auch als Link im Text enthalten. Alles, was man jetzt noch tun muss, ist ein CSS-File einzubinden und mit den Styles etwas für ein gutes Aussehen zu sorgen. Aber ansonsten können wir mit dem Rich-Text-Editor mit einer Zeile formatierten Text, der im Backend erfasst wurde, ausgeben. Vielleicht eine ganz kleine Info zum Schluss. Das wäre jetzt hier einfach einmal die Information, von welchem Datentyp der Fließtext überhaupt ist. Das können wir ganz schnell mit "GetType () .FullName" ermitteln. Ich gehe noch einmal zurück und jetzt steht statt meines Texts der Datentyp von unserem Text da. Das ist ein Datentyp, der von "System.Web" mitgekommen ist. Der Datentyp heißt "HtmlString". Das ist an manch einer Stelle ganz sinnvoll zu wissen, dass es eben kein String ist, sondern eine spezifische Klasse, die man mit "ToString" eventuell in einen String umwandeln muss. Aber im Umbraco-Kontext reicht es aus, einfach diese Variable hier anzugeben und schon hat man seinen Fließtext hier stehen. Okay, soweit zum Rich-Text-Editor.

Umbraco 7 Grundkurs

Lernen Sie das mächtige Content Management System zu bedienen und steigen Sie in die Entwicklung dafür ein.

3 Std. 16 min (32 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Umbraco Umbraco 7
.NET .NET 4.6
Exklusiv für Abo-Kunden
Erscheinungsdatum:07.09.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!