The CKEditor framework (which our editor is built upon) is known for being very good at respecting and handling code however, if your code is being stripped out or transformed for some reason, here are a few things you can do to get to the bottom of it.
Test:
You can perform a quick test by switching backwards and forwards between the source code and wysiwyg mode by selecting "Tools" > "Source Code".
And by checking if your HTML is being stripped away before or after saving your content.
- If it is being stripped out after being saved to the database then it’s likely to be joomla’s Article Filtering.
This is because WYSIWUY editors are only there to format your code. They don’t have anything to do with the saving of your content to the database and for this reason the problem it’s likely to be with how Joomla’s Article Filtering is set up on your site.
- Or if your code is being transformed or stripped out before saving the article, then it points towards the editor or the web browser interpreting it.
If the code is considered invalid and cannot be rendered by your web browser then it will be transformed into something that your browser can read. The issue is that different web browsers (Edge, FF, Chrome etc...) all work differently and may do something different. To standardised this we have something called HTML 5 Standard which the editor adheres to for cross browser support.
HTML 5 Standard definition from wc3
3.2.5.1.2 Flow content
Most elements that are used in the body of documents and applications are categorized as flow content.
a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr Text
As a general rule, elements whose content model allows any flow content should have either at least one descendant text node that is not inter-element whitespace, or at least one descendant element node that is embedded content. For the purposes of this requirement, del elements and their descendants must not be counted as contributing to the ancestors of the del element.
This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.
https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#flow-content-0
Often the problem is that the html tag is empty. The only exception our editor currently supports is < i >, < b > and tags as they are now commonly being used for icon fonts. This means that empty tags are not designed to be empty so the HTML is invalid and is treated accordingly.