Inserting Custom HTML in Edit Live Widget - Content Workspaces

Hi,
I have custom buttons on Edit Live Widget , when i click on a button it will insert some HTML to the body of the widget.
This is working as expected in /AppConsole, but its not working in /content(Content workspaces)
we are using following Javascript code to insert the HTML
editLiveObj.InsertHTMLAtCursor(escape("<div class=\"imagecaption align"+alignType+"\"><img src=\"\" alt=\"Image goes here\" />Byline here</div>"));
where editLiveObj is JS variable defined in widget render XSLT.
    var editLiveObj=editlive_<xsl:value-of select="$n"/>;
    editLiveObj.InsertHTMLAtCursor();
This editLiveObj is available in /AppConsole as the widget render from XSLT.
Where as editLiveObj is not available in Contetn Work Spaces(/content)

How we can define or get the similar object (editLiveObj) in Content Workspaces?
How we can do this Content Work spaces?

Thanks,
Gangi.

Find more posts tagged with

Comments

Mario_DAnna

I have a working sample for it available in appsvcs-extensions-81. Is there any opentext consultant that may provide you the latest bits ?

-m

From: eLink Entry: Discussion Group - Web Experience Management [v7webcontentmanagement@elinkkc.opentext.com]
Sent: Tuesday, May 31, 2011 6:26 PM
To: eLink Recipient
Subject: Inserting Custom HTML in Edit Live Widget - Content Workspaces

Inserting Custom HTML in Edit Live Widget - Content Workspaces

Posted by gangireddyn@virtusa.com (Nandyala, GangiReddy) On 2011/05/31 12:20

Hi,
I have custom buttons on Edit Live Widget , when i click on a button it will insert some HTML to the body of the widget.
This is working as expected in /AppConsole, but its not working in /content(Content workspaces)
we are using following Javascript code to insert the HTML
editLiveObj.InsertHTMLAtCursor(escape("<div class=\"imagecaption align"+alignType+"\"><img src=\"\" alt=\"Image goes here\" />Byline here</div>"));
where editLiveObj is JS variable defined in widget render XSLT.
    var editLiveObj=editlive_<xsl:value-of select="$n"/>;
    editLiveObj.InsertHTMLAtCursor();
This editLiveObj is available in /AppConsole as the widget render from XSLT.
Where as editLiveObj is not available in Contetn Work Spaces(/content)

How we can define or get the simila! r object (editLiveObj) in Content Workspaces?
How we can do this Content Work spaces?

Thanks,
Gangi.

[To post a comment, use the normal reply function]
Forum:	Discussion Group - Web Experience Management
Livelink Server:	knowledge-wlweb01

GangiReddy_Nandyala

HI Mario,

I don’t know any Open Text Consultant.

Could you provide me the latest bits?

Thanks,

Gangi.

Virtusa was recently ranked and featured in 2010 Deloitte Technology Fast 500, 2010 Global Services 100, IAOP's 2010 Global Outsourcing 100 sub-list and 2010 FinTech 100 among others.--------------------------------------------------------------------------------------------This message, including any attachments, contains confidential information intended for a specific individual and purpose, and is intended for the addressee only. Any unauthorized disclosure, use, dissemination, copying, or distribution of this message or any of its attachments or the information contained in this e-mail, or the taking of any action based on it, is strictly prohibited. If you are not the intended recipient, please notify the sender immediately by return e-mail and delete this message.--------------------------------------------------------------------------------------------

Mario_DAnna

My friend, I have taken care to have the new version of appsvcs-extensions-81 (containing the sample code for your needs) uploaded.

Please get from here

https://knowledge.opentext.com/knowledge/llisapi.dll?func=ll&objaction=overview&objid=18798190

A little explanation follows. Let me know if you are ok with it

ciao

Mario

I've included in the appsvcs-extensions-81 a prototype that can be used as a starting point if you ever want to add a custom button to the ELJ toolbar in 8.1

What this prototype does is the following

1. It defines a button called "customButton" in the ELJ toolbar
2. You select some text in the ELJ applet and press the button
3. A popup shows up, containing a text field where you enter some text
4. You submit the popup and the text replaces the current selection in ELJ

This works, obviously, in both classic and ACE.

So, this is what I modified in the appsvcs-extensions-81 to enable this button

1. First thing, of course, is to build a custom xml config file for ELJ containing the button definition. This xml file is placed in /vgn-extra/common/xml/vign-elj-config-vcmlinks.xml and the button defined in there is something like

....
                        <customToolbarButton
                                name="customCommand"
                                text="Sample Custom Command"
                                imageURL="/vgn-wcm-up/common/images/wcmtags/link_edit.gif"
                                action="raiseEvent"
                                value="customCommand"/>
                        <toolbarSeparator/>
.....

2. Some of you certainly remind that in ephox-inlink 8.0.1 there exists a VgnExtLinks resource where you must specify the name of the custom commands. Unfortunately, in 8.1, I forgot to implement this mechanism and therefore I have implemented a class, called com.vignette.vps.widget.wcmeditlive.ConfigUtils where you specify the command. You don't have to modify anything in this class, just append the command to the list:

---------------------------- ConfigUtils -----------------------------------

.......
/**
* This class is a copy/paste of the WCMEditLiveUtils where we have added the custom command in the DEFAULT_ELJ_CUSTOM_COMMANDS list
*/
public class ConfigUtils {
        private static ContextLogger log = LoggingManager.getContextLogger(ConfigUtils.class.getName());

        private static List<String> DEFAULT_ELJ_CUSTOM_COMMANDS = new ArrayList<String>(7);

        static {
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_EDIT_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_PAGE_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_CHANNEL_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_CONTENT_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_FILE_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_BOOKMARK_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_URL_LINK);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_EDIT_MEDIA);
                DEFAULT_ELJ_CUSTOM_COMMANDS.add(WCMEditLiveConstants.ELJ_COMMAND_SELECT_MEDIA);
                //add all custom commands here
                DEFAULT_ELJ_CUSTOM_COMMANDS.add("customCommand");
        }

......
}

3. I have created the sample popup form. This is a trivial HTML page /vgn-extra/secure/widgets/wcmeditlive/popup.htm

----------------------------------- popup.htm --------------------------------

<html>
<head>
    <script type="text/javascript">
        function postToParent(){
            if(window.opener && typeof(window.opener.pasteHTML) == 'function'){
                window.opener.pasteHTML(document.getElementById('textField').value);
            } else {
                alert("An unexpected error has occurred.");
            }
            self.close();
        }
    </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
</head>
<body>
<h1>Paste Text into ELJ Applet</h1>
<table>
<tbody>
<tr>
<td valign="top">
    <input id="textField" type="text">
</td>
<td><input type="button" onclick="postToParent()" value="Paste"> </td>
</tr>
</tbody>
</table>
</body>
</html>
----------------------------------------------------------------------------------------

as you can see this is a trivial sample that is meant to be modified in the real world. What happens here is that the content of the edit field is passed as an argument to the pasteHTML function defined in the opener. This function takes care of replacing the current selection in ELJ with whatever you pass to it so there is no reason to modify it.

4. I have built a custom xsl for the EditLiveJava CCE widget which is meant to be used whenever you set the ELJ config file to the one I am providing here. The xsl contains the definition of the java script function which is called when
you press the customButton. The xsl also contains the definition of the pasteHTML function for classic. In the classic scenario, then, once you have these four assets you are done.

But obviously if you have read this email so far you don't care about classic, you want to know how to enable this in ACE. So you need a few more things

5. You need to override the EditLiveJava CCE widget template jsp. This is available as /vcm-ui-extra/common/widgets/customeditlive.jsp
This jsp is a copy + paste of editlive.jsp where I have aded all the necessary stuff to manage the custom button. It will be very long to explain all the changes. If you are interested what I suggest to do is to compare the two jsp and observe the differences

6. To better debug the code I have isolated a few javascript functions inside the file /vcm-ui-extra/script/ui/editor/widget/customeditlive.js

7. I have modified the vcm-ui-extra-thems.xml and vcm-ui-extra-globals.xml to define the import of the customeditlive.js and for the customeditlive.jsp override. I have declared that the override will only take place in the content type copy-of-sample.

So, to see all this in action:

1. build the appsvcs-extensions-81
2. use configpextra.txt to deploy the "extra" assets to vcm (if you are not interested to other things of the package)
3. clone the Story content type (accepting the default xml name copy-of-story for the clone)
4. in the clone edit the EditLiveJava CCE and declare the xml config file and the xsl override

From: eLink Entry: Discussion Group - Web Experience Management [v7webcontentmanagement@elinkkc.opentext.com]
Sent: Tuesday, May 31, 2011 7:26 PM
To: eLink Recipient
Subject: RE RE Inserting Custom HTML in Edit Live Widget - Content Workspaces

RE RE Inserting Custom HTML in Edit Live Widget - Content Workspaces

Posted by gangireddyn@virtusa.com (Nandyala, GangiReddy) On 2011/05/31 13:26

HI Mario,I don?t know any Open Text Consultant.Could you provide me the latest bits? Thanks,Gangi.

[To post a comment, use the normal reply function]
Topic:	Inserting Custom HTML in Edit Live Widget - Content Workspaces
Forum:	Discussion Group - Web Experience Management
Livelink Server:	knowledge-wlweb01

GangiReddy_Nandyala

Thanks Mario,

This works for me.

Gangi.