How do you edit the text on your website?
If you use a CMS, you’ll open a certain page & use an editor. It’s the part of the CMS that lets you type or paste in text.
Sitefinity has such an editor too. But it’s much more than a place where you enter text.
Sitefinity’s built-in webpage editor has a few names – Content Editor, RAD Editor, Text Editor. We’ll use Content Editor today, while we take a dive into its functions. You’ll find there’s a lot of power contained in this one little CMS component.
What is the Content Editor?
The Content Editor is a component that facilitates updates for webpages, news items, blog items and shared content.
Many content management systems employ a text editor for making website updates. Sitefinity’s editor is unique though, for a couple reasons.
- The editor is actually a complete “control” – like a mini-app – which received dedicated development alongside Sitefinity.
- It was modeled after Microsoft Word, to make its use both powerful and intuitive.
How You Use the Content Editor
Opening the Content Editor only takes one step.
Click “Edit” on any content block on a webpage, OR
In the News/Blogs/Shared Content library, click the item you want to edit.
You’ll see this Editor box pop up.
From here, you can type in text, paste text in, add images/video, and style the content how you want.
The editor box may look slightly different, depending on where you are in Sitefinity. For instance, the Content Editor on a webpage may look slightly different than the Content Editor for a blog post.
You’ll note that the editor in this image only has 1 line of commands and a “More formatting options” button above the text field. That’s the default setting in Sitefinity. At any point you can click the button to reveal the remaining buttons.
Quite a few buttons, in fact! So many I need to list all their names.
From left to right, these are the buttons on the Content Editor.
LINE 1: Bold, Italic, Numbered List, Bullet List, Add Link, Remove Link, Add Image, AJAX Spellchecker, Paste from Word, Paragraph Style (Dropdown)
LINE 2: Align Left, Align Right, Align Center, Justify, Indent, Outdent, Font Name, Font Size, Foreground Color, Background Color
LINE 3: Media Manager, Flash Manager, Document Manager, New Paragraph, Insert Table, Insert Symbol, Horizontal Rule, Superscript, Subscript, Format Stripper, Find and Replace, Print, Toggle Full Screen Mode.
As I said earlier, Telerik designed the Content Editor to work like the toolbars from Microsoft Word.
Most of Line 1 you’d use for text formatting. Line 2 helps you organize your content on the page.
A few of the Line 3 buttons need a little more explanation.
- Media Manager – This button lets you add a video into content. Only use it you want to surround a small video with content. Any other time you want to put a video on a page, use the Video widget instead.
- Flash Manager – Lets you add Flash content to the page.
- Document Manager – This button you’ll use if you want to add a file, such as a PDF, into the content.
More on the Content Editor’s workings: Content Editor Section on Sitefinity Docs
Above the Editor’s Save button, we have “Design” and “HTML.” Design is selected by default. Hmmm. What are these for?
These are the Editor’s two modes – Design Mode and HTML Mode.
Best way to explain these is:
Design Mode – What You See is What You Get (WYSIWYG)
HTML Mode – Raw HTML Code
Design Mode acts like Word. If you underline some text, you’ll immediately see it underlined.
Select Heading 3, and the text changes before your eyes.
No surprise most of our customers only work in Design Mode.
(One catch though – look at the button names in Line 1 again. See “Paste from Word?” If you copy text within Word, and want to paste it into Sitefinity’s Content Editor, you must use this button. Don’t just paste the text in with a Ctrl-V. If you do, all the Word formatting gets pasted in too, which can seriously mess up how the text looks.)
If you’re comfortable working with HTML, HTML mode lets you do so. You put [strong] tags around some text, it will bold the text. But you won’t see the change until you click over to Design Mode, or click Save.
That’s an extra step, but trust me, having HTML right there helps! Countless times I’ve had to fix a broken webpage by going into HTML Mode and finding where some text didn’t get formatted properly.
Modifying the Content Editor
Can you modify the Content Editor? Yes, but you probably don’t need to.
Like nearly every aspect of Sitefinity, the Content Editor is customizable. However, most customization requests we’ve heard didn’t require any modifications.
Branding your website? The Content Editor only shows up in the backend; no site visitor will ever see it. No need to brand it.
Want a certain functionality? It may already exist elsewhere in Sitefinity–another widget, for instance. If it doesn’t, you can make a custom control more easily than modifying Content Editor.
Caution: Stylesheets May Override Content Formatting
There is one aspect of web design you won’t see when using the Content Editor: stylesheets.
If your website uses global stylesheets, you won’t see their styles in the Content editor. They take effect once you click Save. You should see the content styled on the webpage afterward.
Keep stylesheets in mind when editing content! If you format some text one way, but the global stylesheet wants to format it differently, the global stylesheet’s styles will override your formatting.
Here’s how you can check this. Use this method to test your content before you publish any changes too.
- When you’re done entering content, click the Save button. The Content Editor will close, returning you to the webpage.
- Look at how your content appears (“renders”) on the page. If it doesn’t look quite right, re-open Content Editor by clicking Edit & making your changes.
- When the content does look right, click the Publish button at the top to publish your newly-updated page.
As I said before, many of our customers prefer to work in Design Mode. I like working in HTML Mode because I can change formatting fast.
Either way is fine! Sitefinity’s Content Editor lets you update your website how you like.
What do you like about Sitefinity’s Content Editor? What frustrates you about it? Please comment or email your responses.
Until the next post!