1

WYSIWYG

2

Overview

• Using the WYSIWYG Editor in the CMS– Introduction to the WYSIWYG

–Feature Highlights

–Using the WYSIWYG – the Basics

–Getting Content into the WYSIWYG

–Styling Content

– Inserting Images

–Linking to Other Content

–Checking Your Work

–Advanced Features

–Key Differentiators

3

What is WYSIWYG Editing?

•WYSIWYG (What You See Is What You Get) Editors allows you to edit content visually–The interface is designed

to be similar to that of a word processor

–May Include a design and a code view for HTML editing

–WYSIWYG-generated HTML code is well-formed, with the WYSIWYG enforcing validation of entered code

4

What is WYSIWYG Editing?

•Use the WYSIWYG to–Input content that requires flexibility in

layout and appearance.

–Insert images, hyperlinks, tables, and other common HTML elements into your content

–Directly edit code in the code view

5

A "Full" WYSIWYG Panel - Ephox

Document Navigator

Tag / Pre-defined CSS Style Selector

Design/Code Tabs

Fully Customizable Button Layout

Main Edit Area

Pop-out windowbutton

§508 Accessibility

Font Dropdowns Generate Inline CSS

(no "font" tags)

6

A "Full" WYSIWYG Panel - TinyMCE

Tag / Pre-defined CSS Style Selector

Code Popup

Fully Customizable Button Layout

Main Edit Area

Pop-out windowbutton

Font Dropdowns Generate Inline CSS

(no "font" tags)

7

New Features

• CrownPeak now supports TWO WYSIWYG Editors – Ephox EditLive and TinyMCE

• TinyMCE –Javascript based – loads instantly in cms

–cross-platform

• Ephox EditLive– legacy feature compatibility

–Requires Java

8

Feature Highlights

– Window View (“Pop-out” mode) • Allows the WYSIWYG to display in its own window

– Accessibility Report (Ephox)• Compliance with Section 508 and Web Content Accessibility

Guidelines (WCAG)

– Document Navigator (Ephox)• Displays cursor’s location in HTML elements

• Allows for easy selection of those elements – instrumental in proper application of CSS

– WYSIWYG Snippets/Templates• Makes pre-built static HTML code fragments

available for end user

– Insert HTML (Ephox)• Inserts a chunk of code while remaining in design view, useful

for externally hosted content embed codes, etc.

EphoxTinyMCE

EphoxTinyMCE

9

Feature Highlights (continued)

–XHTML • WYSIWYG-generated code is XHTML compliant, with the

WYSIWYG enforcing compliance of entered code.

–Forms (Ephox)• A full range of HTML form insertion tools are now available.

– Import Word Document• Word documents can be directly imported into the WYSIWYG

(Note: Word must be installed on the user’s machine.)

–Help (Ephox)• Help documentation is accessible from the WYSIWYG menu.

– Internationalization• Multi-lingual dictionaries and WYSIWYG interface

10

Using the WYSIWYG – The Basics

• Activating the Field– Select an asset, either Edit > Edit or Edit > Form on an asset with a WYSIWYG

from the menu or right click

– WYSIWYG Areas general appear as large text blocks, possibly with preview formatting

– Click anywhere within the WYSIWYG field to activate it

• Editing Content– Edit and format your content similarly to how you would in a word processor

– The WYSIWYG commands are available through buttons and drop-down menus

– Drop-down of standard and site-specific styles (based on your implementation’s CSS)

– Use the Design and Code tabs in Ephox to select between WYSIWYG mode and the source code editor or click the “HTML” button in TinyMCE to see the source HTML

11

Getting Content into the WYSIWYG

• Type It– The WYSIWYG functions a lot like a

word processor

• Paste It– Copy/paste content from other

applications.

– Paste options (in Design view):• Plain Text: inserts your content

without any formatting or style information

• Clean HTML: inserts content in HTML without inline styles

• Styled HTML (inline): inserts content with HTML and inline styles 

