Most people won’t be typing the content into the Rich Text Editor box, but instead copying and pasting it. This is problematic because when you copy text from a Word or PDF document, or from an email, into Sitecore, all the formatting in those items also gets copied across.
So for example, as well as the text, it will often copy the font type, colour and size, and it will affect the line spacing. We need to make sure the font appears consistently across the whole website, so it’s important we take the following steps to make sure text is copied across correctly.
Pasting into an existing paragraph
You may be familiar with some of the ways of copying and pasting text into Sitecore, such as such using the ‘Paste as plain text’ button or ‘Paste from Word’ button. These can be useful when pasting text into an existing paragraph.
Pasting new paragraphs
For new paragraphs, we can use the HTML tab at the bottom of the editor box. HMTL stands for Hypertext Markup Language and it’s used to tell web browsers how to display a web page's words.
The HTML code or tags are used to format text into paragraphs, headings, bullet points, etc.
We have a pre-defined style format for our website so when we add these tags, they will show the text according to our styling. It’s a bit like pre-defined formatting styles in Word, for example.
Copying and pasting from Word into the ‘Design’ tab can override our styling, but if we paste it into HTML, all the formatting is stripped out and we can add the HTML formatting afterwards:
- copy some text from Word
- select the ‘HTML’ tab at bottom of the Rich Text Editor box
- paste the Word text in here
- to put the tags in, we go back to the ‘Design’ tab
- for a single paragraph, we can just highlight the text and using the paragraph drop down selecting ‘Normal’
If you go back to the HTML tab, you can see that paragraph tags have been added. If you want to add text with multiple paragraphs, you can paste everything into the HTML tab. Then go back to the design tab and using the cursor and the return key on your keyboard, insert the paragraphs.
To create headings, just highlight the text you want as a heading and select the relevant option from the paragraph drop down.
Bullet points can also be done from the Design tab, just using the bullet list option in the menu.
If you look at the HTML tab now, you see all the additional tags that have been added.