Solved SP Page Builder

Text editor removes HTML

Asked by clausjepsen 2 months ago Last activity 2 months ago

Occasionally, I embed images within the SP PageBuilder text editor, but want it with a caption.
I know, that I could move it to an image-addon, but I kind og like the text wrapping around.

Therefore, I use the below-mentioned code in the text-editors 'source code' mode and it works great.
However, if I correct anything in text and saves, the editor replaces this code with a simple image tag ruining the layout. What is the reason for that "cleanup"?

<figure class="float-end" style="margin:0 0 10px 15px;text-align:center;">
<img src="/images/vores-karate/stilart-historie/gichin_funakoshi.jpg"
alt="Den moderne grundlægger af karate - Gichin Funakoshi"
width="270" height="500"
style="display:block;">
<figcaption style="margin-top:5px;font-size:0.85em;color:#252525;">
Gichin Funakoshi
</figcaption>
</figure>

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

2 months ago

Ok, at least now we cannot help more. We need to make changes in sourcecode.

BTW

Have you tried to use JCE inside Text addon, maybe it will handle HTML5 code better.

clausjepsen Asked this

2 months ago

I not really keen on using JCE after the latest security issues. Mainly because I don't need the functionality beyond tinyMCE. Maybe later.

4 more replies

Ofi Khan Staff

2 months ago

Hello clausjepsen,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing.

If you are using HTML tags on the text, then use the source code editor. Using the normal editor will break the tags. So, use only one way: normal editor or HTML source code editor.

Best regards

clausjepsen Asked this

2 months ago

Hi
As mentioned, I add the HTML tags into the source code editor. And the HTML tags works as intended.The problem is that the editor replaces the HTML tags with a img tags whenever a small change is made afterwards, eg correcting a spell error.

Ofi Khan Staff

2 months ago

Could you please record a small screencast? Please share it via any drive like Google Drive, One Drive, Files FM etc. I will check it and share it with the developer team.

clausjepsen Asked this

2 months ago

This is the HMTL I want to embed. I works find until I edit anything afterwards.

Claus

Paul Frankowski Senior Staff

2 months ago · edited

Add your code inside Raw HTML addon. Probably becuase "figure" is removed from Text addon by toolbar. That addon is prepared for HTML5 code as you used. Option #2 do not use <figure> and keep only <img> . To be honest, in your case is Not needed.

Extra:
Make simple test, add your code inside article (tinyMCE or JCE) and compare, if will be there or Not?

clausjepsen Asked this

2 months ago

Hi,
In tinyMCE the code works and stays unchanged after altering the text afterwards.

I have tried below-mentioned versions also, which is non-HTML5, but same problem. All code is replaced with a simple IMG tag wrapped into P-tags if I alter the text afterwards.

As I want to wrap the text around the image, a RawHTML addon is not really useful. Also, I am using a text-addon insite TABS-addon.

Without HTML5 code, using Bootstrap

<div class="float-end text-center" style="margin: 0 0 10px 15px; max-width: 100%;">
    <img class="img-fluid" style="display: block; margin: 0 auto;" src="/images/vores-karate/stilart-historie/gichin_funakoshi.jpg" alt="Den moderne grundlægger af karate - Gichin Funakoshi" width="270" height="500">
    <div style="margin-top: 5px; font-size: 0.85em; color: #252525;">Gichin Funakoshi</div>
</div>

Without HTML5, without Bootstrap specific code

<div style="float: right; width: 270px; max-width: 100%; margin: 0 0 10px 15px; text-align: center;">
    <img src="/images/vores-karate/stilart-historie/gichin_funakoshi.jpg" alt="Den moderne grundlægger af karate - Gichin Funakoshi" width="270" height="500" style="max-width: 100%; height: auto;">
    <div style="margin-top: 5px; font-size: 0.85em; color: #252525;">Gichin Funakoshi</div>
</div>