Article
2 comments

Enhance rich text editor using CSS – Part 1

This is the first post in a series about enhancing the rich text editor. The rich text editor in SharePoint 2010 has changed a lot and with some creativity it can be changed and enhanced for a lot of use cases. This first article provides information of a simple addition of a link to the content. It also shows how effects like hover can be handled in the rich text editor. No JavaScript is involved only pure Css. 

The basics

Rich text editor styles can be extended by two different approaches. One approach is to create inline styles and the other is to define html markup styles.

RTE Styles will be defined in the format:
.ms-rteStyle-<identifier>
This will be used for:
.ms-rteStyle-Highlight (simple highlighter), .ms-rteStyle-Caption (caption definition), .ms-rteStyle-BrownBackground (text with brown background)

The main use for these styles is to wrap text inside a paragraph or formats a paragraph. No additional html markup will be added to the content by selecting those styles.

RTE Element will be defined in the format:
<html markup element>.ms-rteElement-<identifier>
Will be us for example:
H3.ms-rteElement-H3, HR.ms-rteElement-Hr, .ms-rteElement-Callout1

As you see ms-rteElement wraps up the selected text using the specified html elements. This is much more powerful than rte styles and will provide a deeper integration with the content.

To define a display name that shows up in the style and markup style drop down elements a special so called vendor specific css attribute called “–ms-name” must be added to the style definition.

The Standard callout format in corev4.css looks like this:

DIV.ms-rteElement-Callout1 {
-ms-name:"Callout 1";
}

.ms-rteElement-Callout1
{
color:660000;
background-color:#fef4e4;
float:left;
width:25em;
padding:10px;
border: 1px solid #FD9F08;
}

The rich text editor in SharePoint 2010 has become smarter and easier to adopt. With the markup styles any html tag can be added to the content. For example to specify quotes(<blockquotes>), links (<a>), divs, spans and many more.

Enhanced styling of links

Now it is time to have some fun with the RTE. The first element to define is a link. Sounds unnessacery but it isn’t. The normal workflow to add a link includes the following steps:

  1. Write text for link
  2. Select insert tab in ribbon
  3. Select link
  4. Add the link
  5. Insert link url

This needs five steps until a link is inserted. With a defined markup style it is much easier to insert a link with fewer steps. The workflow will then only include the following steps:

  1. Write link text
  2. Select markup style
  3. Select Link Tab (this will be automatically activated by selecting an anchor markup style)
  4. Insert URL

I think this is more efficient way than add links the out of the box way. You can also insert all links while you edit the content and assign the Urls and properties to the link afterwards. Another benefit is you don’t have to insert the “text to display” property and can use the text you wrote anyway. The following video shows the difference.

A link can be added to the rich text editor by simply adding the following lines to your custom style sheets.

a.ms-rteElement-ContentLink
{
-ms-name: "Content Link";
}

This is all that needs to be done to insert a link to the markup style drop down. Additional style sheet rules can be applied to. This works fine as long as a simple link is defined but when hover or visited stats should be assigned with a different style it’s getting tricky. Every time the ms-rteElement-ContentLink is specified in the style sheet the rich text editor generates a new line in the markup style drop down. With the missing –ms-name definition the lines in markup style will be blank. The rich text editor interprets this as new RTE Markup styles instead of a markup style with hover state. This problem can be solved easily by using attribute selectors instead defining the styles in a traditional way.

For a style definition like this:

a.ms-rteElement-ContentLink
{
-ms-name: "Content Link";
color: Maroon;
}
.ms-rteElement-ContentLink:hover
{
font-weight: bold;
color: Maroon;
}

The drop down that will look like this.

Markup Style Drop Down error

Markup Style Drop Down error

To solve this issue the code needs only slightly adopted.

a.ms-rteElement-ContentLink
{
-ms-name: "Content Link";
color: Maroon;
}
a[class="ms-rteElement-ContentLink"]:hover
{
font-weight: bold;
color: Maroon;
}

Now only a single line will be displayed for our hover style. Attribute selectors are supported since IE7 which is good. Selectors and browser support are documented by Microsoft and can be found in the MSDN under “CSS compatibility and Internet Explorer”. With a definition like this the rich text editor is unable to find the hover effects but the effect will still be rendered in a correct way. Attribute selector can used to do other fancy stuff. If you want to define different hover colors, multiple selectors can be assigned too. For example if I want to have different colors for http://www.bing.com and http://www.microsoft.com when links will be hovered. This can be defined too.

a.ms-rteElement-ContentLink
{
-ms-name: "Content Link";
color: Maroon;
}

a[class="ms-rteElement-ContentLink"]:hover
{
font-weight: bold;
color: lime;
}

a[class="ms-rteElement-ContentLink"][href*="microsoft"]:hover
{
font-weight: bold;
color: fuchsia;
}

a[class="ms-rteElement-ContentLink"][href*="bing"]:hover
{
font-weight: bold;
color: Orange;
}

The asterisk in the selector indicates that this rule will be applied whenever a link contains Bing or Microsoft. The link will then represent in fuchsia in for Microsoft and orange for bing. See how it works.

Conclusion

As I mentioned at the beginning this is only the first post of a series. Coming up next will some more advanced rich text elements like button and boxes. I think the rich text editor in SharePoint has a high potential to optimize the process of content creation and some advanced elements can also be added to the rich text. The usage of web parts in normal content can also be reduced. So stay tuned.

2 Comments

  1. Hi Stefan,
    Your blog was really good..
    I have implemented hyperlink style..it works fine in edit mode but when I save the page it doesn’t work..
    Can you please guide.

    Reply

    • Hi,

      it depends to which file you have added your hyperlink style. Mainly two files are involved with this.
      editmode15.css is just used for edit mode.
      pagelayout15.css is just for display mode.

      If you like to have your style in edit and display mode you should add it to the pagelayout15.css.

      mfg
      Stefan

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.