CMS API Stripping HTML Embeds

Design help Data API
1

It seems odd that html embed code content is being stripped out of CMS items when the CMS is queried by the API.

Current Behavior:

  1. Create a blog post.
  2. Add an HTML Embed to a Rich Text field.
  3. Save Blog Post.
  4. Query Blog Post via API

The rich text field has the HTML Embed code stripped out

Expected Behavior:

The code string will be returned by the API within the Rich Text Field

2 Likes
2

Maybe log this one with Webflow support, sounds like a bug.

3

Hi @Ecalvo,

I have responded to your support ticket, but wanted to place some of that response here for others to be made aware.

Actually this isn’t a bug just a feature limitation. Keep in mind that the custom code embed within the rich text element is a new feature for this year. What you see is version 1. What will be seen in version 2 is still being discussed with no timeline for a release at this time.

Have a Great Day and Happy Designing,
~ Brandon

1 Like
4

Hello,

We are running into this too.

We are migrating our wordpress blogs to webflow CMS. We wrote a migration script to wrap our custom code inside of a <div class='webflow-emebed> before using the API to create the content such that the embeds show up correctly.

While the emebeds do show up appropriately, any future changes made to the content using the CMS editor deletes the emebeds.

Steps to recreate:

  1. Create a live item using CMS API with a rich field text and some embedded code in this field.
  2. Observe the item on the live site and see the embedded content render.
  3. Go to CMS editor and select the item to edit on Webflow
  4. Change content and hit save

Expected outcome:

  1. Editor should show embeded code in the rich text editor of the content field
  2. Changing the content field should not delete embeded code.

Actual outcome:

  1. Rich field text editor does not show a placeholder for the embedded content
  2. Embedded content gets overwritten and we lose data

Maybe someone from the tech team can point us in the right direction here, how do we get the CMS API to recognize legitimate embeded code in CMS items?

5

I am confident that you can’t read or create code embeds via the API and when I tested I found zero workarounds. Really throws a thorn in the whole Webflow migrate Wordpress situation. My WP clients love using Gutenburg with custom blocks. No way to even show them a lesser solution.

2 Likes
6

Hi Jeff,

I actually did create code embeds successfully via the API.

However, with two caveats:

  1. Once added, we can never modify the field using the editor for that particular content
  2. Fetch API just returns an empty <div>

Happy to share my workaround if you are keen

7

@Swayam_Narain
I would like to see the code embed HTML you inserted into a RTF via the API. Was this on a create new item or update?

My test was an API read of an item that had an embed inserted through the designer, which would not display as well as CSV exports which did not include the embed. This by itself rules it our for me.

8

@Swayam_Narain hey :wave:

I’m currently facing the same issue. I would like to push custom code into a rich field with the API.

Could you please share your workarounds ? :pray:

Thanks !

9

All I did was wrap my html data in this div:

<div class='webflow-emebed'>
  <!--Your HTML here -->
</div>

and POST to the API per usual

10

@Swayam_Narain Thanks for your answer !

I tried this and unfortunately it didn’t work. Did I missed something ?

I tried with <div class='w-embed'><p>test2</p></div> and <div class='webflow-embed'><p>test2</p></div>

Capture d’écran 2021-07-07 à 20.56.00
Capture d’écran 2021-07-07 à 20.56.001070×214 11.8 KB

Capture d’écran 2021-07-07 à 20.56.49
Capture d’écran 2021-07-07 à 20.56.491770×396 3.35 KB

1 Like
11

I used double quotes around the w-embed, and it worked for my example (a table).

12

Thanks for that. I did some research and came back with an update.

Properly escaped code (CSS or JS) wrapped in a div with a class of .w-embed.w-script makes the roundtrip when posted via the API and then when exported as a CSV. It displays on the front-end. The embed element is not accessible in the designer for edits.

Interestingly, you can put images and other html with classes into the body of a rich-text field. Will render just fine on front end. The URL’s on images are not touched and are visible and editable as images in the designer (standard image dialog).

I even added webP image sources into a RTF and a layout with CSS grid and that worked. This opens some real possibilities! I am no longer constrained! Now forget about editing this content in the designer or editor but if you have a remote DB and use the API you could theoretically do what you want. BOOM.

Here is a front-end demo of a collection item RTF populated with code (dynamic images in a CSS grid, most are WebP) on the front end.

Here is a backend CMS Item shot. Note that the grid is not being implemented since that is invoked with custom code which does not show in the designer in this case.

image-designer-api-with-images
image-designer-api-with-images2098×1764 105 KB

Here is a patch done from postman for the curious.

postman-screenshot-custom-code-in-RTF
postman-screenshot-custom-code-in-RTF1348×1122 99.7 KB

1 Like
13

It’s as if the Editor saves our HTML embeds somewhere else. And that’s how the API remembers them, thereafter.

The CherryTree outliner does that sort of thing. It supports embedding a picture, table, or code block in its HTML-like rich text nodes. But they’re stored outside the rich text, in their own “collections” (database tables). There isn’t even a <div> to mark their location.

So the solution seems to be, once you’ve put in, via the API, an Embed, or any other Editor-unsupported HTML code (e.g., nested lists), then use only the API to update it. An external, WYSIWYG editor might be handy, in that case.

14

Hi, Is there any update on this issue? HTML embeds are not returned by CMS API!

15

Is there any update on this? I’d like to be able to add embeds in the designer and access them when reading the content from the API

16

Yeah this is definitely something we need as well.

17

I also need this, how can this still not be possible??

18

Hi, Thank you so much for your solution,
unfortunately I did like you said but there is no embed table it turns to plain text with a lot of space-line. Is the solution still workable? :cry:

19

Years later and this is still not fixed. We need to export our CMS collection, but everything is stripped out. Infuriating, as I logged this bug with support three years ago.

1 Like
20

Not sure if this helps anyone else, I was experiencing an issue where the HTML was partially coming through. Things like <p> tags etc were all good, but as soon as it can to lists <li>, for some reason Webflow was creating the markup for lists, but was stripping any content between <li></li> tags. After running a bunch of requests through Postman, I determined that it was \n character that was tripping up webflow, so for me running replaceAll('\n', '') on the HTML data did the trick.

1 Like