Forums (Obsolete)

Member

philliptune - 4/18/2013 9:47:11 AM

EditableText does not like <section> and <figure> tags

The WYSIWYG editor seems to want to change my markup everytime I go in to edit a page. I have something like:

<h1>Header</h1>
<p>Some text.</p>
<section id="new_section">
    <h1>New Section</h1>
    <p>Some text about this section.</p>
    <figure id="new_section_figure">
        <table...
        <figcaption>...</figcaption>
    </figure>
    <p>Some more text</p>
</section>
<section id="another_section">
    <h1>Second section</h1>
    <p>More text...</p>
</section>

After saving and going back into the Source, I get something like:

<h1>Header</h1>
<p>Some text.</p>
<section id="new_section">
    <h1>New Section</h1>
    <p>Some text about this section.</p>
    <figure id="new_section_figure">
        <table...
        <figcaption>...</figcaption>
        <p>Some more text</p>
        <h1>Second section</h1>
        <p>More text...</p>
    </figure>
</section>

As you can see, it seems to keep a <section> on there but got rid of my second one, effectively merging both section; you'll also see my </figure> tag was carried all the way to the bottom on the section for some strange reason, so the rest of my content shows as part of that figure.

I surely hope this is some known issue that can be fixed easily. I'm using 7.0.

Member

philliptune - 4/18/2013 10:12:33 AM

RE:EditableText does not like <section> and <figure> tags

Actually, let me ammend that a bit:

<h1>Header</h1>
<p>Some text.</p>
<section id="new_section">
    <h1>New Section</h1>
    <p>Some text about this section.</p>
    <figure id="new_section_figure">
        <table...
        <figcaption>...</figcaption>
        <p>Some more text</p>
        <section id="another_section">
            <h1>Second section</h1>
            <p>More text...</p>
        </section>
    </figure>
</section>

So it didn't get rid of my second section; it just buried it inside the previous section. After some testing, it seems to be doing that only when I have the <figure> as a child of the <section>. Remove the <figure> and it seems to work correctly. But I don't know why it's changing my code anyways. It's entirely valid to place a figure inside a section as both are Flow elements.

Member

philliptune - 4/18/2013 10:28:17 AM

RE:EditableText does not like <section> and <figure> tags

Upon further testing I have found that this is occuring when I use an imbedded style element:


<h1>Header</h1>
<p>Some text.</p>
<section id="new_section">
    <h1>New Section</h1>
    <p>Some text about this section.</p>
    <figure id="new_section_figure">
        <style>#new_section_figure table {...}/*My imbedded styles*/</style>
        <table...
        <figcaption>...</figcaption>
    </figure>
    <p>Some more text</p>
</section>
<section id="another_section">
    <h1>Second section</h1>
    <p>More text...</p>
</section>

If I remove the style element, my code is kept relatively intact. This is still something I'd like to fix, because although imbedded styles are not best practice, I want my content editors to be able to set styles when necessary. (This stylesheet, for example, is truncating the table, so it's only relevant to that page.)

Kentico Legend

Brenden Kehren - 4/18/2013 6:58:50 PM

RE:EditableText does not like <section> and <figure> tags

Based on your HTML, why not create a document type and just put your HTML in transformations vs. in the editable webpart textbox? This way you can specify the styles within your transformation and the content editors just fill out the form. Its more setup work for the developer but it makes things much easier on the content editors.

Kentico Consulting

Kentico_RichardS - 4/19/2013 12:49:43 AM

RE:EditableText does not like <section> and <figure> tags

Hi,

The WYSIWYG editor we are using is CKeditor and he really does strip some tags. Unfortunately that is just the behaviour and there is so much we can do - although in your case I really dont thing this is the right usage of editable text. If you want to add html code use Html web part instead.

Or as FroggEye has suggested you can use the power of document types if you want to be able to easily add and style documents via transformation.

Please let me know what exactly is it that you are seeking.

Kind regards,
Richard Sustek

Member

philliptune - 4/19/2013 9:41:58 AM

RE:EditableText does not like <section> and <figure> tags

Yeah, good point FroggEye. I had intended to make a custom document/transformation to input <figure>s so as to keep my content editors from getting confused - not everyone is trained on new HTML5 tags yet.

Richard, I would say, however, that Editable Text is what I'd want to use and let my Editors dictate when to use source HTML (you know developers hate using WYSIWYG editors anyway). And the issue entirely falls with CKEditor. (However, from playing with other installs of CKEditor, I know there is quite a bit of customizability that Kentico could do with it, but I won't go there right now.) It tries to fix things that don't need to be fixed, and unchecking "Filter output HTML of web part" in the Editable Text Web Part Properties doesn't seem to do a darn thing; it should turn off the editors ability to change ("filter") the code, but I've yet to see that checkbox affect a thing. The whole issue was CKEditor being unable to validate a <style> element as a direct child of either the <section> or <figure> element. While W3C doesn't allow metadata elements in a <figure>, it is entirely allowed in <section> and should therefore validate as properly structured HTML. (Moving the <style> outside of the <section> entirely did fix the issue, BTW.)

It's entirely valid that a Content Editor, with access only to "Editable" Web Parts, should be able to use <section>s and <figure>s on a page-by-page basis. Adding a Static HTML Web Part in Design tab whenever the need arises subverts the point of reuseable templates.

Going forward, I plan to create a separate workflow for my editors to add figures to their articles, which would include separate documents and inline widgets. Kentico is built for ease of use for non-technical editors, and I get that. Making processes that reduce editor errors are a good practice, but a developer shouldn't be forced to create and utilize those processes because of the restrictions of the CMS.

Thanks for your responses and letting me rant a bit.

Kentico Legend

Brenden Kehren - 4/19/2013 1:34:33 PM

RE:EditableText does not like <section> and <figure> tags

With this being said, seems a custom doc type is the way to go. Let the users enter plain text into a header textbox and HTML into another textbox and in your transformation, just wrap that HTML with the <figure> tag. Seems like something that is way friendlier than simply using the CKeditor. You could even define a dropdown list and let the user select which <tag> they want to enter, you just need to wrap it correctly in your transformation.