Using the Ektron Editor

Ektron includes a browser-based, Web content editor designed for dynamic Web sites that lets you create and publish Web content in any language supported by the operating system and your Web site. You can use the eWebEdit400 editor on Windows and Macintosh operating systems. You can also use the eWebEditPro+XML editor on Windows.

Show the editor information.

eWebEdit400 Toolbar

eWebEditPro+XML Toolbar

The system administrator determines the editor options in the site’s web.config file, using the following settings.

<appSettings>
   .
   !-- EditControlWin may be either "ContentDesigner" or "eWebEditPro" or "UserPreferred" -->
     <add key="ek_EditControlWin" value="UserPreferred" />
     <!-- EditControlMac Only "ContentDesigner" -->
     <add key="ek_EditControlMac" value="ContentDesigner" />
  .
 </appSettings>

Operating System

Web.Config file key

Possible editor key values

Windows

ek_EditControlWin

Macintosh

ek_EditControlMac

  • ContentDesigner (use to load eWebEdit400)

NOTE: When you cut, copy and paste from Microsoft Word, you can preserve the styles, class attributes, and HTML tags by following these steps:

  1. In the Workarea, choose Settings > Configuration >Setup. The Application Setup screen appears.
  2. Click Edit.
  3. Click the Editor tab.
  4. Check the boxes: Preserve MS-Word Styles and Preserve MS-Word Classes.

eWebEdit400 functions
Button
(Shortcut)
Function
Select All
(Ctrl/a)
Select all content
Cut
(Ctrl/x)
Remove selected text and graphics. Place that data into temporary memory, also known as the “clipboard.” (If you later cut or copy more information onto the clipboard, the new information overwrites the original information.)
Copy
(Ctrl/c)
Copy selected text and graphics into temporary memory. Leave selected data where it is.(If you later cut or copy more information into memory, the original information is lost.)
Paste
(Ctrl/v)
Insert the most recently cut or copied text and graphics at the current cursor location.
Paste from Word, Cleaning Fonts & Styles

Designed for pasting Microsoft Word content, this button strips fonts and classes. For example, if you use the Paste button, Word content contains these tags.

<p class="MsoNormal" style="MARGIN: 0in 0in 0pt"><span style="BACKGROUND: lime; mso-highlight: lime"><font size="3"><font face="Times New Roman">

But if you paste that content using this button, only <p> tags are preserved.

Paste Plain Text Paste the clipboard’s contents as plain text. That is, all HTML tags (including images) are stripped out. This button is helpful when you want to eliminate HTML formatting from the copied text.
Find and Replace Launch the Search and Replace dialog box. The dialog searches for (and lets you optionally replace) text that you specify.
Print
(Ctrl/p)
Print the editor content.
Undo
(Ctrl/z)
Reverse the most recent action, as if it never occurred. You can undo as many actions as you wish.
Redo
(Ctrl/y)
Reverse the undo action.
Spell Check Begin spell checker.
Anchor Tag Insert a bookmark anchor.
Add/edit Hyperlink Change information about a hyperlink.
Remove Hyperlink Remove a hyperlink.
Library Insert a library file.
Add Wiki Link Create a wiki link.
Localize Section Designate sections of content for certain languages only.
Translate Translate content into another language.
Horizontal Line Insert a horizontal line.
Insert Symbol Insert symbols and special characters.
Validate Check content for adherence to XHTML and accessibility standards.
Hide/Show Elements Toggle to show/hide temporary markers in content.
Apply CSS Class Display a list of style sheet classes. Users can select from the list to apply a class to selected text. The list can change depending on the selected text. Your Webmaster determines which styles are available.
Paragraph Style Display a list of paragraph styles. Users can select from the list to apply a style to selected text. The list can change depending on the selected text. Your Webmaster determines which styles are available. See: http://dev.ektron.com/kb_article.aspx?id=29894
Bold
(Ctrl/b)
Make selected text bold.
Italic
(Ctrl/i)
Make selected text italic.
Underscore
(Ctrl/u)
Make selected text underlined.
Strikethrough Apply strikethrough to selected text. For example: Here is some text
Superscript Make selected text appear smaller and above text line.
Subscript Make selected text appear smaller and below text line.
Relative Font Size Change the relative font size. Your Webmaster determines which relative font sizes are available.
Font Style Change the font style. Your Webmaster determines which fonts are available.

