Rich Text Editor HTML

Certain HTML text can be used to enhance a page

Overview

Web Editors have some ability to manipulate the HTML on a page by using the Rich Text Editor. HTML can enhance a web page and make it compliant too.

If you're unsure about a piece of code it's important to seek advice first as sometimes this can conflict with the page template or CSS (Cascading Style Sheets) styling.

Example

There are many examples that will be discussed in the next step but class="scale-with-grid" is widely used. This image has been scaled with HTML to fit inside the guide step as it's original width too wide.

Lookup value group for Sitecore

WCMS use

Image scaling

If images are oversized in width then there is a way to scale them to fit the page.

In the Rich Text Editor add the image by selecting the Insert Sitecore Media icon.

Sitecore Media icon in the Rich Text Editor

Select the HTML tab still in the Rich Text Editor.

HTML tab in Rich Text Editor

Find the line of code which shows the image. This usually starts with an <img tag.

Remove the height and width HTML text and add class="scale-with-grid". This won't resize the image in the Rich Text Editor but will on the page.

More information about the different choices of image displays and renderings.

Insert Code Snippet

The Rich Text Editor has a tool Called Insert Code Snippet which can add items and there code automatically for you. This can be found as a small icon shown as two arrows, a plus and a drop down arrow.

Insert Code Snippet

Alert boxes 

The examples below shows the four main alert boxes with there code:

<div class="alert alert-warning"> Insert content</div>

A warning box 

<div class=”"alert alert-info"> Insert content </div>

An information box

<div class="alert alert-success"> Insert content </div>

A success box

<div class="alert alert-danger"> Insert content </div>

An error or danger box 

Well

The following code will add a grey box called a well:

<div class="well"> </div>

Well code snippet

Hero quote

If you need to quote then use Hero quote:

<blockquote class="feature-quote large"><q>text</q>

Hero quote text goes here

 

Span tags

Sometimes when text is pasted into the Rich Text Editor it automatically applies <span> </span> tags in the HTML. Remove any you find.

HTML example of some span tags in the Rich Text Editor 

Padding

There are numerous options including:

  • centre an icon with no bottom margin - "icon centred para no bottom"
  • adding padding to images - Class="add-right" or Class="add-right"
MVC.net use
Code
Version and status
  • current version
  • Concept