You can also customize the Ephox editor by writing our own functionality. This Article will show you how to include the binary resources(File Resource Components directly into EPhox editor with embed tags .)
Steps :
1. Need to upload the required binary files (Videos , Audio & Flash) as File Resouce Components into any library
2. Change the ephox Configuration file ibm_eljconfig.xml.jsp or your own configuration file (InstalledApps\EphoxEditLive.war\res\editlivejava\) to include the "Menu Item"
3. Change the customFunctionality.jsp under InstalledApps\EphoxEditLive.war\jsp\html to include your custom functionality
4. Add any other JSP files based on your requirements.
Details are listed Below
Step 1:
upload the File Resource Components from authoring portlet, New--> File Resource Component --> upload the video , audio or flash file
Step 2:
Add the following Custome Menu Item to ephox configuration file to access from the EPhox Menu bar,
<customMenuItem
name="InsertWCMMultimediaComponent"
text="Insert WCM Library Multimedia Component"
action="raiseEvent"
value="displayWCMLibraryMultimedia"
/>
Place above Element after the <menu name="ephox_insertmenu">, so that it will display in Insert Menu .
Ephox will call displayWCMLibraryMultimedia() javascript method when we click on the "InsertWCMMultimediaComponent" from the Insert menu (raiseEvent is type of ehpox events)
Step 3.
Add the following javascript functions in customFunctionality.jsp under the InstalledApps\EphoxEditLive.war\jsp\html
// Ephox will call displayWCMLibraryMultimedia() javascript method when we click on the //"InsertWCMMultimediaComponent" from the Insert menu (raiseEvent is type of ehpox events)
function displayWCMLibraryMultimedia() {
var remote = null;
//Open a new browser window with the properties defined
remote = window.open("/wps/ephox/jsp/html/insertWCMLibraryMultimedia.jsp",'Insert_WCM_Library_Multimedia_Component','width=' + 1010 + ',height=' + 600 +',status=yes,resizable=yes,scrollbars=yes,location=no,toolbar=no');
}
Note: If you want to invoke another WebApplication with your custom functionality simply place URL in
Window.open
//Following method will retrieve the results back from the popup window and insert the HTML Code into the Ephox editor at cursor location
function insertWCMLibraryMultimediaComponent(cmpntName, type, height, width){
var cmpnt = '<Component name="'+cmpntName+'" />';
var embedHTML="";
if(type=="video"){
embedHTML="<object height='"+height+"' data='"+cmpnt+"' width='"+width+"' type='video/mpeg'><param name='fileName' value='"+cmpnt+"' /><embed filename='"+cmpnt+"' height='"+height+"' type='video/mpeg' data='"+cmpnt+"' width='"+width+"' ></embed></object>";
}else if (type=="audio"){
embedHTML="<object height='"+height+"' data='"+cmpnt+"' width='"+width+"' type='audio/mpeg' ><embed height='"+height+"' type='audio/mpeg' data='"+cmpnt+"' width='"+width+"' ></embed></object>";
}else if(type=="flash"){
embedHTML="<object height='"+height+"' data='"+cmpnt+"' width='"+width+"' type='application/x-shockwave-flash'><param name='movie' value='"+cmpnt+"' /><embed src='"+cmpnt+"' height='"+height+"' type='application/x-shockwave-flash' data='"+cmpnt+"' width='"+width+"' ></embed></object>";
}
eljInstance.InsertHTMLAtCursor(embedHTML);
}
Step 4:
Popup will call the insertWCMLibraryMultimedia.jsp , and this JSP is responsible to make the WCM repository call and retrieve the components of type FileResource component and displays in table with radio buttons. Sample code as follows
<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="java.net.*"%>
<%@page import="java.security.*"%>
<%@ page import="com.ibm.workplace.wcm.api.*"%>
<%@ page import="com.ibm.workplace.wcm.api.exceptions.*"%>
<%@ page import="javax.servlet.jsp.JspWriter"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%
//
String libraryName="Library Names";
%>
<%!
public String printComponentRows(HttpServletRequest request, Workspace work){
try {
StringBuffer buffer = new StringBuffer();
int i = 0;
DocumentIdIterator componentIds = work.findByType(DocumentTypes.LibraryFileComponent);
// iterate through all sites in workspace
while(componentIds.hasNext() & i < 10) {
try {
buffer.append("<tr class='wpsTableNrmRow'><td nowrap='nowrap' style='vertical-align: middle;'>");
DocumentId docId = (DocumentId) componentIds.next();
Document doc = work.getById(docId);
buffer.append("<input type='radio' value='"+doc.getName()+"' name='componentSelect'/></td>\n");
buffer.append("<td nowrap='nowrap' style='vertical-align: middle;'>");
buffer.append(doc.getName());
buffer.append("</td>\n<td nowrap='nowrap' style='vertical-align: middle;'>");
String[] authors = doc.getAuthors();
try {
if (authors != null && authors.length > 0 && authors[0] != null){
buffer.append(authors[0]);
}
} catch (Exception e){
System.err.println("Error getting author: "+e.toString());
e.printStackTrace();
buffer.append("Error getting author: "+e.toString());
}
} catch (Exception e){
System.err.println("Error getting component info: "+e.toString());
e.printStackTrace();
buffer.append("Error getting component info: "+e.toString());
}
buffer.append("</td></tr>");
i++;
}
return buffer.toString();
} catch (Exception e){
System.err.println(e.toString());
e.printStackTrace();
return "Error getting list of library components.\n";
}
}
%>
<html><title>WCM library multimedia components</title>
<head>
<script language="JavaScript">
function insertLink() {
var parentWindow = window.parent;
if(!parentWindow) {
parentWindow=window.top;
}
var isChecked = 0;
var componentName = null;
// Cycle through all radio buttons stored in linkList IFrame document
var radioGrp = document.forms[0].componentSelect;
if (radioGrp != null){
for(var i = 0; i < radioGrp.length; i++) {
if(radioGrp[i].checked) {
isChecked = 1;
componentName = radioGrp[i].value;
}
}
if(isChecked == 0) {
// condition checking if radio button group only has one value
if(radioGrp.length = "undefined") {
// Call the insertHyperlink function of the parentWindow, the parameter is the URL for the content
componentName = radioGrp.value;
isChecked = 1;
}
}
}
if(isChecked == 0) {
alert("No component was selected");
} else {
window.opener.insertWCMLibraryMultimediaComponent('<%=libraryName%>/'+componentName, document.forms[0].mimetype.value, document.forms[0].height.value,document.forms[0].width.value);
//parentWindow.insertWCMLibraryMultimediaComponent('<%=libraryName%>/'+componentName, document.forms[0].mimetype, document.forms[0].height,document.forms[0].width);
}
window.close();
}
</script>
</head>
<body>
<form>
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tbody>
<%
Workspace work = null;
Repository repository = WCM_API.getRepository();
work = repository.getWorkspace("wpsadmin","password");
work.setCurrentDocumentLibrary(work.getDocumentLibrary(libraryName));
out.println(printComponentRows(request, work));
if (repository != null && work != null){
repository.endWorkspace();
}
%>
</tbody>
</table>
<hr />
<table width="50%" cellspacing="0" cellpadding="5" border="0">
<tbody><tr>
<td>MIME TYPE (select) : </td>
<td>
<select name="mimetype">
<option value="video">video</option>
<option value="audio">audio</option>
<option value="flash">flash</option>
</select>
</td>
</tr>
<tr><td>Height: </td><td><input type="text" name="height"></td></tr>
<tr><td>width: </td><td><input type="text" name="width"></td></tr>
</tbody></table>
<div style="float:right;">
<INPUT type="button" name="NextButton" id="NextButton" value="Insert Embed Object" onClick="insertLink()">
</div>
</form>
</body>
</html>
Once you are done with above changes, you need to restart ephox application to get your changes effective. (may be some time you can just delete class files from temp directory will work)
No comments:
Post a Comment