NOTE: If more than one font appears in a selection, the browser on the reader’s PC tries to display text using the first font. If the browser cannot find that font, it tries to use the second, and so on. Your system administrator can enable or disable the font toolbar buttons (style, size, color, and background color).

Font Size Change the font size in points. Your Webmaster determines which font sizes in points are available.
Font Color Change the font color.
Background Color Change the background color of the selected content.
Number Begin the line on which the cursor rests with a number. If the line above this line is:
  • not numbered, assign this line 1
  • numbered, assign a number one more than the line above

NOTE: The Number toolbar button applies a number to each paragraph. If you want to switch to regular (that is, non-numbered) paragraphs, click the button a second time

Bullet Begin the line on which the cursor rests (or all selected lines) with a bullet.

NOTE: The Bullet toolbar button applies a bullet to each paragraph. If you want to switch to regular (that is, non-bulleted) paragraphs, click the button a second time.

Indent Increase or decrease the current line’s distance from the left margin.
Left, Center, and Right Justify Align paragraph so that it is arranged evenly on the...
  • left side (uneven on the right)
  • in the center of each line
  • evenly on the right side (uneven on the left)
  • evenly on right and left side

Use the last button to remove justification.

Insert table Insert a table. See: Working with Tables
Insert row above Insert a new row above current one (that is, the one in which the cursor currently resides).
Insert row below Insert a new row below current one (that is, the one in which the cursor currently resides).
Insert column left Insert a new column to the left of the current one.
Insert column right Insert a new column to the right of the current one.
Delete row Delete current row.
Delete column Delete current column.
Delete cell Delete current cell.
Merge cells horizontally Merge current cell with cell to its right.
Merge cells vertically Merge current cell with cell below it.
Split cell Divide a cell into two. After you split, each cell occupies one half the size of the original cell.
Table properties Adjust a table’s properties.
Cell properties Adjust properties of current cell.
Show/hide border Display/suppress internal table border.
Using temporary markers

Using Temporary Markers

Temporary markers lets you insert your cursor in a place that is otherwise inaccessible. For example, if 2 tables are adjacent to each other, you cannot insert text between the tables without temporary markers. You can click on any marker and begin inserting new content. When you save the content, temporary markers are removed.

You can toggle the temporary markers on and off by clicking the Hide/Show Elements button ().

 


NOTE: Your Ektron system administrator can use the siteroot/web.config file's ek_ShowTemporaryMarkers element to enable (true) or disable (false) temporary markers for all users.

Finding and replacing text

Finding and Replacing Text

To find (and optionally replace) text, click Find and Replace (). The Find and Replace dialog box appears.

 

In the Find field, type the text you want to find.

  1. Click the Replace tab.
  2. In the Replace With field, type the text to replace the “find” text.
  3. Set dialog box options.
    • Selection only—operates on a selected portion of content.
    • Direction—Search from the current cursor location up (backwards) or down (forwards).
    • Match case—The search must match the string exactly.
    • Match whole words only—Find only whole words. By default, the search finds any occurrence of the text that you type into the Find field. For example, if you enter the, the search finds the word the, as well as those letters embedded in other words, such as others and theater.
  4. If you want to...
    • replace all occurrences of the “find” text with the “replace” text, click Replace All.

      NOTE: You can undo replacements one at a time using the Undo button ().

    • replace only the highlighted term with the “replace” text, click Replace.
    • find the next occurrence of the “find” text (and optionally replace it with the “replace” text), click Find Next.
    • change the highlighted term using the editor, exit the Find and Replace dialog, move to the term and edit as needed. To restart the search, press the Find button ().
    • Continue to find and optionally replace or edit until you reach the end of the text.
Checking spelling

Checking Spelling

To begin spell checking, click the spell check button (). eWebEdit400 puts a red line under each word that’s not in the dictionary. Then, it stops at the first misspelled word and displays your options for fixing the problem. Instead of stopping at every misspelled word, you can place the cursor on any highlighted word. When you do, its spelling options appear.

 

