ProcessWire
ProcessWire copied to clipboard
Front-end editing inside a blockquote adds empty <p></p> at beginning and end
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>
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
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?
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?