Rich Text Editor HTML
Certain HTML text can be used to enhance a page
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.
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.
- WCMS use
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.
Select the HTML tab still in the 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.
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
The following code will add a grey box called a well:
<div class="well"> </div>Well code snippet
If you need to quote then use Hero quote:
<blockquote class="feature-quote large"><q>text</q>
Hero quote text goes here
Sometimes when text is pasted into the Rich Text Editor it automatically applies <span> </span> tags in the HTML. Remove any you find.
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
- Version and status