Inline links within a paragraph in ePhox

mfarrow · March 20, 2009, 1:05pm

Hi there

I’ve come across a problem, which I’m sure must have an easy solution, but I just can’t think what it is - probably because it’s Friday afternoon!

Here’s what I want to do:

Create a Link content item in a central links folder (just creates a link to an external page, but allows it to be centrally managed).
Insert the link into a paragraph within an ePhox field so that it appears within the paragraph, not on a new line.

Initially I thought this would be easy - but I was wrong.

Here’s what I tried:

Add the link content type to sys_inline_link. Unfortunately, in order to do this the link content type must have a page template, which doesn’t make sense for this type of content. So that’s no good.
Create a snippet template for the Link content type that doesn’t insert a div tag around the snippet, then use sys_inline_variant to add the link. This didn’t work either as ePhox automatically closes the current paragraph before inserting the inline template.

So, I’m at a bit of a loss. I really want to be able to give users the option to add centrally managed links within paragraphs, but it doesn’t seem to be possible. Am I missing something really obvious?

The only simple - but undesirable - option I could come up with is to create a page template such that every link content item publishes as a PHP redirect to the specified URL and then use sys_inline_link to insert a link to it within ePhox. This would work, but seems like a bit of an overhead.

Cheers
Matt

jitendra · March 21, 2009, 11:30pm

for some reason our snippet template for title link (where pagelink is defined in the bindings) works…not complaining really…:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>#displayfieldEsc("displaytitle")</title>
  </head>
  <body>
<a href="${pagelink}" title="#displayfieldEsc('displaytitle')">#displayfieldEsc("displaytitle")</a>
  </body>
</html>

cara-m · March 23, 2009, 6:16am

This seems to be a common problem with Inline variants/templates and Ephox - we experience it here too and it is very frustrating. It seems such a straightforward task, adding a Link item inline, but Ephox insists on opening a new paragraph immediately after the closing DIV, so the Link item is never truly inline.

As this is a frequently reported problem, can Percussion and Ephox please get their collective heads together to rectify the problem? Hopefully a patch can be developed to fix the issue and we can all add our Link items inline like we did in eWebEditPro.

Andrew_Morrison · March 23, 2009, 6:39am

ROTFLMAO.

I’m sorry, I shouldn’t laugh at such inspiring optimism. But this has been discussed before.

cara-m · March 23, 2009, 8:18am

Yes Andrew, this has been discussed many times before, but no clear resolution has been forthcoming as yet! Maybe this is why the issue keeps appearing on the forum… ?

How often do we have to raise the problem of inline templates not rendering correctly in Ephox before the issue is addressed by both Percussion and Ephox?

It is a real problem for many users, especially those of us who used 5.7 where adding inline Link templates was straightforward. We expected the same functionality as before only to find it is near impossible to add inline Link templates without editing the code or creating new CTs as a workaround.

jitendra · March 23, 2009, 8:43am

Of course the reason this breaks is because (i believe)

<p><div></div></p>

. If you replace the p tag with another div tag then it will not “break” the parent div out like it does with a p tag…of course you don’t have a paragraph to start with so end users would have to select the “divs” option as opposed to standard formatting, which is just plain awkward…

Completely agree with cara-m. This should be addressed…

Andrew_Morrison · March 23, 2009, 9:28am

You’ll get no argument from me that this should be addressed. I was pointing out how often it has come up because I think it is a problem. Not the greatest issue for our implementation, but definitely top 20.

mfarrow · March 23, 2009, 9:48am

Thanks for the responses. Apologies for not noticing the previous threads. I tried searching for posts relating to inline links, but should have looked for more generic template issues.

So is it the case that there is no known solution for what I’m trying to do? Has anyone come up with a workaround? I would imagine that this is a fairly common requirement. Perhaps I’m just going about it the wrong way. Any ideas?

mfarrow · April 2, 2009, 6:42am

OK, so as there seemed like no readily available solution and I needed something done quickly, here’s what I did.

Created a page template for my Link content type which just looks like this:

header('Location: #displayfield("url")');

Added the Link content type to the sys_inline_link slot with the new page template
Configured publishing to publish all Links as .php files on the server

This isn’t very elegant, but it does the trick, and from a user perspective it’s straightforward and gives them what they want.

I’d still be interested to hear how other people have tackled this problem as I’m sure there are better solutions out there than mine.

cheers
Matt

jlloyd · August 27, 2009, 12:19pm

Here are a few things I have noticed while tinkering with this problem…
(note I’ve used square braces [] instead of angle brackets<> for tags because they don’t show up)

