Oracle Application Server Portal

Technical Note ORACLE APPLICATION SERVER PORTAL 10G RELEASE 2 (10.1.4) – ENHANCED RICH TEXT EDITOR July 2006

INTRODUCTION This technical note describes enhancements to the Rich Text Editor (RTE) available in Oracle Application Server Portal 10g Release 2 (10.1.4). The RTE feature, first introduced in Oracle9iAS Portal 9.0.2, enables content contributors to use a WYSIWYG interface for adding images and applying HTML formatting to text items. Figure 1 shows an example of using the new RTE to edit content in the context of the OracleAS Portal Item Wizard.

Figure 1 - OracleAS Portal Rich Text Editor

RICH TEXT EDITOR IMPROVEMENTS

Several functional areas were improved with the introduction of the new RTE in Oracle AS Portal. These include improved support for:

•

•

•

•

•

•

Table editing and cell properties

Embedded JavaScript in HTML

Relative URLs

Extensibility

Image Library

Search and replace

This paper provides additional details for each functional area. Table 1 compares the RTE features from the most recent version of OracleAS Portal to the oldest:

2

Feature OracleAS

Portal 10.1.4OracleAS Portal

10.1.2 OracleAS Portal 10g and earlier

HTML/WYSIWYG Editing X X X

Cut X X X

Copy X X X

Paste X X X

Single-Level Undo X X X

Single-Level Redo X X X

Font Type X X X

Font Size X X X

Bold X X X

Italics X X X

Underline X X X

Text Foreground Color X X X

Text Background Color X X X

Align Left X X X

Align Center X X X

Align Right X X X

Insert Bulleted List X X X

Insert Numbered List X X X

Decrease Indent X X X

Increase Indent X X X

Insert Hyperlink X X X

Insert Line X X

Insert Image X X

Insert Table (Table Editing) X X

Insert Row X X

Insert Column X X

Delete Column X X

Delete Row X X

Cell Properties X

Paragraph Formatting X

Search and Replace X

Select All X

Table 1 – Rich Text Editor Feature Comparisons

3

IMPROVED TABLE EDITING SUPPORT

The new Table Editing Toolbar, shown in Figure 2, makes it easy to create and edit tables.

e

Figure 2 - Ri

The Insert declarativelsize and cel

Figure 3 – N

Additionalldeclarative

Figure 4 – N

Insert Tabl

ch Text Editor Table Editi

Table dialog has been imy specify numbers of rol padding.

ew Insert Table Dialog

y, a new Cell Propertiesway.

ew Cell Properties Dialog

Delete Column

Insert Column

Insert Row

Delete Row

ng Too

provws an

dialog

Cell Properties

lbar

ed in OracleAS Portal 10.1.4. Now you can d columns, cell spacing and table width, border

enables you to modify the cells in a table in a

4

EMBEDDED JAVASCRIPT IN HTML SUPPORT The old editor stripped out all the JavaScript code embedded in your HTML, preserving only the HTML content. OracleAS Portal’s new RTE retains any JavaScript you embed in your HTML between edits.

Note: The RTE does not execute the JavaScript inside the HTML when rendering it in WYSIWYG mode. Therefore, the content you see in the RTE might be very different from what is rendered in a real browser.

RELATIVE URL SUPPORT

The RTE included in Oracle Application Server Portal 10g and earlier versions supported only absolute URLs. For example, if an image was inserted with the relative URL /images/logo.gif, the RTE converted it to an absolute URL http://<host>:<port>/images/logo.gif.

The RTE in Oracle Application Server Portal 10g Release 2 and later supports both, absolute and relative URLs/links. This enables you to refer to an image item using a path that is relative to the page where the text item is located; that is, when you insert an image with the URL /images/logo.gif, the reference remains a relative link and is not converted to an absolute URL. Using relative URLs makes your Portal site more portable—a particularly important feature when exporting and importing a text item from one portal instance to another.

An improved Insert Hyperlink dialog enables you to specify the type of hyperlink that you want to insert. For example it is possible to add an email link without having to modify the HTML source code. See Figure 5 for all available types.

Figure 5 – Improved Insert Hyperlink Dialog

SEARCH AND REPLACE

The RTE in OracleAS Portal 10.1.4 has built-in search and replace functionality. A new icon in the toolbar provides one-click access to searching and replacing.

5

Figure 6 – Search and Replace Dialog

BROWSER SUPPORT

