Implementing TinyMCE JavaScript HTML Editor for Web Page Composer (WPC) within the SAP Portal

(1)

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

Implementing TinyMCE JavaScript

HTML Editor for Web Page

Composer (WPC) within the SAP

Portal

Applies to:

SAP Netweaver Portal 7.0 SP 18, Knowledge Management (KM), Moxiecode TinyMCE. For more information, visit the Portal and Collaboration homepage.

Summary

The scope of this article is to show how to use the Moxiecode TinyMCE Editor to Edit your Web Page Composer (WPC) articles, and paragraphs inside the SAP NetWeaver Portal. The TinyMCE Editor will replace the standard HTML Editor that comes with Web Page composer.

This paper can be used in conjunction with Boris Magocsi's Article 'Using the TinyMCE JavaScript Content Editor in Web Page Composer' (Link). One key enhancement explained in this article is the KM Browse function. This is needed when you're inserting a Hyperlink, or inserting any images from KM content. We found this feature absolutely necessary in order to be able to use the new Editor. Code samples and configuration instructions are provided in body of this article.

Author: Harman Shahi

Created on: 1 January 2010

Author Bio

Harman Shahi is a SAP Development Consultant. His expertise includes working on enterprise-level projects based on SAP Enterprise Portals, NetWeaver, Web DynPro, Java\J2EE, Adobe Forms, RFCs, Web Page Composer (WPC), Visual Composer, SAP ESS\MSS, and SAP CRM. [email protected]

(2)

Implementing TinyMCE JavaScript Content Editor in Web Page Composer (WPC)

The scope of this document is to show how to use the TinyMCE Editor as default editor for Web Page Composer within the SAP Enterprise Portal. Web Page Composer gives us option to use external editors (i.e. TinyMCE) instead of the default WPC.

In Order to achieve this we will follow these steps: 1. Download the PAR file.

2. In order to implement the Knowledge Management (KM) navigation (very useful), you will have to make a very minor change in the PAR file before deploying.

3. Deploy PAR file to the SAP Portal Environment. 4. Update XML files to activate the TinyMCE Editor. 5. Test.

End State of this process: the image below shows the OLD and New Editor side by side. As you can see that the TinyMCE Editor contains a lot more editing options:

Prerequisites

 You must have Content Admin and System Admin role in the SAP NetWeaver Portal.  You should also have a BASIS resource on standby, and this process may need a restart.  You have the Web Page Composer installed on the SAP NetWeaver portal.

 You should have working knowledge of NetWeaver Developer Studio, JavaScript, and SAP Portal.

Portal Archive File (PAR) File

Please start following the steps from here: Download PAR File

Code Sample for WPC + TinyMCE Integration

http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/606d1714-abd1-2a10-a48f-ac3ee926460d Note: The following reading is recommended and is also useful before downloading and modifying the PAR file: Using the TinyMCE JavaScript Content Editor in Web Page Composer

(4)

Updating PAR File

Update the PAR file so you can make use of the KM Navigation functionality. I recommend everyone to do this as this became absolutely necessary in our implementation.

Change Needed:

You will have to change the domain name in 2 JavaScript Files. Change the domain name to your own portal‟s domain name. (I.e. if your WPC website will be accessed with URL „intranet.test.com‟, then enter „test.com‟ as the domain name)

Change the following 2 files within the downloaded PAR file (You can use WinZip open the PAR file, and Edit these files):

1. com.sap.nwrig.example.wpc_editor_api\dist\scripts\tiny_mce\Tiny_mce_popup.js

2. com.sap.nwrig.example.wpc_editor_api\dist\scripts\tiny_mce\utils\Idemodification.js

After these 2 JavaScript files have been updated with your domain name, you have to recreate the PAR file. Since we only updated JavaScript File, you can just use WinZip for this step. Please make sure the name of the PAR file is exactly same as the original.

Note: Ideally you should create a NWDS project from the downloaded par file, and make the above changes. But since we only update JavaScript Files, you can use WinZip to unzip the PAR file, make your changes, Zip it back up, and rename .zip to .par.

Deploying PAR File

 Login to the Portal as System Admin

 Browse to System Admin > Support > Portal Runtime > Administration Console  Browse to the PAR file, and click Upload.

Note: Please note that if you notice any issues with KM after loading this PAR file, you may need to restart the Portal. This really depends on your Portal version.

(5)

(6)

Activating New Editor

In order to make TinyMCE the default editor, we need to update some XML files. In our case, we will make TinyMCE the default editor for a WPC Paragraph, and WPC Article. You may choose differently...

Locate the following 2 files in KM:

 /etc/wpceditor/types/wpc_simple_item.xml  /etc/wpceditor/types/wpc_article.xml

Note: wpc_simple_item.xml file represents a WPC paragraph. wpc_article.xml file represents a WPC Article.

Make a copy of these 2 files locally. Also store the original files in a secure location.  In the xml file, replace the word “htmledit” with “tinyMCE”.

The box below shows change in Red

FOUND: <elements>

<element id="text" description="xml.xlbl.text" type="htmledit" default="true" singleinstance="true" nodelete="true"/>

</elements> CHANGED TO: <elements>

<element id="text" description="xml.xlbl.text" type="tinyMCE" default="true" singleinstance="true" nodelete="true"/>

</elements>

 Replace XML files in KM with your updated copies.

Note: The XML files that we changed may be overwritten by a patch. So make sure you store the modified XML files at a secondary location for later reference.

Reload Editor Configuration

In order to trigger a re-read and reload of the editor configuration, load the following page in your browser: <your portal url>/irj/servlet/prt/portal/prtroot/com.sap.nw.wpc.designtime.ReloadEditorConfigComponent

(7)

Testing New Editor

Edit any Advanced Paragraph within a WPC Article:

(8)

KM Integration

The following pictures display how to insert a link or a picture from KM: Inserting Image from KM:

Inserting Hyperlink from KM:

Notes about this article

1) Thanks to Boris for the Original Document. The main reason for this article is to enhance the functionality to include KM Navigation functionality that is used to insert images, and links to other KM documents.

2) If you would like to modify the PAR file further, then you need to create a NWDS project from this PAR file, and edit as desired. Please have a look at Boris‟ article for more information.

(9)

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

Implementing TinyMCE JavaScript HTML Editor for Web Page Composer (WPC) within the SAP Portal