Ephox in 6.6.1 appears to eat paragraph tags

Rhythmyx Technical Discussion
1

Hi.

We’re currently looking into upgrading from 6.5 to 6.6.1, but we’ve run into a major problem with Ephox. In our 6.6.1 FastForward reference installation (i.e. with no customisations at all except for the RX-15408 patch and PSOToolkit66), Ephox strips <p> tags from single paragraphs that are nested within a surrounding <div>, so this:


<div class="rxbodyfield">
    <p>Text</p>
</div>

gets changed to this (when switching between the Design and Code tabs):


<div class="rxbodyfield">
    Text
</div>

and more annoyingly, this:


<div class="rxbodyfield">
    <p>First paragraph</p>
    <div>...inline variant...</div>
    <p>Second paragraph</p>
</div>

gets changed to this:


<div class="rxbodyfield">
    First paragraph
    <div>...inline variant...</div>
    Second paragraph
</div>

If there is more than one paragraph together, Ephox leaves it alone, so this code doesn’t get changed:


<div class="rxbodyfield">
	<p>First paragraph</p>
	<p>Second paragraph</p>
	<div>...inline variant...</div>
	<p>Third paragraph</p>
	<p>Fourth paragraph</p>
</div>

Even if there isn’t a surrounding

you can have problems, because Rhythmyx inserts one. For example, if the Ephox field contains this (which it will if you just click into an empty field and type): 

<p>Text</p>

then when you click Insert or Update, it gets changed into this:


<div class="rxbodyfield">Text</div>

presumably because Rhythmyx surrounds the content with <div class=“rxbodyfield”>…</div> and Ephox then decides to strip out the <p> tags.

Exactly the same effect occurs in Ephox’s online product demo, so it looks like this is a ‘feature’ of Ephox, rather than anything to do with Rhythmyx. The problem does not affect a patched 6.5.2 installation, so it looks like it’s been introduced between Ephox versions 6.3.8.111 and 6.5.4.14.

The problem is that this paragraph stripping changes the way the website looks, as the correct CSS styles no longer get applied (and the semantic correctness of the content is broken, too, as lone paragraphs are no longer paragraphs).

I appreciate that Percussion isn’t reponsible for the Ephox control, but this issue will prevent us from upgrading, which is not good. So, I wondered:

[ul]
[li]Are you (Percussion) aware of this, and do you think it’s a problem?
[/li][li]Is there any way that we can fix this?
[/li][li]Has anyone else come across this issue?
[/li][/ul]

Thanks!

Mark

2

If you preview the page in question with the template that the content will ultimately be published out with, do you still find the <div> tags?

3

I’m afraid the <p> tags are missing from previews too. When previewing the relevant page, Rhythmyx shows exactly what is in the Ephox field (bar the surrounding <div class=“rxbodyfield”> part, of course). This isn’t surprising, as Ephox is stripping the <p> tags before it sticks the content into the repository, which I can confirm by looking in the database (there are no <p> tags there either).

Mark

4

If you view the source of the previewed page, you find just a block of text within the body with no surrounding block level tags? If so, that doesn’t sound correct.

I just created a new generic item on an out of the box 6.6.1 environment and added <p>btestbody</p> to the code view, and updated the item. When the content editor refreshes, I find that the <p> tags are replaced with <div> tags. Then I previewed the page using the P-EI Generic template. When I view the source of the previewed page, I find the following:

<p>btestbody</p>

If I change the URL of the previewed page to context 1 (Publish context) and reload the preview, then again view the source of the page, I find the same results. This test indicates that while Ephox itself removes the surrounding <p> while it’s in the content editor, then the <div> is changed back to <p> upon assembly. This is the expected behavior of the Ephox field.

If you are experience behavior different than this, it would probably be best to check your customizations. If you don’t have any, submit a ticket with support for further analysis.

5

Hi Brendon.

Thanks for looking into this, and I can confirm that I get exactly the same result as you when I do what you describe… but that isn’t the problem I’m experiencing (I think my examples below might have misled you - sorry). To see the issue, try the following on a completely out-of-the-box FastForward 6.6.1, and see if you get the same result as me.

What I want to create is a page whose body contains nothing more than a single paragraph, then an image, then another single paragraph. So I enter the following into the body of a Generic page in the Enterprise Investments site (using the Insert Rhythmyx Template button to enter image ID 449 using template ‘S - Image and Title’):


<p>Testing</p>