The new RTE in OracleAS Portal 10.1.4 works with all major browsers, including Netscape, Mozilla, Firefox, and Internet Explorer. If a browser does not support all functionalities required by the RTE, the end user will only see a subset of the functionality. When using a browser that does not support the RTE, a simple text field displays in lieu of the editor.

CUSTOMIZING THE RICH TEXT EDITOR

IMPORTANT NOTE: This section is intended for advanced OracleAS Portal administrators and is for informational purposes only. Oracle Support should not be contacted to troubleshoot issues that result from modifications made to the supplied files; rather, post any questions to the OTN Portal Content Area discussion forum. Before making any modifications, you are strongly advised to back up the original files and create backups of any modified files. Please be aware that with any Portal middle-tier upgrade or patch the modified RTE files are replaced and the changes must be re-applied.

You can customize the OracleAS Portal 10.1.4 RTE to support your individual needs: from simple changes, such as changing the buttons on the RTE toolbar, to completely replacing the default RTE with a third-party product.

ACCESSING CUSTOM IMAGES IN THE IMAGE PICKER

The RTE enables you to insert images into a text item via an Image Picker. By default, the RTE displays the images shown in Figure 7.

6

Figure 7 – Image Picker Dialog

You can easily change or extend the list of available images by modifying the InsertImage() JavaScript Function in popup.js. InsertImage() calls the function insertImagePopupHelper() that constructs the list of available images.

function insertImagePopupHelper() { .. str = "<FORM id='ImageForm' name='ImageForm'>\ <fieldset>\ <TABLE width='80%' align='center'>\ <TR>\ <TD colspan='2' align='justify'>\ <BR/>" + mesIntegrated + "<BR/>\ <BR/>\ </TD>\ </TR>\ <TR>\ <TD colspan='2'><label for='IC'>" + mesSelectImage + "<label><BR/>\ <BR/>\ </TD>\ </TR>\ <TR bgcolor='#FFFFFF'>\ <TD colspan='2'>\ <INPUT accesskey='1' tabindex='1' type='radio' name='IC' value='/images/oralogo.gif'/>\ <IMG src='/images/oralogo.gif' align='top'/>\ <BR/>\ </TD>\

7 </TR>\

.. }

If you want to change the first image in the list, update the above code marked as bold.

The value parameter specifies the returned location of the image that is used in the RTE HTML Image tag.

The src parameter specifies the image source to display the image in the Image Picker.

CUSTOMIZING THE EDITOR TOOLBAR

By modifying the file buildUIHTML.html, you can remove unnecessary buttons or change the location of buttons on the RTE toolbar. The buildUIHTML.html file is located on the OracleAS Portal middle tier at: <MIDTIER_HOME>/portal/images/webword/

To remove or rearrange a button within the RTE toolbar, you must modify the following section. For example, to remove the Cut button in the toolbar, either remove or comment out the following code:

.. <DIV class="WebWordButton" id="BUTTON_CUT" title="Cut" ><INPUT TYPE="image" onClick="format('Cut')" class="WebWordIcon" src="Images/cut.gif" width="23" height="22" accessKey="x" tabindex="1"></DIV> .. .. </DIV>

You can also change the image used for a toolbar button by modifying the icon name that is used within the <DIV> tags. For example, to change the Change Edit Mode (WYSIWYG/HTML) icon from ChangeMode.gif to EditMode.gif, the code would look like the following:

<DIV class="WebWordButton" id="BUTTON_MODE" title="Change Edit Mode (WYSIWYG/HTML)" ><INPUT TYPE="image" onclick="SwitchMode()" class="WebWordIcon" src="Images/ChangeMode.gif" width="23" height="22" accessKey="0" tabindex="13"></DIV> to <DIV class="WebWordButton" id="BUTTON_MODE" title="Change Edit Mode (WYSIWYG/HTML)" ><INPUT TYPE="image" onclick="SwitchMode()" class="WebWordIcon" src="Images/EditMode.gif" width="23" height="22" accessKey="0" tabindex="13"></DIV>

Note: After modifying the RTE files, WebCache on the Portal middle-tier must be restarted to reflect the changes. In addition, the browser file cache must be cleared.

8

LANGUAGE SUPPORT

In OracleAS Portal 10.1.4, the RTE is available in many languages. By default the RTE is configured to display all messages in English. By modifying the file buildUIHTML.html, you can change the RTE message language. The buildUIHTML.html file is located on the OracleAS Portal middle tier at: <MIDTIER_HOME>/portal/images/webword/