NOTE: The FireFox browser has its own spell check software. To eliminate confusion between eWebEdit400’s and Firefox’s spell checker, you can disable Firefox’s by choosing Tools > Options dialog > General Tab and unchecking the Check my spelling as I type check box.

If you are done before fixing every misspelled word, click Finish spell checking from the toolbar. Your changes are saved, and you return to edit mode. If you want to exit the spell checker and ignore all changes you have made since beginning it, click Cancel (circled above) at any time.

Using bookmarks

Using Bookmarks

A bookmark lets you “jump” from any word or phrase to another place in the same content block. On your Web page, text appears in a different color to indicate the bookmark. Bookmarks are helpful if your page is long.

To create a bookmark, you must specify:

  • a source—the text a user clicks to move to the bookmark
  • a bookmark—the destination to which the cursor jumps when a user clicks the source

For example, if your Web page contains minutes from several meetings, the top of the page could list the meeting dates. You could then assign a hyperlink (source) to each date and a bookmark to each set of minutes. The user sees that a date is in a different color, so clicks it to “jump” (using the bookmark) to the correct minutes.

To create a bookmark:

  1. Place the cursor where you want to create the bookmark..
  2. Click Insert Bookmark (). The Link Manager dialog appears with the Bookmark Tab selected.
     

  3. Enter a name for the bookmark and click OK. The editor screen redisplays. (The bookmark does not appear on the page.)
  4. Select the source text that will link to the bookmark that you created..
  5. Click Hyperlink Manager (). The Hyperlink Manager dialog appears with the Hyperlink tab selected.
  6. Click the down arrow on the Existing Bookmark field and click the bookmark you created.
     

  7. Optionally set the Target Frame field on the Hyperlink Manager dialog to change the window that displays the destination page.
    —Show the target options—
    • New Window—Appears in a new browser window, on top of the current browser.
    • Same Window(default)—Appears in the same position within the browser window. The new window replaces the current one.
    • Parent Window—Appears if your page contains frames, in the frame that contains the frame with the hyperlink.
    • Browser Window—Appears if your page contains frames, in the full display area, replacing the frames.
  8. Click OK.
Using hyperlinks

Using Hyperlinks

A hyperlink lets you “jump” from any word or phrase to another Web page. The page can be within your network (that is, on an intranet) or anywhere on the internet. For example, your Web page could include a link to the Ektron Web site.

To create a hyperlink, you must specify:

  • a source—the text a user clicks to move to the bookmark
  • a destination—the destination to which the cursor jumps when a user clicks the source

NOTE: To create jumps within a content block, see Using Bookmarks.

Creating a hyperlink

Creating a Hyperlink

  1. Select the source text. (You can also select an image as a hyperlink.)
  2. Click Hyperlink Manager (). The Link Manager dialog appears.
     

  3. In the URL field, after http://, enter the address of the destination Web page. For example, www.ektron.com.
  4. Optionally set the Target Frame field to change the window in which the destination text appears. If you leave the Target Frame field blank, the new window replaces the current window.
  5. Optionally enter "hover over" text in the Tooltip field.
  6. Optionally The style of this hyperlink is normally determined by the style sheet assigned to the content’s page template. However, if you want to apply a special style sheet class to this link, select it from the CSS Class drop-down.
  7. Click OK.
Creating an email hyperlink

Creating an Email Hyperlink

An email link resembles a hyperlink. But, when a site visitor clicks the link, instead of opening a different Web page, his email application is launched.

To create an email hyperlink:

  1. Select the source text. (You can also select an image as an email hyperlink.)
  2. Click Hyperlink Manager (). The Link Manager dialog appears.
  3. Click the E-mail tab. The selected text appears in the Link Text field.

  4. In the Address field, enter the email address to which the message will be sent.
  5. In the Subject field, enter default text for the email’s Subject line. The user sending the mail can edit this text.
  6. Click OK.
 Editing a hyperlink

Editing a Hyperlink

To change a hyperlink’s destination Web page or target frame:

  1. Right click on hyperlinked text and choose Set Link Properties. The Link Manager dialog appears.
  2. Edit the fields as needed and click OK.
 Removing a hyperlink

