Text Editor Removes HTML - Question | JoomShaper

is live, now with multi-currency selling.

Learn More
Back to the questions

Text Editor Removes HTML

C

clausjepsen

SP Page Builder 1 month 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>

0
Website
https://www.egedalweb.dk
8 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #230851

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.

0
C
clausjepsen
Accepted Answer
1 month ago #230861

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 month ago #230304

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

0
C
clausjepsen
Accepted Answer
1 month ago #230331

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 month ago #230482

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.

0
C
clausjepsen
Accepted Answer
1 month ago #230824

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

Claus

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #230831

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?

0
C
clausjepsen
Accepted Answer
1 month ago #230847

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>
0