To change the language, the following line must be modified:

<SCRIPT LANGUAGE="Javascript" SRC="browserCheck.js"></SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="WebWordMenu.js"></SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="popup.js"></SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="resource/translation/WebwordMessages_en.js"></SCRIPT>

The English message file WebwordMessages_en.js must be replaced by the desired language file WebwordMessages_<language>.js.

All available translations are located under: <MIDTIER_HOME>/portal/images/webword/resource/translation

Here is a table of the available languages:

Language File

Arabic WebwordMessages_ar.js

Czech WebwordMessages_cs_en.js

Danish WebwordMessages_da_en.js

German WebwordMessages_de.js

Greek WebwordMessages_el.js

English WebwordMessages_en.js

Spanish (Spain) WebwordMessages_es_ES_en.js

Spanish WebwordMessages_es.js

Finnish WebwordMessages_fi.js

French (Canada) WebwordMessages_fr_CA.js

French WebwordMessages_fr.js

Hungarian WebwordMessages_hu.js

Italian WebwordMessages_it.js

Hebrew WebwordMessages_iw_en.js

Japanese WebwordMessages_ja.js

Korean WebwordMessages_ko.js

Dutch WebwordMessages_nl.js

Norwegian WebwordMessages_no.js

9

Polish WebwordMessages_pl.js

Portuguese (Brazil) WebwordMessages_pt_BR.js

Portuguese WebwordMessages_pt.js

Romanian WebwordMessages_ro.js

Russian WebwordMessages_ru.js

Slovak WebwordMessages_sk.js

Swedish WebwordMessages_sv.js

Thai WebwordMessages_th.js

Turkish WebwordMessages_tr.js

Chinese (Cantonese) WebwordMessages_zh_CN.js

Chinese (Traditional) WebwordMessages_zh_TW.js

Table 2 – Language File Mapping

CUSTOMIZING TOOLBAR POPUP WINDOWS

The RTE is shipped with a set of pop-up dialogs that are launched when a toolbar button is clicked. You can tailor these dialogs to implement a specific look and feel. Table 3 lists the dialogs that can be edited or replaced. All the dialogs are called from the BuildUIHTML.html file, which is available under: <MIDTIER_HOME>/portal/images/webword/ The dialogs are rendered by calling JavaScript functions that are implemented in the JavaScript Library popup.js, which is available under: <MIDTIER_HOME>/portal/images/webword/ Here an example on how the Insert Hyperlink dialog is called:

<DIV class="WebWordButton" id="BUTTON_LINK" title="Insert Hyperlink"><INPUT TYPE="image" onClick="InsertLink()" class="WebWordIcon" src="Images/link.gif" width="23" height="22" accessKey="k" tabindex="14"></DIV>

The called JavaScript function is implemented in popup.js:

function InsertLink() { if(Mode == 1) { if (is.b == "ie") { //format("createLink"); argArr = new Array(); argArr[1] = getSelectedNodeIE(); arr = InsertLinkHelper(); if (arr) setLink(arr.PageHyperlink); } else { InsertLinkHelper();

10

} } else { alert (Msg.Non_supported_mode) } }

If you want to change the list of available hyperlink types, you can edit the array of strings that is built up on the helper function InsertLinkHelper(). All of these functions are available in popup.js:

function InsertLinkHelper() { … var optArr = { "file://" : "file:", "ftp://" : "ftp:", "gopher://": "gopher:", "http://" : "http:", "https://" : "https:", "mailto:" : "mailto:", "news:" : "news:", "telnet:" : "telnet:", "wais:" : "wais:" } … }

Table 3 shows the list of functions called to render the popup dialogs:

Editor Popup Dialog JavaScript Function

Text Foreground Color ForeColor()

Text Background Color BackColor()

Insert Hyperlink InsertLink()

Insert Image InsertImage()

Insert Table InsertTable()

Cell Properties CellProperty()

Find and Replace FindAndReplace()

Table 3 – Popup Dialog – JavaScript Function Mapping

INTEGRATING THIRD-PARTY RICH TEXT EDITORS

It is simple to integrate a third-party RTE and replace the RTE shipped with OracleAS Portal 10.1.4. This section explains in detail how to do this.

Calling the Third-Party RTE When a text item is added or edited, the RTE is called by opening BuildUIHTML.html, which is available under: <MIDTIER_HOME>/portal/images/webword/

11