Removing a Hyperlink

  • To remove a hyperlink from text, select the text and click Remove Link ().
  • If you enter a URL or an email address into eWebEdit400, it automatically becomes a hyperlink. To avoid this, select the text and click Remove Link ().
Using the wiki feature

Using the Wiki Feature

The Wiki feature lets registered site visitors (that is, membership users) and Ektron users insert hyperlinks to other content. The hyperlinks can connect to existing content or to content that doesn’t exist yet. This collaborative authoring style is used in wiki sites such as Wikipedia (http://en.wikipedia.org), where any author can contribute new content and articles.

—Show 2 ways to create a wiki link—

Method

Advantage

Surround text with double square brackets ([[ ]])

Quick

Use the wiki button ()

  • Can link to existing content or create new content
  • Can choose new content’s folder

    NOTE:  Membership users cannot choose a folder. The new content is created in the same folder as the content being edited.

  • Can change title of new content
  • Can select new window’s target frame

To create a wiki link using the wiki button, select the text to which you want to assign a wiki hyperlink. It can be one or several words and click Add Wiki Link ().

NOTE: The Wiki button only appears if you have permission to add content to the folder that contains the current content.

The Add/Edit Wiki Link screen appears. It has 2 tabs.

  • New Content tab—create new content to which you will add information later. The new content item will appear when a site visitor clicks the link text.

    If you want to place the new content item in the folder that contains the text you are editing, do nothing. To place new content in a different folder, click Change and navigate to that folder. You can also edit the Title and the Target Frame.

    NOTE: Membership users cannot assign a folder. New content is saved to the folder that contains the source content.

  • Related Content tab—link to existing content. If you click this tab, Ektron uses the selected text to search your Web site. All content with that text then appears on the screen. Each content item’s title appears followed by its summary. Click the radio button next to the content you want to link to.
     

To indicate that a wiki has been applied to new content, the text color changes to blue and bold, and small dots appear under the wiki text.

  • If you applied a link to related content, a regular hyperlink appears.
  • If you link to existing content, the link is the same as quicklink.
  • If you are creating new content, Ektron assigns a <span> tag to the selected text. For example:
    <Span class = "makelink">selected text here</span>

When the content is published, Ektron does the following:

  • Detects the <span class = "makelink"> tag.
  • Finds text surrounded by the <span> tag.
  • Creates a new content block in the selected folder.
    • its name is typically the selected text. However, if the user used the wiki button, the user can modify the new content block’s title on the Add/Edit Wiki Link screen.
    • its initial text is New Content: content for selected text. (Fill in the topic text as you or other collaborators have time.)
  • Gets the quicklink for the newly-created content block.
  • Opens the original content and replaces the <span> tag with the quicklink to newly-created content.
Working with HTML

Working with HTML

You do not need to know HTML to use eWebEdit400. However, if you know HTML, you can view, insert or edit your Web page’s HTML code by clicking at the bottom of the editor. The HTML code appears.

To return to normal view, click .

Working with images

Prerequisite

Before you can insert an image into eWebEdit400, the image must be either uploaded to the Library or imported as an asset.

Inserting an image into the editor
  1. Place the cursor where you want the image to appear
  2. Click Library ().
  3. From the folder display in the left panel, select the folder that contains the image you want to insert. If you don’t know the image’s folder, use the search button () to find the image by title, description, or internal file name.
  4. Make sure Images is selected in the content type drop-down.
     

    NOTE: If you are inserting an asset, its content ID number (for example, assets/1062.jpg) appears in the Insert Library Item screen.

     


  5. Select the image you want to insert.
  6. Click Insert (). The image is inserted into the content.

    Alternatively, you can insert a miniature version of the image, called a thumbnail by clicking the thumbnail button (). When the thumbnail appears on a Web page, a site visitor can click it to view a full-sized version of the image.

    NOTE: You can change the thumbnail image by right clicking it, selecting Set Image Properties and editing the Image Src field. If you do that, however, and someone clicks it, the original full-sized image appears. If you want to change both the thumbnail and the full-sized image, delete it then enter a new thumbnail.

To delete an image, click the image and click Cut ().

Editing an image

To edit an image, right click it and choose Image Modification Tool.

 

—Show the icon descriptions—
  • —Save changes
  • —Exit without saving changes
  • —Crop image. Drag the box around the area you want to keep and click Done.
  • —Change image size. Specify the Width and Height. Check the box to keep the aspect ratio.
  • —Rotate image.
  • —Adjust brightness. Move the slider to the left to lighten the image; to the right to darken the image.
Setting a border on an image

To add a border around a picture, enter the border’s thickness in pixels in the Border Width field on the Image Properties dialog.

1 pixel border

10 pixel border

If the picture is not a hyperlink, its border is black. If the picture is also a hyperlink, the border is the same color as a hyperlink (for example, blue or purple if visited).

Aligning an image

To align an image , use the Image Alignment field on the Image Properties dialog.

  • —The picture on the left margin, allowing subsequent text to wrap around it

  • —The picture on the right margin, allowing subsequent text to wrap around it

  • —The top of the picture with the first line of text

  • —The vertical center of the picture with the first line of text

  • —The bottom of the picture with the first line of text

Adding space around an image

On the Image Properties dialog box, you can use the Spacing fields (Horizontal and Vertical) to add space around the picture. You enter a number of pixels to determine spacing value.

NOTE: When you save an image, a version is placed in the siteroot/uploaded images/CMS folder folder. The version is named filename.nextnumber.file extension.
For example, if a library image is named ektronlogo.png, and someone inserts it into content and saves it, a new version is created and named ektronlogo.1.png. If someone later saves that image in another content block (or even another section of the same content), that version is named ektronlogo.2.png. Also, whenever someone edits and saves the image, a new version is created and assigned the next highest number.
These edits have no effect on the original image stored in the library.

Editing image properties

After an image in inserted, you can adjust the image properties by right clicking on the image and choosing Set Image Properties.

—Show the Image Properties dialog box—

—Show the Image Properties descriptions—

Field

Description

Border Width

Set the width of the image’s border in pixels. See Also: Using the Ektron Editor

Border Color

To set the color of the image’s border, click the X circled below. When you do, a palette of colors appears. Click the border color from the palette.

If a color has already been assigned, it appears next to this field label. To change it, click down arrow next to the color to display the color palette.

Image Alt Text

The image’s title is used as the default alt text. Change if desired.

The alt text appears in place of the image on the Web page if the image does not display. Examples of when an image does not display include:

  • a speech browser (for example, a visually impaired person)
  • a text-only browser (for example, browsing from a mobile phone)
  • a graphical browser with images turned off

Image Alignment

The alignment of the image relative to adjacent text and images. If you choose left or right alignment, the text wraps around the image. For more information, see Using the Ektron Editor

Image Src

The path to the image.

If you want to change the image, click the ellipsis () button to open the library. From there, select a replacement image.

Horizontal Spacing, Vertical Spacing

The amount of horizontal and vertical space around the picture. See Also: Using the Ektron Editor

Width

The width of the picture in pixels. See Also: Using the Ektron Editor

NOTE: The Width and Height settings determine the area on a Web page in which the image appears. To display an image correctly, its height and width settings should match its actual size (set using the resize button). See Also: Using the Ektron Editor

Height

The height of the picture in pixels.

Constrain

The constrain feature lets you determine if an image’s height and width can be adjusted independently. Typically, you want Constrain on, as shown below.

In this state, if one dimension is adjusted, the other is automatically adjusted in proportion to it. For example, if you change the height from 100 to 200, the width is also doubled.

To turn Constrain off, click it. When you do, it looks like this.

When Constrain is off, the adjusted picture can be disproportionate.

WARNING! If you substantially adjust a picture’s height and/or width, the picture may be distorted when users view your Web page.

Deleting an image from an XML Smart Form and eWebEdit400

If you want to remove an image from content created from an XML Smart Form and eWebEdit400 is your editor, click image (), open the Image Properties dialog, and delete the image path (circled below).

Internet Explorer Limitation

NOTE: If you begin editing an image then click cancel (), and later try to edit that image, you may see a small, red x instead of the image. (This problem only occurs if your browser is Internet Explorer.) To remedy the problem, go to Tools > Internet Options > Browsing History > Settings (or Temporary Files > Settings in Internet Explorer 6). Set Check for newer versions of stored pages to Every Visit.