Article
2 comments

Boxes and positioning – Enhance rich text editor – Part 2

Part one was all about the basics of customizing the rich text editor. This part will show some advanced CSS styling definitions. For a nice looking text layout are boxes handy to position side notes, images, videos or any kind of elements beside the content.  The rich text editor has already defined boxes in the markup styles drop down called callouts but they have a fixed position defined. I also will show enhancements for positioning any kind of element.

Defining boxes

As in part one the boxes will be defined by using  ms-rteElements. The html element that will be added to the rich text editor can be a div or span element. In general I prefer to use div’s instead of span for a simple reason. By default modern browsers treat div like boxes with a fixed width of 100%. Span-Elements on the other hand makes more send in creating inline style definitions. The following CSS code defines a simple box with an initial height, width, background color and border.

By defining the –ms-name vendor specific attribute the box will be displayed as “Content Box” in the HTML Markup Style drop down. By defining the height and width properties of the box the size will be resizable.

To embed a new box inside the content first the text must be defined and then the style applied. After this the text will placed automatically inside the box.

Additional effect can also be applied to the box for example a hover effect. The following style definition will add some different background color when the element will be hovered. The possibilities to style those boxes are endless. Different colors, background images and text enhancements can be applied to the boxes too. The hover effect works the same way as used in part one. The hover effect cannot be applied directly instead selector needs to be used too.

 

The boxes will then as shown in the image below. On the left side the box is in normal state. The right side shows the hover state.

Content box in normal and hover state

Content box in normal and hover state

Positioning

To freely distribute those boxes on the left or right side of the content some enhancement to the positioning needs to be done.  In the rich text editor only text can be centered, left or right aligned. This is not an option to position those boxes. What needs to be done to position boxes, floating must be defined. To float a box on the left or right side and wrap the text content around only two simple new styles needs to be added to the CSS definition. This time the ms-rteStyle will be used. Those definitions will show up in the styles drop down and not in the markup drop down.

The benefit of this definitions is that they are generic available. Whenever an element needs to be positioned on the left or right side of the content those styles could be used too. Take a look how this works together.

Enjoy it !!!