<div sys_dependentvariantid="522" rxinlineslot="105" rxselectedtext="" sys_dependentid="449" sys_relationshipid="1749" class="rx_ephox_inlinevariant" contenteditable="false" sys_siteid="" inlinetype="rxvariant" sys_folderid="">
<div class="leftTables"><img height="183" src="http://dmrcmsw5:9992/Rhythmyx/assembler/render?sys_authtype=0&sys_variantid=506&sys_revision=1&sys_contentid=449&sys_command=edit&sys_context=0" alt="" width="278" border="0" contenteditable="false" unselectable="on" /> 

<div contenteditable="false" unselectable="on">Large Yellow House</div>
</div>
</div>

<p>Testing again</p>

On entry, the

tags gets stripped by Ephox and the whole thing wrapped in the usual

: 


<div class="rxbodyfield">Testing 

<div sys_dependentvariantid="522" rxinlineslot="105" rxselectedtext="" sys_dependentid="449" sys_relationshipid="1749" class="rx_ephox_inlinevariant" contenteditable="false" sys_siteid="" inlinetype="rxvariant" sys_folderid="">
<div class="leftTables"><img height="183" src="http://dmrcmsw5:9992/Rhythmyx/assembler/render?sys_authtype=0&sys_variantid=506&sys_revision=1&sys_contentid=449&sys_command=edit&sys_context=0" alt="" width="278" border="0" contenteditable="false" unselectable="on" /> 

<div contenteditable="false" unselectable="on">Large Yellow House</div>
</div>
</div>

Testing again</div>

and when I preview the page, I get the following in the source (I’ve tidied up the white space and changed the context to 1 for readability):


<div id="MainContent">
   <div class="ArticleAbstractChar">
      <h1>Test article</h1>
      Testing
      <div class="leftTables">
         <img src="/Images/Housing/item449.jpg" alt="" border="0" width="278" height="183">
         <div>Large Yellow House</div>
      </div>
      Testing again
   </div>
</div>

As you can see, the paragraph tags are still missing.

This is on a completely uncustomised 6.6.1; the only thing I’ve done is install the RX-15408 patch and PSOToolkit66. It happens in Firefox and Internet Explorer, and the same thing happens if the image is replaced by a hand-typed <div> block - it appears to be the <div>s that cause the problem. If you enter multiple paragraphs instead of single ones, the paragraphs aren’t stripped; you need lone paragraphs surrounding a <div> block to see the problem.

Mark

6

Mark,
Using an OOB 6.61 with the latest patch, no PSO Toolkit, I can reproduce the behavior you’ve reported only when inserting the image as an inline template using the rffSnImageAndTitle template (S-Image and Title). Using the S-Flash and S-Image templates I cannot reproduce the behavior. I also have no problems when using an inline image instead of an inline template.

Maybe there’s something specific to the template that’s causing trouble, but I’m not sure. I recommend submitting a ticket with TS to troubleshoot further. Referencing this thread should help things along.

Brendon

7

Thanks Brendon, will do.

I think paragraph stripping is only going to be a problem with templates that include a surrounding <div> in their HTML, as this is what causes Ephox to strip the paragraphs. ‘S - Image and Title’ contains a surrounding <div> as the caption has to wrap to the same width as the image, but neither ‘S - Flash’ nor ‘S - Image’ have a surrounding <div>, so they will work normally.

I’ll leave the rest to Tech Support, but at least you’ve confirmed my findings, which is a relief. Thanks. :slight_smile:

Mark

8

Currently what I am noticing, and this may only be on my installation, is that when ephox puts just

<div class="rxbodyfield"></div>

the result during publishing is empty p tags:

<p> </p>

However, if I go back in to code mode, delete the

<div class="rxbodyfield"></div>

switch to design and then back to code the div’s are replaced with

<p></p>

At this point, if I update the content item and then publish, nothing appears which is the desired effect.

In addition, its only when you have multiple p tags does ephox stop “eating” them. I suggest playing around with it. I have also opened a ticket with TS since this is not so user friendly.

Hope this helps.

9

We are also experiencing this problem with Ephox version 6.7.1.17

<div class="rxbodyfield">
    <p>Text</p>
</div>

results in


<div class="rxbodyfield">
    Text
</div>

Which is playing merry hell with some of our templates, as they rely on the <p> tags to style the snippet template.

I noticed that the version of ephox on the online demo (6.7.3.26) no longer exhibits this problem.

Is this version available from technical support as a percussion licenced jar?

10

Ephox version 6.7.3.26 has not been QA’d so it is not currently available for installation for any version of Rx. Please submit a ticket with TS for the behavior so that we can properly track the behavior and include your case in the bug report.

Thank you!