9

Of all the Joomla editors we've used, JCE has best suited our purposes and clients. But there's a few problems with the editor that can cause problems when we code something, then it's toggled to wysiwyg and the editor tries to 'fix' our perfectly valid html.

Before you go asking questions - yes, we've set it to allow all those elements JCE likes to restrict, and no, it is NOT set to validate / clean up the html. The only restrictions we have are for pasting content into the editor.

Exhibit A:

<a href="#"></a>

This will disappear on toggling editor and back. Replaced with:

<p>&nbsp;</p>

Exhibit B:

<a id="#nameofanchor"></a>

Changes to:

<p>&nbsp;</p>

Exhibit C:

<div><a id="#nameofanchor"></a></div>

Changes to:

<div>&nbsp;</div>

Exhibit D:

<a id="hello" class="link">Hello</a>

Changes to:

<p><a id="hello" class="link"></a>Hello</p>

Exhibit E:

<a href="#">
<div>
<h2>Our Work</h2>
</div>
</a>

Changes to:

<p><a href="#"></a></p>
<div>
<h2><a href="#">Our Work</a></h2>
</div>
<p>&nbsp;</p>

Now, we want to use id instead of name for our anchor, because it's valid under HTML5, whereas name technically is not. Also, in what universe is id an invalid assignment to a link?

Also, now that it's totally legit to wrap a div with links, why would JCE strip those out as well?

Is this just a setting I'm missing? Does anyone have any insight into how I can use the editor so that we can code as we need in the editor, but our clients can't wreck it simply by saving in wysiwyg?

Edit: I've tested this in chrome, firefox and safari. Don't think it's got anything to do with the browser.

Edit: I've tested this with the container settings. Both Paragraph Container & Paragraph on Enter and Div Container & Div on enter cause this. The other two, No container & Paragraph on enter, No Container & linebreak on enter, do not cause it. Problem is - I need the first setting! As much as it would be great to give clients the benefit of the doubt, they simply can't be trusted to follow instructions and add paragraph formatting to their text.

Confirmed: This also happens with TinyMCE.

So - we know what causes this - the Paragraph Container setting - now how do we get around it while keeping that setting alive?

9
  • 1
    Glad it's not just me.
    – Craig
    Jun 3, 2014 at 3:43
  • After our previous discussions and the conclusion that this is coming from the JCE element wrapping feature, I am not sure what this is actually a concern. If you are trusting your customer to be able to add html snippets like the above, by toggling the editor state, why you won't trust them that they will wrap their content with the appropriate <p> tags ?
    – FFrewin
    Jun 3, 2014 at 16:29
  • Our clients do not add html. WE write html, they use the editor side - as soon as the editor is toggled, it wrecks our perfectly valid html.
    – Faye
    Jun 3, 2014 at 16:31
  • In any case, if you give edit access of a page full of html to customer, then one way or another, there is a big chance that the customer could destroy your html. What about using the JCE's Template Manager, or other "macro" tags, that will do the dirty job of adding the markup you need ?
    – FFrewin
    Jun 3, 2014 at 16:39

4 Answers 4

7

I use JCE Editor on all our sites, but we have started also installing Sourcerer by NoNumbers. This gives an easy INSERT CODE button to the JCE editor that protects it from being modified.

http://www.nonumber.nl/extensions/sourcerer

3
  • THANK YOU. This is perfect, we already have nonumber installed on our stuff because it's fantastic, I was not aware it had this. This is perfect.
    – Faye
    Jun 3, 2014 at 17:39
  • 1
    There should be no need to use Sourcerer to add HTML.
    – BodgeIT
    Jun 6, 2014 at 10:41
  • Aaaand yet I have to, or JCE strips perfectly valid HTML out.
    – Faye
    Jul 15, 2014 at 17:02
2

There are some secret settings for JCE. I know the following setting stops &nbsp; being added to empty divs, maybe used to clear floats, which causes line-height issues when rendered:

In the Editor Global Configuration, add:
remove_div_padding:1 
to Custom Configuration Variables. 

I would expect there are more that can control any aspect of the editor.

1

I think it must be the typography settings in: Profile -> Editor Parameters -> Typography. Try to set the Container Element & Enter Key to NoContainer & LineBreak on Enter to see if it still applies any changes to your html.

Also remember that HTML Validation setting has setting for each Editor profile and that Joomla also provides a global filter in the global configuration page set by usergroup. Make sure there are no settings there for each usergroup.

4
  • Yeah I have been in all editor profiles, etc. I've got it all set up correctly for no html. Changing the container might solve it - but it will cause another problem, equally as problematic. If a client can add text content that isn't wrapped in paragraph tags, then the formatting of their text will be different. We don't want that either. I'll test it to see if that causes the same problem with the anchor, but as far as paragraph tags adding themselves, that's kind of par for the course.
    – Faye
    Jun 3, 2014 at 15:03
  • Yeah it is the container settings that does it - but as I said, it's a bigger problem for our clients not being able to paste and have an automatic paragraph tag wrap their content.
    – Faye
    Jun 3, 2014 at 16:17
  • I think this is happening because your code examples contain line breaks, which is a kind of "rule" for JCE to create the paragraphs. There should be a such criterion in order to make this. Is your customer going to paste such html snippets in the editor ?
    – FFrewin
    Jun 3, 2014 at 16:23
  • Our clients are not going to use html, but we still code with html behind what they do. We create areas for them to paste / type straight content into. Also - if you mean typing html in one line instead of organized as above, I've tried that as well. I get the exact same results.
    – Faye
    Jun 3, 2014 at 16:29
0

This behaviour isn't unique to JCE. TinyMCE behaves the same way. This behaviour may not be limited to TinyMCE, it could be a browser DOM behaviour.

JCE actually goes to the trouble of trying to keep some empty tags, the method employed is to pad with a space.

https://github.com/widgetfactory/jce-editor/blob/master/editor/tiny_mce/plugins/cleanup/editor_plugin.js

2
  • Not gonna lie, I have no idea what this means. Can you break it down a little more? What am I looking at in that link? What do you mean pad with a space? Adding a nonbreaking space to the above code examples doesn't change the end results, I tested that thoroughly.
    – Faye
    Jun 3, 2014 at 15:05
  • I switched my default editor to TinMCE, the one that comes pre-installed with Joomla, and tested Exhibit A. It also removed the tags when switching between the editor WYSIWYG and Source views. i.e. This behaviour doesn't appear to be unique to JCE. Hence, I'm wondering if this isn't unique to TinyMCE either, and perhaps the same might happen when using browsers ability to perform in-place editing. The JCE code reference was line 129 where a non-breaking space is used between teh start and end tags. That works for me in both JCE and TinyMCE. Strange. Jun 3, 2014 at 22:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.