ProcessWire icon indicating copy to clipboard operation
ProcessWire copied to clipboard

Front-end editing inside a blockquote adds empty <p></p> at beginning and end

Open adrianbj opened this issue 9 years ago • 3 comments

This results in the quote characters being opened and closed both before and after the actual text.

Without editing on:

<blockquote>
    <p>Text here</p>
</blockquote>

With editing on:

<blockquote><p></p><div id="pw-edit-8" class="pw-edit pw-edit-InputfieldTextarea" data-name="intro" data-page="1157" style="position:relative"><div class="pw-edit-orig">Text here</div><div class="pw-edit-copy" id="pw-editor-intro-1157" style="display:none;-webkit-user-select:text;user-select:text;" contenteditable="">Text here</div></div><p></p>
 </blockquote>

adrianbj avatar Jan 21 '16 20:01 adrianbj

Adrian, what method are you using to make the "Text here" text editable? Can I see the exact output code you are using from your template file, whether it's using tags, edit attributes or automatic insertion?

ryancramerdesign avatar Jan 31 '16 11:01 ryancramerdesign

It's using Option A.

The template code is:

<blockquote><p><?php print $page->quote; ?></p></blockquote>

I haven't been doing the front-end on this site and didn't realize that there is some CSS at play here also.

blockquote p:before {
    content: "“";
}

blockquote p:after {
    content: "”";
}

So I think it could be fixed by adding the quotes in the template, rather than via CSS, but thought maybe it should still be considered a bug in the front-end editor - what do you think?

adrianbj avatar Jan 31 '16 16:01 adrianbj

This happens because front-end editor is adding div-elements inside p-element and that's not allowed in HTML (https://www.w3.org/TR/html401/struct/text.html#h-9.3.1). So at least Chrome adds another p-tags to its page inspector to close the opened p-tag before the opening div-tag. If you check your pages source, the additional p-tags should not be visible.

The front-end editor adds div-tags for textareas and span-tags for other elements.

Is there a problem if front-end editor would always use span-tags?

Luoti avatar Sep 13 '16 09:09 Luoti