Electronic Communications Unit

A wizzy-what ?!!

Content Management Is Easy

With WYSIWIG Editors

Electronic Communications Unit

WEB WYSIWYG Editors

• Providing content authors with HTML writing tools.• When – Content Management Systems, Web based email

systems, Message boards. • Why – limited budgets, common standards

• Editors - Client side tools– Client OS and Browser compatibility is an enormous

issue.• Function As Form Text areas• Overview of 2 different kinds of editors

– Flash Editors (EwebWP)– ActiveX (EwebeditPro)

Electronic Communications Unit

EKTRON

• Why Ektron Editors– Stable Company – Excellent Support– Industry Leader– Excellent Documentation(user & developer)– Works well with ColdFusion– Great Architecture

Electronic Communications Unit

EwebWP – (ABOUT)

• Flash Based (6)• Cross Platform compatibility• Produced by Ektron• Easy Installation• Light download for client• $99 License

Electronic Communications Unit

EwebWP – (FEATURES)

• Insert Files and Images• Font Style/Alignment• Style Sheet compatibility• Cut/Copy/Paste

Electronic Communications Unit

EwebeditWP – (INSTALLATION)

• Key Files– EwebWP.swf – Flash executable– EwebWPLicenseKey.txt – Key provided by

Ektron– Ewebwp.cfm – Calls the Flash executable– FilesStored.xml – provides titles and paths to

images and files for insert into content.

Electronic Communications Unit

EwebeditWP – How it stacks up• Advantages

– Easy to Install

– Excellent support from Ektron

– Cross platform support

• Disadvantages

– Image is not displayed in Editor

– Limited ability to customize

– Limited HTML Support (No Tables)

– Limited Special Character/Foreign Character support

Electronic Communications Unit

Ewebeditpro – (ABOUT)

About Ewebeditpro 2.6.1

- Produced by Ektron

- Requires a Windows OS for the client

- ActiveX Control

- A truer WYSIWG Editor

- Generates xhtml

- Highly Customizable

- Strong CF support

- $300 license

Electronic Communications Unit

Ewebeditpro – (FEATURES)• Image/File/hyperlink Insert

• Image Upload Module

• Stylesheet support

• Multilanguage Support

• Cleans Word Documents well

• Standard text editing features

• Supports Tables

• HTML view

• Spell Check

Electronic Communications Unit

Ewebeditpro (INTEGRATION)

• Key Files– Config.xml- Controls the tool bar, paths– Ewebeditpro.cfm – Custom tag that calls editor,

sets paths– ewebeditproevents.js – javasript processes

• Key Tables– Images table – controls images paths, properties – Extension_tbl table – used to control the types

of files that can be uploaded.

Electronic Communications Unit

Ewebeditpro (CUSTOMIZE TOOLBAR)

• Add new tools to the editor tool bar– Code for Config.xml<button command="cmdadobe"/><command name="cmdadobe" enabled="true">

<image src="[eWebEditProPath]/btnphotoshop.gif"/><caption>Add A Link To An Adobe Document</caption><description>Add Link To An Adobe Document</description><tooltiptext>Add Link To An Adobe Document</tooltiptext>

</command>

- Code for ewebeditproevents.jselse if ("cmdadobe" == strCmdName)

{window.open(eWebEditPro.parameters.path + 'adobe.cfm?editorName=' + escape(sEditorName), 'adobe', 'toolbar=0, location=0,directories=0,screenX=50, screenY=50, status=0,menubar=0,scrollbars=0,hotkeys=1, resizable=1,width=500,height=250'); }

Electronic Communications Unit

Ewebeditpro (CUSTOMIZE STYLESHEET)

• Code for Config.xml- <style publishstyles="true" href="[eWebEditProPath]/ektnormala.css" preservewordstyles="true"/>

Electronic Communications Unit

Ewebeditpro (RETURNING VALUES TO THE EDITOR)

• Code for Adobe.cfmfunction inserthyperlink() {

if (top.opener.closed){alert("Your hyperlink could not be inserted because the editor page has been closed.");}else if (document.frmHyperlinks.text2.value == ''){alert("Your hyperlink text is blank and would create an empty link.");}

else{var hyperlinkvalue; var pastevalue; var targetvalue; var targetvaluepastetargetvalue =

ocument.frmHyperlinks.Target.options[document.frmHyperlinks.Target.selectedIndex].value;if (targetvalue == "") {targetvaluepaste = "";}else {targetvaluepaste = "target=" + targetvalue;}

hyperlinkvalue = document.frmHyperlinks.httpLink.value pastevalue = '<A HREF="' + hyperlinkvalue + '" ' + targetvaluepaste +'>' + document.frmHyperlinks.text2.value + '</a>';

top.opener.eWebEditPro[objQuery["editorName"]].pasteHTML(pastevalue);self.close();}

}

Electronic Communications Unit

Ewebeditpro – How it stacks up

• ActiveX– Heavy download– Serious compatibility issues– Very powerful additional functionality

• Excellent Support• Highly customizable