SharePoint 2010 RTE Styles

Sharepoint 2010 bringt ja einen durchaus brauchbaren Rich Text Editor für Page Content Bereiche und das Content Editor Webpart mit. Jetzt ist es ja aber nun üblich, dass man nicht jedes Mal sein komplettes Text-Layout mühsam im RTE einstellen möchte, sondern man möchte ja eigentlich zumindest häufig genutze Formatierungsoptionen wiederverwenden können. Microsoft hat hier mitgedacht und bringt Styles mit, die wiederverwendet werden können. Diese sind bequem im Editierungsmodus über das Ribbon erreichbar.

Sharepoint 2010 Standard Styles

Nun muss man aber zugeben, die Styles, die Microsoft dort hinterlegt hat, sind nicht unbedingt das, was man als User erwartet und vor allem entsprechen Sie erstmal keinem Corporate Design. Aber auch hier hat Microsoft mitgedacht, und so kann man eigene Styles relativ leicht hinzufügen.

Man legt sich einfach eine CSS-Datei an und fügt dort CSS-Klassen ein, deren Name mit ms-rteStyle- beginnt. Zusätzlich muss man noch das CSS-Attribut -ms-name einfügen, dass den Titel des Styles in dem Dropdown angibt.

Eine solche CSS-Klasse könnte in etwa so aussehen:

.ms-rteStyle-Notification
{
	-ms-name: "Hinweistext";
	border: 1px solid #7F0000;
	background: #FFD800;
	padding: 5px;
	color: #7F0000;
}

Wie kommt das ganze nun in meinen Sharepoint wird sich der Leser nun wahrscheinlich denken. Nun ja, man muss nun lediglich diese CSS-Datei in seinem Sharepoint einbinden. Da ich gerne vieles am Sharepoint umstyle, arbeite ich mit Visual Studio Solutions, die eigene Masterpages deployen und dort ein komplettes Branding mitbringen. Hier binden wir dann einfach die zusätzlich CSS Datei in der Masterpage ein und deployen die Solution. Natürlich gibt es auch noch andere Wege, so kann man z.B. die CSS-Datei in den Style Library Ordner hochladen, eine Kopie der v4.master anlegen, dort die CSS Datei eintragen  und in den Site Master Page Settings diese eigene Masterpage referenzieren, oder, oder, oder. Eventuell gehe ich noch mal in einem anderen Blogbeitrag auf dieses Thema ein, aber hier geht es erstmal nur um die RTE Styles.

Sharepoint interpretiert jede in der Masterpage eingebundene CSS-Datei und überführt alle Klassen, die dem oben gezeigten Schema entsprechen in das Style-Dropdown, so dass es dort einfach durch den Benutzer ausgewählt werden kann. Wichtig ist hier, dass außer dem entsprechenden Klassennamen und dem -ms-name Attribut mindestens ein weiteres CSS-Attribut angegeben wird.

Final sieht unser Beispiel dann etwa so aus

Angepasset RTE Styles im Sharepoint

Wie man sieht, sind hier schon weitere Styles eingebunden und ganz am Ende der Liste erscheint unser Beispiel-Style. An dieser Stelle muss ich aber leider darauf hinweisen, dass man diese Styles nur bedingt stapeln kann, man kann also nicht Hinweistext mit z.B. Interner Link kombinieren, solange es sich um den gleichen Bereich handelt, dem der jeweilige Style zugewiesen werden soll. Wenn man nur einem einzelnen Wort innerhalb eines Absatzes einen anderen Style geben möchte, funktioniert das schon mitunter. Ich selbst empfinde es aber von der Handhabung als etwas „frickelig“

Was für Text geht, geht natürlich auch für Bilder. Hier lautet das Präfix des CSS-Klassennamen etwas anders, die Herangehensweise ist aber identisch.

.ms-rteImage-CustomImageStyle
{
-ms-name: "Image Style";
border: 2px dotted #666;
margin: 10px;
}

Dies sieht als Ergebnis so aus:

Benutzerdefinierter RTE Style für Bilder

Im Screenshot sieht man auch sehr schön, dass dort in den Bildtools neben den Bildformatvorlagen auch noch der Button für Position ist. Auch dieser lässt sich ähnlich der oben genannten Methode überschreiben. Hier lautet das Präfix ms-rtePosition.

.ms-rtePosition-LeftTop
{
	-ms-name: "Links mit Rahmen";
	float: left;
	padding: 10px;
	border: 1px solid grey;
	margin-right: 10px;
	margin-bottom: 10px;
}

Man kann auch bestehende Style überschreiben. Die von Microsoft definierten CSS-Klassen sind:

Für Text:

.ms-rteStyle-Comment
.ms-rteStyle-Normal
.ms-rteStyle-Highlight
.ms-rteStyle-Byline
.ms-rteStyle-Tagline
.ms-rteStyle-Comment
.ms-rteStyle-References
.ms-rteStyle-Caption

Bilder:

.ms-rteImage-0
.ms-rteImage-1
.ms-rteImage-2
.ms-rteImage-3
.ms-rteImage-4

Positionen:

.ms-rtePosition-1
.ms-rtePosition-2
.ms-rtePosition-3
.ms-rtePosition-4
.ms-rtePosition-5

Durch die hier genannten Optionen, die Styles, Image Styles und Image Positions anzupassen, sind einem eigentlich keine Grenzen gesetzt. Wer gerne mit jQuery arbeitet, sich aber immer geärgert hat, dass im in RTE Textbereichen eventuell passende Selektoren fehlen, kann auch hier mit den RTE Styles arbeiten. Hier ist es zwar etwas störend, dass man immer mindestens ein zusätzliches CSS-Attribut angeben muss, aber hier kann man im Zweifel auch einfach ein beliebiges Attribut mit Default-Wert (oder sowieso schon gesetztem Wert einfügen.

Ich hoffe, dieser kleine Exkurs in die Welt der RTE Styles war halbwegs hilfreich.