Farcry Insert Link to other dmHTML objects

I want to preface this by saying you probably should not do this. Having contradicted myself, I’d also like to say that this is really cool!

You may have noticed that when editing an HTML page it is possible to right click on any other page in the site tree and use the “insert” function which will insert a link directly into the editor to that page. Pretty handy right? Well there is an issue with this in that the site tree is in a different iFrame than the editor so the position in the WYSIWYG editor is lost and the link gets inserted at the very top of the page no matter what. (I’ve seen this more so in IE7 than anything else). This is annoying and is not very friendly for a lot of clients because they then have to copy and paste that link somewhere else. If there is a lot of formatting in the page, sometimes this can get altered when copying and pasting so I wanted a better solution.

Warning! This required a change to a couple of core files so if you are up to that click through to read more. If not, there is a pretty “X” in the top right of your window. Click it now

These changes were made on an FC3.0.2 install. I have not tested them on anything else.

The first thing you want to do is disable the “insert” function in the right click menu on the site tree. This is built in /farcry_core/tags/navajo/overview.cfm.

In my install it was line 1661 that I found “function menuItemClickable( id, text, onclick, bShowDisabled )”

The function should look something like this:

function menuItemClickable( id, text, onclick, bShowDisabled )
{
return	'<div id="'+id+'Item" class="menuItem" onclick="heldEvent=objectCopy(event);flutter(this,\\''+onclick+'\\');" onMouseOver="fpo(this)" onMouseOut="fpf(this);">'+
		'<table width="100%" class="menuItem" cellspacing="0"><tr><td width=100%><span class="menuText">'+text+'</span></td></table></div>'+
		'<div id="'+id+'_disabled" class="menuItemDisabled">'+
		'<table width=100% class="menuItemDisabled" cellspacing="0"><tr><td width=100%><span class="menuText">'+text+'</span></td></table></div>';
}

Replace the function with this code:

function menuItemClickable( id, text, onclick, bShowDisabled )
{
	if (id == "Insert") {
		//alert(text+"\\n"+id+"\\n"+onclick+"\\n"+bShowDisabled);
		return	'<div id="'+id+'Item" class="menuItemDisabled" /*onclick="heldEvent=objectCopy(event);flutter(this,\\''+onclick+'\\');" onMouseOver="fpo(this)" onMouseOut="fpf(this);"*/>'+
				'<table width="100%" class="menuItemDisabled" cellspacing="0"><tr><td width=100%><span class="menuText">'+text+'</span></td></table></div>'+
				'<div id="'+id+'_disabled" class="menuItemDisabled">'+
				'<table width=100% class="menuItemDisabled" cellspacing="0"><tr><td width=100%><span class="menuText">'+text+'</span></td></table></div>';
	}
	else {
		return	'<div id="'+id+'Item" class="menuItem" onclick="heldEvent=objectCopy(event);flutter(this,\\''+onclick+'\\');" onMouseOver="fpo(this)" onMouseOut="fpf(this);">'+
				'<table width="100%" class="menuItem" cellspacing="0"><tr><td width=100%><span class="menuText">'+text+'</span></td></table></div>'+
				'<div id="'+id+'_disabled" class="menuItemDisabled">'+
				'<table width=100% class="menuItemDisabled" cellspacing="0"><tr><td width=100%><span class="menuText">'+text+'</span></td></table></div>';
	}
}

Basically this is the exact same function but it retuns a disabled version of the “insert” function. The classes involved automatically make sure it won’t show up in the menu.

Now we need to create a better way to insert links. I’m not saying this is necessarily better, but it’s what I came up with for my needs:

I added a new select box in the body.cfm file of the plp process that works the same as the image and file inserts but is pre-populated with all of the dmHTML objects that can be linked to. The core plp body file is at /farcry_core/packages/types/_dmhtml/plpEdit/body.cfm. Note, if you have extended the dmHTML object and have this plp step in your project folder, that is where the change must be made.

Around line 37 in that file, I had this:

<!--- display texteditor (config specified) --->
<widgets:richTextEditor value="#output.body#">

<cfoutput><div class="relateditems-wrap r-i-images"></cfoutput>
<widgets:bodyInsertItem typename="dmImage">
<cfoutput></div></cfoutput>

<cfoutput><div class="relateditems-wrap r-i-files"></cfoutput>
<widgets:bodyInsertItem typename="dmFile">
<cfoutput></div></cfoutput>

This displays the rich text editor and the image and file inserts below it. Below that you will have :

<cfoutput><div class="teaser-wrap"></cfoutput>
	<widgets:teaser>
	<cfoutput></div></cfoutput>

This displays the teaser area. So, between the file insert section and the teaser section, I inserted the following code:

<cfoutput>
<cfquery name="getHTMLPages" datasource="#application.dsn#">
	SELECT	label,objectid
	FROM	dmHTML
	WHERE	status = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="approved">
</cfquery>

<script type="text/javascript" language="JavaScript">
	function getLinkValueInsert()
	{
		objSelect = document.getElementById("links");
		tempStr = objSelect.options[objSelect.selectedIndex].value;
		arVal = tempStr.split("|");
		oID = arVal[0];
		label = arVal[1];
		//alert(tempStr+"\\n"+oID+"\\n"+label);
		if(!oID || !label)
			alert("Please select a valid link to insert.");
		else
			insertHTML('<a href="#application.url.conjurer#?objectid='+oID+'">'+label+'</a>');
		return false;
	}
</script>

<div class="relateditems-wrap" style="margin-left:30px;">
	<h2>Link</h2>
	<select name="links" id="links" size="3">
		<cfloop from="1" to="#getHTMLPages.recordcount#" step="1" index="i">
			<option value="#getHTMLPages.objectid[i]#|#getHTMLPages.label[i]#">#getHTMLPages.label[i]#</option>
		</cfloop>
	</select>
	<input type="button" name="buttonInsertLinkInBody" value="Insert in body" class="f-submit" onclick="return getLinkValueInsert();" />
</div>
</cfoutput>

First, query the dmHTML table for pages in approved status.

Second, create the javascript function that will be used for the insert. This was copied from the /farcry_core/tags/widgets/bodyInsertItem.cfm file and altered very slightly.

Third, display the select box and loop over the query to display all the options inside the select.

Fourth, add a button that calls your javascript function and voila!

Now you are able to insert links to HTML pages without switching iFrames so your position inside the WYSIWYG editor is not lost. It may be a good idea to sort the pages alphabetically by name or date created but this is the bare-bones example to get you started.

Good Luck!