When integrating a third-party RTE, this editor must be started by calling BuildUIHTML.html. This means that the third-party RTE must be accessible via this filename. In OracleAS Portal 10.1.4, the call to BuildUIHTML.html to start the RTE is hard-coded into the product.

Note: After modifying the RTE files, WebCache on the Portal middle-tier must be restarted to reflect the changes. In addition, the browser file cache must be cleared.

Saving Back the Content Created in the Third-Party RTE The first step was to call the new RTE. This section explains how to save the content created in the new editor back to the text item in OracleAS Portal. To do this, your BuildUIHTML.html file must implement a JavaScript function called SaveSage(). Again, this function cannot be changed and is called by OracleAS Portal when clicking the Finish or Apply button in the text item edit mode.

This JavaScript function must contain the following line of code:

parent.parent.document.addedit.p_text.value = <HTML content created by the 3rd Party RTE>;

The below code for example would save Hello World as the text property of the text item.

parent.parent.document.addedit.p_text.value = "Hello World";

Note that p_text is hardcoded and always refers to the Text property of a text item. Its value is saved once you click OK, Apply or Finish when editing or creating a new text item.

Example of a Simple Third-Party Text Editor Integration

Sample BuildUIHTML.html:

<html> <body><h1> My RTE </h1> <form name="form1" method="post" action=""> <p> <textarea name="textfield"></textarea> </p></form> <SCRIPT LANGUAGE="JavaScript"> <!-- function SaveSage() { var field = document.forms[0].textfield; parent.parent.document.addedit.p_text.value = field.value; } //--> </SCRIPT> </body> </html>

The result of the above sample RTE is shown in Figure 7, below. The text that you enter in the generated text area is saved in the Text Item Attribute once you click Finish, OK, or Apply.

12

Figure 8 – Third-Party Rich Text Editor Sample

RESTRICTIONS Content can be entered up to a maximum of 4000 bytes.

SUMMARY The OracleAS Portal 10.1.4 RTE provides an improved text item editing experience, including table and JavaScript editing. By modifying the editor’s HTML files, you can customize the editor in many respects, such as allowing image selection or even replacing the RTE itself with a third-party product.

13

APPENDIX A

EXAMPLE HOW TO INTEGRATE THE OPEN SOURCE FCKEDITOR This example shows an example of how to integrate the Open Source HTML Text Editor FCKeditor into Oracle Portal and replace the default Rich Text Editor. FCKeditor is available from http://www.fckeditor.net/.

Figure 1 - FCKeditor integrated into Portal

FCKeditor Installation Directory The FCKEditor code needs to be installed to:

PORTAL_MIDTIER_101202_Home/portal/images/FCKeditor

Replace the existing buildUIHTML.html In order to enable FCKeditor after it has been installed on the Portal mid-tier machine in the above directory, the content of the file buildUIHTML.html that can be found under <MIDTIER_HOME>/portal/images/webword/ needs to be replaced by the following HTML code:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FCKeditor - Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex, nofollow" /> <link href="../FCKeditor/_samples/sample.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../FCKeditor/fckeditor.js"></script>

14

</head> <body> <form name="form1" action="" method="post"> <script type="text/javascript"> <!-- var sBasePath = '../FCKeditor/'; var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.BasePath = sBasePath ; oFCKeditor.Height = 300 ; oFCKeditor.Config['FullPage'] = true ; oFCKeditor.Value = parent.parent.document.addedit.p_text.value; oFCKeditor.Create() ; function SaveSage() { var field = FCKeditorAPI.GetInstance('FCKeditor1') ; parent.parent.document.addedit.p_text.value = field.GetXHTML( true ) ; } //--> </script> </form> </body> </html>

Support of the FCKeditor in Portal This Appendix is for informational purposes only. The FCKeditor is not licensed by Oracle nor is it supported by Oracle. All questions with regards to usage, functionality or issues with the FCKeditor have to be forwarded to http://www.fckeditor.net/.

15

OracleAS Portal 10.1.4 - Enhanced Rich Text Editor July 2006 Author: Christian Hauser Oracle Corporation World Headquarters 500 Oracle Parkway Redwood Shores, CA 94065 U.S.A. Worldwide Inquiries: Phone: +1.650.506.7000 Fax: +1.650.506.7200 www.oracle.com Copyright © 2005, Oracle. All rights reserved. This document is provided for information purposes only and the contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. We specifically disclaim any liability with respect to this document and no contractual obligations are formed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners.