VFE href alt/title attribute

I'm sure I saw something about this in the forums before, but I can't seem to find it now, so I figured I'd post and either get a link to the existing thread or a direct response in return (hopefully).

TS 6.1SP1 Solaris

From Ektron Support:

As for alt tags for hyperlinks we do not support this functionality built in to the product. However you can create your own custom buttons that add additional functionality to the product the actual HTML for adding an alt tag to a hyperlink is -- title="some text" --I find it difficult to believe that mine is the only customer who's found a need for supplying alt / title information for hyperlinks in VFE for 508 compliance - so I'm hoping someone can either supply already existing code for this, or lead me [most of the way?] towards how to do this.

Essentially, I figure I will need to remove their OOTB link buttons (trivial) and insert my own custom function (probably using the same icons they do) -- as I've yet to do any significant customizations of the VFE (to this extent anyway) and I'm not looking to make it a full-time practice, I'm hoping someone can just say "here - use this" If not - any other assistance will be welcome (yes, I am looking at the VF Developer's Guide, but it's not exactly making complete sense to me how to do what I want).

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Find more posts tagged with

Comments

Migrateduser

fish,

For better or for worse, whenever I want to customize something in the VFE, I rely on their product as little as possible; I write custom functions for basically anything I want to do.

I agree with you in that Ektron should inherently provide 508 compliance and Interwoven should require partners, like Ektron, to provide 508 compliance (did you notice how I stuck in that two layers of accountability thing?), but I think they still have quite a ways to go.

I've done work for the Federal Gov't at various times and, of course, they require 508 compliance -- what I've done in those cases was exactly what I mentioned above: make it myself. That way, I'm the only one to blame when something goes wrong!

Hope that helps,

Dave

Adam Stoller

When you say you make it yourself - are you talking about within VFE or that you completely replace VFE with your own home-grown WYSIWYG text editor?

If the former (within VFE) - is there any code for doing this that you could share?

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Migrateduser

Oh, geez, no... if someone has a home-grown WYSIWYG editor that they use with TS, I'd love to see it! I customize the stuff within the VFE's config and js files.

Before I write or paste some code, let me understand your requirements more. I'm thinking you'd want a pop-up window to insert the link? Please elaborate.

Dave

Adam Stoller

Well - I see two possibilities (at least):

1) Some way to augment their existing interface for hyperlinks and have *it* prompt or somehow launch a prompt for the alt/title text.

2) (more likely) a replacement for their existing hyperlink interface, that would pop up a form (probably looking a lot like theirs) which would contain a field for including the alt/title text - this would be triggered by both a button in the toolbar (in place of theirs) and the right-click menus (in place of theirs)

In either case - I need to not only prompt for the information, but I need to make sure that it includes it when it inserts the actual HTML code into the window.

Frankly - anything that will prompt for link name, title, url, and target would probably suffice (again, as long as it also inserts the correct code into the window) - I can play around with making it look "pretty" if need be - but that's definitely lower on the list of priorities.

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Migrateduser

Hey, I start by making it pretty!

I'm going to try for number 2.

Make a copy of visualformatconfig.xml that you'll edit and use only for this purpose. In your datacapture.cfg, point to this new file via the <textarea> tag:


external-editor-config="[filename here]"

In your new copy of visualformatconfig.xml, include something like the following:



   <command name="jscustomlink">
    <caption>Create 508 Link</caption>
    <description>Create Hyperlink</description>
    <tooltiptext localeRed="jscustomlink"/>
   </command>

At this point, you're halfway there.

In $iwhome/httpd/iw/ewebeditpro20/ewebeditpro20.js, add the following:



eWebEditProExecCommandHandlers["jscustomlink"] = function(sEditorName, strCmdName, strTextData, lData)
{
 eWebEditPro.openDialog(sEditorName, eWebEditPro.resolvePath("customlink.html"), "", "customLink", "width=250,height=120");
}

Your new file, customlink.html, needs to be in the same directory as the .js file you just edited.

Create a new file with the pretty form in it. The remaining piece is that you'll have to associate your submit button with a JS function, <input type="button" value="insert" onClick="insertLink" ... >, etc. The following JS function is a simplified version of what you want to do (i.e. just inserts the link, no alt tag), but you get the idea...



    function insertLink()
    {
      var objInstance = eWebEditProUtil.getOpenerInstance();
      var theEditor = objInstance.editor;
      if ( document.form.variable.value != "" )
      {
        html = "<a href=\"";
        html += document.form.variable.value + "\">";
        var selectedHTML = theEditor.getSelectedHTML();
        theEditor.pasteHTML(html);
        window.close();
      }
    }

Dave

Current Environment(s):
(1) TS 6.1 SP1 on W2K3
(2) TS 6.1 SP1 on W2K

Adam Stoller

I'm getting ready to give this a try (thanks).

Couple of questions though:

1) As I intend this customization to be for ALL instances of the VFE - is there any reason why I need to use a different config.xml file than the one I'm already using?

2) You mention ewebeditpro20.js - I don't have that file - I have a bunch of *other* files that begin with "ewebeditpro" and end in ".js" though - perhaps you meant just "ewebeditpro.js" (with no '20')?

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Migrateduser

1. If you're using this for ALL VFE installations, then yes. Edit the original config.xml file. This way, you won't have to touch any of your DCT's, also.

2. I'm not sure when IW implemented version 2 of the VFE, but, so I'm clear, what directory do you have with the name like httpd/iw-bin/ewebeditpro* -- also, what .js files do you have underneath that directory?

Dave

Current Environment(s):
(1) TS 6.1 SP1 on W2K3
(2) TS 6.1 SP1 on W2K

Adam Stoller

looking at the VFE documentation - I think it makes sense to copy/modify customevents.js - which is already (I believe) in the stack of included JS files via ewebeditpro.js.

Hopefully, between what you posted and the developers guide I'll be able to piece it together.

Thanks.

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Adam Stoller

Well I'm making no progress fast - either I'm being dense or the Ektron documentation needs more work.

I've managed to get my own icon in the toolbar and customize the tooltip associated with it - but it does nothing when I click on it.

I tried editing customevents.js, I even added another entry to the ewebeditpro.js's array of included js files just in case there was a 1-off logic problem and it wasn't actually reading in the last one (customevents.js) - no joy.

I'm sure there's something simple/stupid that I'm overlooking - like assuming some text is intended to be there literally when it's really supposed to be replaced with my own custom text - but it's still eluding me.

For What it's worth - here's what I've done so far:

I copied hyperlinkpopup.htm and called it href508.html - I made a few edits to it - but nothing substantial and as I don't even get an error page, I don't think I've gotten as far as this file yet.

I modified config.xml (this is the file being used by the VFE) . Near the top I inserted: ...
<button command="jshyperlink"/>
<button command="jshref508"/>
<button command="cmdhyperlink"/>
...then, lower down: ...
<command name="jshyperlink" enabled="true">
<image src="[eWebEditProPath]/btnhy.gif"/>
<caption localeRef="cmdNewHyp"/>
<tooltiptext localeRef="cmdNewHyp"/>
</command>
<command name="jshref508" enabled="true">
<image src="[eWebEditProPath]/btnhy.gif"/>
<caption>508 links</caption>
<tooltiptext>Create 508 compliant links</tooltiptext>
</command>
...

In my custom copy of customevents.js I added the following:...
eWebEditProExecCommandHandlers["jshref508"] = function(sEditorName,
strCmdName,
strTextData,
lData)
{
alert("hello"); // added this when nothing was happening - still nothing happening
eWebEditPro.openDialog(sEditorName,
eWebEditPro.resolvePath("href508.html"),
"",
"jshref508",
"width=250,height=120");
return true;
}
...

I can click on the button all I want - but nothing ever seems to happen. Help?

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Migrateduser

I'm wondering about your syntax...


...
<caption>508 links</caption>
<tooltiptext>Create 508 compliant links</tooltiptext>
...

Is that documented? I'm wondering if it's barfing on the XML and bugging out. Try this instead:


<caption localteRef="508 links"/>
<tooltiptext localeRef="Create 508 compliant links"/>

That syntax agrees with the rest of the config file, but I'm not sure offhand what the documentation says about it. Considering your alert isn't even popping up, it must be something before that anyway.

Dave

Current Environment(s):
(1) TS 6.1 SP1 on W2K3
(2) TS 6.1 SP1 on W2K

Adam Stoller

Welll.... the tooltiptext shows up when I hover the mouse over the button - so I don't think that's it - plus, as I'm not using locale-specific strings - the use of localeRef would be questionable at best (i.e. I'm not accessing something defined in the various localeXXXX.xml files)

So - I think the problem is elsewhere....

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Migrateduser

This is a real shot in the dark but I wonder if it has a problem with the fact that your javascript function ends in a number? Am I wacky? I've customized the VFE a ton of times and nothing immediately jumps out at me, but could that be it?

Dave

Current Environment(s):
(1) TS 6.1 SP1 on W2K3
(2) TS 6.1 SP1 on W2K

Migrateduser

My shot in the dark was just that about the function name. Naming it jshref508 is just fine.

You said you had also tried to include it in your ewebeditpro.js file. How did that work out? I also have a customevents.js file, but I can't determine where that's called from (or if it's even called at all). What version are you running?

Dave

Current Environment(s):
(1) TS 6.1 SP1 on W2K3
(2) TS 6.1 SP1 on W2K

JonathonG

Well, according to this thread, you should be adding the handler function stuff to the ewebeditproevents.js

The originator of the thread is a co-worker of mine, and adding stuff to ewebeditproevents.js worked like a charm for her.

Jonathon
Interwoven Developer
Allstate, Inc.

Adam Stoller

Hmm - I may try that on Tuesday when I'm back on site - thanks.

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Adam Stoller

I'm finally making some progress here - but still a bit confused. Here's my current setup:
config.xml<?xml version="1.0" encoding="iso-8859-1"?>
<config product="eWebEditPro">
<interface name="iw3" allowCustomize="false">
<menu name="editbar" newRow="false" showButtonsCaptions="false" wrap="false">
<caption localeRef="mnuEdit" />
...
<bar />
<button command="cmdbookmark" />
<button command="jshyperlink" />
<button command="jshref508" />
<button command="cmdhyperlink" />
<button command="cmdunlink" />
<bar /> ...
</menu>
...
</interface>
<features>
<external>
...
<command name="jshyperlink" enabled="true">
<image src="[eWebEditProPath]/btnhy.gif" />
<caption localeRef="cmdNewHyp" />
<tooltiptext localeRef="cmdNewHyp" />
</command>
<command name="jshref508" enabled="true">
<image src="[eWebEditProPath]/tmp.gif" />
<caption>Create 508-complaint Link</caption>
<tooltiptext>Create 508 compliant links</tooltiptext>
</command>
...
</external>
...
</features>
</config>ewebeditproevents.js...
eWebEditProExecCommandHandlers["jshyperlink"] = function(sEditorName, strCmdName,
strTextData, lData)
{
eWebEditPro.openDialog(sEditorName, eWebEditPro.resolvePath("hyperlinkpopup.htm"),
"", "HyperlinkList", "width=500,height=200");
}

eWebEditProExecCommandHandlers["jshref508"] = function(sEditorName, strCmdName,
strTextData, lData)
{
eWebEditPro.openDialog(sEditorName, eWebEditPro.resolvePath("href508.htm"), "",
"HyperlinkList", "width=250,height=120");
}
...ewebeditproeventsiw.js...
// Called from onExecCommandDeferred in ewebeditproevents.js
function eWebEditProExecCommand(sEditorName, strCmdName, strTextData, lData)
{
if ("jshyperlink" == strCmdName)
{
//Custom Hyperlink popup
InsertHyperlink(sEditorName);
}
else if ("jshref508" == strCmdName)
{
InsertHyperlink(sEditorName);
}
else if ("cmdspellcheck" == strCmdName)
{
forAllInstances(sEditorName, strCmdName, strTextData, lData);
}
else if ("cmdfind" == strCmdName)
{
forAllInstances(sEditorName, strCmdName, strTextData, lData);
}
}
...I copied hyperlinkpopup.htm to href508.htm - but for some reason - the form that gets displayed when I click on my custom button looks like the form one gets when they click on the cmdhyperlink button and not like the form that one gets if they click on the jshyperlink button.

While I can probabaly (hopefully) customize this copy of hyperlinkpop.htm to look like what I want - I'd rather have the other form, since it already comes fully equipped with a browse button and doesn't have all the other fields that I don't need/want.

Anyone know where the actual html file is that's used by jshyperlink ??

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Adam Stoller

I'm going to be posting this in a couple of places because I ended up with several issues here that are all now [seemingly] resolved.

I still don't understand how jshyperlink references hyperlinkpopup.htm in the config files but uses some other HTML form - but I finally managed to get all the javascript to work in my own href508.htm file (more details on that in the other thread) - and figured I'd post the finished HTML file here for anyone else who wants/needs to provide for 508-complaint hrefs in VFE.

Enjoy!

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Adam Stoller

Arrgh - typo in attachment - as I don't see anyway to edit the attachment, here's the new one (I spelled "input" as "inptu" twice :-)

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com

Narelle

Thanks --fish

I have now used your solution for inserting hyperlinks as I require the title attribute in the a tag.

I have an issue with your code though - where is the validation for the target performed?

Using the form, you are required to select a target option, otherwise the form does not disappear.

We are currently using HTMLClean to remove the target="_self" option from generated pages.

Thanks again.

Narelle

Edited by Narelle on 10/27/04 08:56 PM (server time).

Adam Stoller

I did not include any code to validate the target [URL]. If you do so, please share it.
I thought I had made target="_blank" the default for the target selection and, in our case, limited it to just two choices. If this doesn't work for you, feel free to adjust the code as desired - you could probably make '' the default and make sure that the code doesn't treat that field as being required.

--fish
Senior Consultant, Quotient Inc.
http://www.quotient-inc.com