Bug: Layout in editor is nothing like layout when post is saved

[Suzuki Stumpy]

I've been trying to generate a new thread for my character archives ... but, when I'm pasting code into the editor, layout is preserved fine (per the first screenshot below), but then when saving the post, the layout is getting utterly destroyed by the site, so in this particular case, the editor is most definitely not WYSIWYG...

 

How it looks in the editor:

 

How it looks once saved:

 

 

 

 

Link to the actual post:  https://test.myth-weavers.com/index.php?/topic/848-stumpys-stuff/#comment-3334

[bwatford]

Where are you pasting from?

 

If Baldr to Baldr you need to copy the source of the original post to the source of a new post.

 

[Eric]

When you say "pasting code", do you mean in source mode? It is definitely possible to create content using source mode that is not standards-compliant HTML5, and that will get corrected by the HTML sanitizer before the post is saved.

 

Fieldsets are block-level elements in HTML, so they cannot be positioned side-by-side without some help. The easiest way to do it is with a zero-border table, but it's possible to do it with some very carefully constructed CSS (although I have not tested to see if those tricks are allowed by the HTML sanitizer rules) or even more carefully constructed floats.

[bwatford]

Looking how it came out I am not sure where it was coming from as images have to be https and not http, that is why that got stripped out. So the image definitely came in a copy  paste from off site.

 

@Suzuki Stumpy link to the original post you were copying from?

 

@Eric I think I see what is wrong.

 

EDIT: He has a table set inside a fieldset, which won't save cause of the fieldset/table issue.

[Suzuki Stumpy]

9 hours ago, Eric said:

When you say "pasting code", do you mean in source mode? It is definitely possible to create content using source mode that is not standards-compliant HTML5, and that will get corrected by the HTML sanitizer before the post is saved.

 

Fieldsets are block-level elements in HTML, so they cannot be positioned side-by-side without some help. The easiest way to do it is with a zero-border table, but it's possible to do it with some very carefully constructed CSS (although I have not tested to see if those tricks are allowed by the HTML sanitizer rules) or even more carefully constructed floats.

Yes, pasting code in source mode.  It is valid HTML (I'm a developer by trade, so know what I'm doing) so shouldn't have any issues there.  I can get with the Image changing due to not being a secure URL ... that was a copy/paste from an older link so is easily changable.

However, the fact that the heading bar is split onto two lines should be enough to show that something is up - it's an outer flexbox with two inner divs - so should be completely possible to display on a single line as per the original screenshot ... so no idea why the site is splitting it to two ... here's the original code for that section:

 

<div style="display:flex;justify-content:space-between;border-bottom:1px solid black;padding-bottom:5px;">
  <div>
    <strong>Philthy Mutha - The Ace of Bass</strong>
  </div>
  <div>
    <strong>System: <a href="https://200wordrpg.github.io/2016/rpg/finalist/2016/04/11/HEAVYMETALWIZARDSORCERORS.html" target="_blank">Heavy Metal Wizard Sorcerers</a></strong>
  </div>
</div>

[Suzuki Stumpy]

9 hours ago, bwatford said:

 

@Suzuki Stumpy link to the original post you were copying from?

 

 

The original post was only really used as a reference for layout.  Pretty much every element has been recreated from scratch rather than a straight C+P.  Here's the original HTML I put in for the post (attached)

Original post here for reference:  https://www.myth-weavers.com/showthread.php?t=497678

I appreciate that if I'm trying to use HTML that's unsupported, then stuff will get stripped.  My main issue though is that the editor should still honour the post as it will appear once committed to the site.  Otherwise, it completely defeats the object of having a WYSIWYG editor in the first place.  (ie: The code should be validated when editing in source mode - not when it gets eventually saved).

 

new 5.html

[Eric]

Thanks for sending the detailed source so I can take a look. Invision Community did not package the CKEditor source plugin, so their HTML sanitizer does not take into account all the possible things that could be done with HTML + inline CSS. We will make best effort to try to align the two.

[bwatford]

The issue here is the browser itself is responsible for how the editor shows the post before its saved. It has nothing to do with CKEdiror. Using inline CSS I can make some amazing looking stuff. But none of that will be there after I hit save as that is when the sanitizer strip it all away.

 

The sanitizer is coded into the editor to work when you save. Up to that point the browser is in control. That is the way it works with all wysiwyg editors that I have ever used online. So I dont know if that is fixable to work the same as an offline editor.

 

Maybe Eric has some MOJO that can make it happen before the post is submitted? 

[Scarecrow71]

8 minutes ago, bwatford said:

The issue here is the browser itself is responsible for how the editor shows the post before its saved. It has nothing to do with CKEdiror. Using inline CSS I can make some amazing looking stuff. But none of that will be there after I hit save as that is when the sanitizer strip it all away.

 

The sanitizer is coded into the editor to work when you save.

 

This is why I question why the editor can't sanitize OGMW text upon paste.

[Eric]

11 minutes ago, bwatford said:

The issue here is the browser itself is responsible for how the editor shows the post before its saved. It has nothing to do with CKEdiror. Using inline CSS I can make some amazing looking stuff. But none of that will be there after I hit save as that is when the sanitizer strip it all away.

 

The sanitizer is coded into the editor to work when you save. Up to that point the browser is in control. That is the way it works with all wysiwyg editors that I have ever used online. So I dont know if that is fixable to work the same as an offline editor.

 

Maybe Eric has some MOJO that can make it happen before the post is submitted? 

There's nothing you can do in WYSIWYG mode that will get stripped by the Invision sanitizer; it's only things that you would put in via source mode. There is post-processing for the source plugin before it's re-rendered into WYSIWYG mode (as the dialog box disappears), and that's where I would look to make improvements.

 

You are correct, however, that there is no way for the source dialog box to actively prevent users from entering elements, attributes, or styles that would be stripped. It is just a dumb text box. Making the enforcement at that level would essentially require us to build an integrated development environment, and the value proposition is not there.

 

1 minute ago, Scarecrow71 said:

 

This is why I question why the editor can't sanitize OGMW text upon paste.

OGMW is invalid HTML5. It's not even fully valid HTML4 (and prior to implementation of the much-maligned BBcode checker, might not have been valid HTML at all), but because browsers are generally written to be backwards compatible, the WYSIWYG entry box can render this invalid HTML 5 even though CKEditor and Invision do not understand it when it comes time to commit the post to the database. When you click Save, the post entry is sanitized and saved, and then the sanitized content is what is re-rendered in your browser as best as it can be understood by CKEditor/Invision.

 

There are substantial differences between HTML 3/4 and HTML 5 that make on-the-fly conversion an extreme technical challenge. I sampled several commercial-off-the-shelf HTML4-to-HTML5 converters against OGMW threads, and none of them were able to correctly do the job (garbage-in-garbage-out). We are still looking to see whether we can rewrite the OGMW output to be HTML5 compliant (at least at the post level) as an alternative.

[PigLickJF]

This is all a bit over my head, but isn't there a preview button? Would using a preview help in this situation, i.e. strip things out so you can see what it will actually look like before you hit save?

[Eric]

Sorry, it is definitely complex. There are two layers of sanitization, one provided by CKEditor (the product that you use to create posts) and one provided by Invision (the product that houses the posts). The preview button functions with the CKEditor ruleset as the Invision ruleset is only used when saving the post. Therefore, even with the Preview button it is possible to create something that the CKEditor ruleset says "Yes, that's valid and safe HTML5" and the Invision ruleset says "Not on my site, buddy!" Aligning the two is possible but will take some time to get close to perfect (since they are written in different programming languages with different levels of abstraction, I can't just copy one to the other).