It is possible to use a span instead of a div in your template as your wrapper element (having neither will cause ephox to NOT embed your inline variant) warnnig, I have not noticed any problems with wrapping it with [span] instead of [div], but there may be some issues downstream
A style can be applied to the [div] to prevent it from acting like a block level element (style=“display:inline; margin:0”) This makes it basically the same as a span
Some block level items DO, while other items DO NOT get interrupted(broken) when inserting a link inline. For example, I can embed a link into a [li] element without it terminating and restarting a new one, but any of the heading tags like [h3] break just like the [p] tag breaks.

So does anyone know if there is a way to modify Ephox’s behavior so that it doesn’t break up a certain tags when you perform the insert? Outside of that issue, I think I could make it work.

-Jason

bwilder · August 27, 2009, 12:28pm

It is important to distinguish between inline links and inline templates (variant). You should have no problem with inline links being inserted inline, but if you are inserting inline templates, then there is a known limitation within Ephox that does not currently allow us to use anything other than a <div> element when adding the requested data to the EditLive field. Using the <div> is what causes the inline template to break out of the current block level element.

We are currently working closely with Ephox to address this issue in the short term and hope to have a workable resolution within the coming weeks. At this time, it is unknown whether we will be able to include the resolution in a patch or if the changes will warrant a minor point increase.

Please keep your eyes on the forums for specifics.

pilotstevek · August 27, 2009, 1:24pm

We have developed a workaround for this external link issue, it may not be for everyone but our community seems to like it. This solution is very new for us and is not fully implemented throughout our site yet but is fully functional.

The reason why you cannot insert an inline link within your text is because you do not have a full page template created for those items, obviously because it is a link. What we have decided to do was a “Facebook” style linking system that links to a full page template with an iFrame that renders the external link content within our full page. I have attached screen shots on how we implemented this strategy if anyone else is interested.

Full Page Template Source Code


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="Embry-Riddle Aeronautical University">
	head>
		meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		meta http-equiv="Content-language" content="en" />
		meta http-equiv="imagetoolbar" content="no">
		meta name="generator" content="Percussion Rhythmyx" />
		meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		
		title>#slot("rffNav" "" "#displayfield('rx:displaytitle') External Link, " ", Embry-Riddle Aeronautical University" "" "template=erauSnNavRoot") /title>
		
		link href="${sys.variables.rxs_navbase}/css/print.css" rel="stylesheet" type="text/css" media="print" />
		link href="${sys.variables.rxs_navbase}/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
		!--[if IE 6]>
			link rel="stylesheet" type="text/css" href="${sys.variables.rxs_navbase}/css/ie6.css" />
		![endif]-->
		
			
	meta name="robots" content="noodp,noydir" />
	/head>
    body class="UIFramedPage ff3 Locale_en_US">
    	table id="page_table" class="page_table" cellpadding="0" cellspacing="0">
			tr>
				td class="header_cell" id="header_cell">
					div class="header_content clearfix">
						div class="UIOneOff_Container">
							div id="header_info" class="header_info">
								div class="header_info_text">
									div class="header_title_text">Return to #slot("rffNav" "" "" "" "" "template=erauSnNavParent") at Embry-Riddle Aeronautical University /div>
									div class="header_comment" id="elink_comment_wrapper">
										/div>
								/div>
							/div>
						/div>
					/div>
					div class="url_bar known_url"> a title="Remove Frame" class="remove_link" href='#field("url")'>  /a>Viewing: a title="Remove frame and go to this web address." class="url_fragment" href='#field("url")'> span class="domain_name">#field("url") /span> /a> /div>
					div class="url_bar unknown_url"> a title="Remove Frame" class="remove_link" href='#field("url")'>  /a>Return to: a title="Remove frame and go to this web address." class="url_fragment" href='#field("url")'> span class="domain_name">#field("url") /span> /a> /div>
				 /td>
			 /tr>
			 tr>
				 td class="content_cell" id="content_cell">
					 div class="content_cell_inner_shadow">  /div>
					 iframe id="content_iframe" class="content_iframe" name="content_iframe" src='#field("url")' frameborder="0" scrolling="auto"> /iframe>
				 /td>
			 /tr>
		 /table>
     /body>
 /html>

erauSnNavParent template Source:


a href="${parentURL}">$parentTitle /a>

erauSnNavParent template Bindings:


$parentURL=$sys.item.getProperty("nav:url").getValue().String
$parentTitle=$sys.item.getProperty("rx:displaytitle").String