• Paste Options in TinyMCE available in popups accessible via buttons

• Import It– Import documents directly from Microsoft Word

12

Styling Content

• Formatting and Features–The WYSIWYG supports standard HTML

formatting such as bold, italics, alignment, and bullets.

–Highlight your content and click the desired button or select the formatting style from the Format dropdown menu.

–Developers can customize the available features for each WYSIWYG, either to provide flexibility or to "lock-down" available styling.

13

Styling Content

• CSS: You can access pre-defined CSS from the WYSIWYG Style dropdown.–Best practice: create a subset of your page

CSS specifically for use in wysiwyg content blocks to streamline/simplify input

–Useful Tip: To apply a style to a section of content, use the "Document Navigator" to show where you are within your HTML – Ephox only• Click on any of the listed elements to select it,

then apply the CSS from your dropdown.

14

WYSIWYG - Developer Notes

•WYSIWYG CSS Development Requirements–ONLY include styles you want to use in the

wysiwyg areas of your pages

–Specify as [element], .[class] (for classes available to all elements) or [element].[class]

– In preview, specific styles can further be inherited from containing divs.

–Nesting of elements in wysiwyg beyond [element].[style] in wysiwyg CSS is not supported

15

Inserting Images

• Insert Image–To insert an image, click the Image icon

or select Insert -> Image.

–When the Insert Image dialogue box appears, you will have two options:• Local Image: select this option to upload an

image from your hard drive into the WYSIWYG

• CMS: link to an existing image in the CMS

–Tip: If you plan to reuse images across different assets, upload them into the CMS and then link to them.

EphoxTinyMCE

16

Inserting Images

• Image Properties–Inside the WYSIWYG, right-click an image

and select Image Properties, or double-click the image. The Image Properties dialogue box allows you to set image attributes such as the alt content, as well as borders and alignment.

17

Linking to Other Content

• Add a Hyperlink– Highlight the text you wish to link from, and click the

Create/Edit Link button, or select Insert -> Create/Edit Link.

– Use the left panel to select the type of link (email address, anchor, local file, or CMS). To link to an external site, enter the URL in the Address field at the bottom of the dialogue box.

– You can also set Screen Tip content and the target frame in this dialogue box.

Link Buttons

18

Checking Your Work

• Spell Check– The WYSIWYG checks your spelling as you type.

– You can also add words to your own dictionary.

• Word Count (Ephox, TinyMCE: Integrated)–Gives you a word count on your current document.

• Accessibility Report – Ephox Only–Great for sites with accessibility requirements such as

Section 508.

– Provides a list of possible accessibility issues in your document.

Word Count §508 Accessibility

19

Advanced Features

• Forms –Ephox Only– A complete form builder is

available under the Form menu

• Code View– Click the Code Tab (Ephox) or the HTML

button (TinyMCE) to go to the code view.

– Allows you to manually enter HTML, apply styles, etc.

– With the XHTML Strict option on, the WYSIWYG enforces valid coding – improperly closed tags and illegal XHTML will be corrected or removed to protect the integrity of the content! 

– Code must be well-formed regardless of XHTML setting. HTML5 tags should be recognized but unrecognized elements and attributes may be removed.

Ephox Form Builder

20

Key Differentiators

• Dynamic CSS Style integration– Immediate “preview” of styles in menu

•MS Word Import– Import Word content directly, with filters to

ensure XHTML compliance

• Real Time Spell Checking–Spell checking happens immediately – don’t have

to click a button to activate like other WYSIWYG’s

–Thesaurus also available

• Internationalization–Multi-lingual dictionaries and WYSIWYG interface

21

Questions?

22

WYSIWYG Exercise

1. Navigate to /Simple Site CSharp/News Releases.

2. Select Page from the New menu.

3. Complete the following• Edit the Content field. This is a WYSIWYG area.

• Add in some text content

• Include a bulleted or numbered list

• Import or select an image and add to your WYSIWYG page

• Save and preview