WYSIWYG Editor

We have upgraded our editor to give you the latest and greatest tools to manage your content. This change affects several major page parts and thereby improves your content experience across the whole platform. You will see the new editor on these page parts:

• Custom Content 
• Blog 
• Calendar (Description tab)
• Collections (Description for Item)
• News Archive
• Online Donations (Form Response)
• Online Registration (Form Response)

Watch our training video for the full experience! 

WYSIWYG Editor Tool Bar

We’ll go through each icon and discuss in-depth what they mean.

Quick Menu

Basic Formatting of Text

Use Styles

Styles vary from site to site; some sites have no specific styles, where others might have several different kinds of buttons. This is determined in your design process when we build your site.

Applying your styles is simple! You simply type the word you want to style, highlight it and select your Style from the dropdown tab. If you need to break away from your Style and start typing normally, select the red dotted line to break the style and it will go back to normal. Check it out!

Format Your Text

Format your text font with your pre-selected styles. Type the word you want to format, highlight it and select your Format header options from the dropdown tab.

Basic Formatting Options

	Bold
	Italicize
	Underline
	Remove Format -- highlight your text to strip all the existing formatting and clean it up
	Align your text Left, Center, Right, or Justify
	Bullet points and number listings
	Indent your content left or right
	Use block quotes to call attention to specific passages of text

Back to top

Using Your Words

Use your words to their best advantage by using our tools designed to make your life easier.

	Use this tool by inserting copy from Microsoft Word and other formatted text to strip your formatting and keep your content clean and easily editable on the web.
	Undo and Redo buttons. Made a mistake? Go back a step, or go forward a step.
	Search for words, or do a find and replace.
	Use our Spell Checker tool. If you Enable SCAYT, that means “Spell Check As You Type,” so it will give you a red underline under your words if they are misspelled or unusual. Alternatively, you can “Check Spelling” and it will pull up a window for you to see alternate spellings of your words.

Back to top

Inserting Media

If you need to insert video files, audio files, or other, check out our Insert dropdown tab.

Insert Images

If you already have an image uploaded to SiteWrench, or if you need to upload a file to SiteWrench, you can use the Insert Image option. Select "Choose" to look at your Files section or to upload images onto your Files section on SiteWrench.

While you're inserting the image, you can adjust the size of the image, the spacing around the image, and the border. You can even set an alignment to make the image float left or right. Use the tabs at the top for more advanced features.

Special Feature - Drop and Paste Images

What’s even better than that, you ask? Now you can drop and paste images directly into your content area, and it will upload and save it for you! Need to find that photo in your Files section later? Look for your photo name with this at the beginning of the file so that it’s set apart: “pasted_photoname”

New Feature - HTML 5 video and audio capability

Let’s say you want to insert a video or audio file onto your site. Previously, you would have had to go through the Media Archive page part or embed an iFrame from YouTube or Vimeo. Now we have upgraded our Editor so that it can handle HTML 5. This is good news for you -- this means that now you can insert a video or audio file directly into your editor and it will play across all browsers.

Now you have the option to select a video, but you also have the option to select a "poster image" to appear publicly where the video file is embedded. The poster image shows before the video is clicked to be viewed.

Wondering where to insert links and files (PDFs)? Keep reading.

Inserting Links

Link me baby, one more time.

Linking your content works just as easily as ever, but there are a few upgrades to make note of. Now when you copy in a URL from a browser, the editor will automatically adjust whether or not it is http:// or https://, and it will remove any existing occurrence of this for you. One less step for you to deal with. Use the tabs to get as technical as you want with the Target and Advanced modes with your links.

Inserting Files and Linking to PDFs

If you want to include a file, like a PDF, in your content -- you will select the linking option. Use the "Choose" button to search for a file in your SiteWrench files section. You can browse for a document, upload it to Files, and select it.

Insert Anchored Text

Use the flag button next to the linking icons to anchor your text. First you create your anchor, then you insert links which will go to the anchor you specify. 

Back to top

HTML Editing

We have included a couple of new features to make your life easier.

	Check out our Source button, which is where you will go to adjust HTML now.
	Use this to format your HTML.
	This button will automatically close whatever HTML tags you begin. For example, if you start off with a <h2> it will add the </h2> automatically at the bottom. This way the header 2 font does not carry throughout the rest of the content.
	If you want more space to view your content, expand your editor view to full screen by selecting the X shape once to expand, and again to put back the way it was.
	View your blocks when not in source view. This helps you see the distinction between a paragraph, header 1, block quote, or other.

New Feature - Block View

Block View is a newer feature that will come in handy. It shows you how HTML is incorporated throughout your content, even without viewing the Source HTML. 

SiteWrench Training Opportunities

As always, if you have any questions or concerns about the new editor, please don’t hesitate to ask. Our team would love to help you in this transition.

For a limited time, we are offering free training sessions specifically about the upgraded Editor. Please view training times on our Training Calendar and sign you or your team up today. If these times don't work for you, take a look at our 18 minute training video at the top of this page or submit a support ticket and we'll be glad to help.

Back to top