Adding an iFrame to a Rich Text Field

What the best way to get this done? I know there is an embed field but that only works for youtube videos. What about non-YouTube iframe embeds?

Hello John, thanks for reaching out!

You can add any type of valid oEmbed URL to an Embed field, and if it's not compatible the other option is exactly that; using the preformatted option of the Rich Text field to add your iframe as code.

Then in your project, you'll just need to render that piece of the Rich text field as HTML. Use dangerouslySetInnerHTML to template the result:

import React from 'react'

const VideoComponent = ({ videoIframe }) => (
  <>
    <div dangerouslySetInnerHTML={{ __html: videoIframe }} />
  </>
)

export default VideoComponent

How do I make that work with prismic-javascript and the RichText component. Do I need to make a custom handler in my app I guess? Currently, RichText just renders <pre> tags as you would expect, visual chunk of HTML on the page.

Hey John,

Paulina is off today, but the method she suggested above should be used with a unique rich text field, which ONLY has the pre option activated. Alternatively you could use a key text field here.

This output of this field is then passed through the dangerouslySetInnerHTML attribute to execute the HTML.

So there isn't a way to just have a regular <iframe> in a Rich Text field, where an editor wants an iFrame in the middle of a large content block?

Hello again John

At the moment, using a Rich Text or Key Text field is the best workaround to add an iframe to your documents.

This issue has been closed due to inactivity. Flag to reopen.

Any progress on this @Pau? It's a constant annoyance with the teams I've got using Prismic and there isn't much I can do right now.

The lack of customization in this rich text editor is really hard to work with in a complex production environment with lots of editors and varied content. It's a huge limitation compared to their old WordPress site.

I find it surprising there isn't more chatter in this forum about it - I hear from client almost every week about giving them access to features that don't exist. Frustrating.

Hi John,

I think there's been a bit of a misunderstanding about the solution here. If you want to build a flexible page with Prismic then the best option is to use Slices. Each Slice corresponds to a content block on the frontend of your website and gives your users basically the power of having a page builder. This is the reason you haven't heard many people talking about this, because it's possible with Slices.

So if you have 4 Slices for example 1x [Rich Text Slice], 1x [Image Slice], 1x [Image + Text Slice], 1x [iframe Slice], then your content creator can create many very different pages with what's available by using these Slices as building blocks like so.

[Rich Text Slice]
[iframe Slice]
[Image + Text Slice]
[Rich Text Slice]
[iframe Slice]
[Image Slice]
[Rich Text Slice]

This video explains the concept well. You can see the structure of a Slice field here and this article shows you how to build some in Javascript.

What technology are you using to build your project?

@Phil - thanks for the insight. Maybe my whole approach is wrong, I'm open to that idea. This tool just feel badly matched to the team I have given it to and maybe it's my fault.

When they do a basic blog post, we're fine but the second anybody tries to go outside the box 5%, prismic falls apart. They can't customize embeds or add anything besides youtube and vimeo. They want to do big images in the middle of a text block - no way. Sometimes, they want to have text wrapping around images - I've tried to do the custom style thing in the editor your docs recommend, but the editor UX is so confusing with the highlighted block of text that doesn't visually show any difference none of the editors can figure it out. Sometimes they want a gallery in the middle of a text section like your video says but again, they can't visually place it on the page - it just gets jammed underneath the text in a slice.

They want to put in a big block of text and 'slice' into the page get some visual feedback about the placement of other elements on the page. How can I make any one of these happen? What are other people doing? Is there an example of a real, complex site where this kind of build is shown. Your docs are close to useless for any of the above use cases.

Basically, all the examples you've described above are what people use Slices to create. The text editor is really for just text. We plan to overhaul it in the future, but its use case is not for building pages.

Slices allow you to build pages with the flexibility you've described, they also give you a visual representation closer to that which is on your frontend website.

There are many creators making complex websites with Prismic such as Roland Garros. The best way to connect how this all works, is to start with one of our sample projects which all use Slices to build flexible pages.

The embed field in the text editor is oembed spec, so only accepts URLs of that spec. The solution offered above in this thread is a way of allowing to insert non-oembed script into your project which you ask your website application to parse for you.

Phil-

I guess am I doing this correctly then. I built a section like you said and it was so crazy at the code layer with all the switch and map stuff that I thought I was doing it wrong.

One of my editors complained there are no line breaks - so the solution I implemented was to make a line-break slice that they insert between each paragraph where they want it. And then I made specific slices for each kind of embed they have coming in.

The UX you outline make a lot of sense for a landing page, makes almost zero sense for long narrative news/blog posts. I guess our site is just a bad fit for Prismic, or any site with lots of text?

Line breaks should be possible if the output from the Rich text is being fed through the asHtml method and not the asText one.

We have many clients who build websites with a lot of text to create articles and blog posts such as https://www.amnesty.fr/ and education articles such as https://360learning.com/.

It all depends on what content you require to build your news/blog posts, you would then create these as Slices to build the pages, because like I said the text editor is not intended for building pages.

Would you be interested in scheduling a call with one of the team to discuss some of this?

I think I understand slices but maybe I'm missing something?

It's just a hard solution to get content editors on board with - they are used to posting blocks of text like MS Word and marking them up with small changes. The post-a-paragraph-per-slice and then insert more page elements as you need is clunky, so all the editors revert back to what they know and hit me up to make the rich text block work more fully.

Happy to chat on the phone if you can explain to me what I'm not getting.

Yeah, maybe there's something being lost in translation. Let's organise a call for some time this week to go over some of this?

Also, we do have an open feature request to extend the Rich Text Editor, so it's something that's in our plans.

Noor reached out to me to talk this over. I will sync with her next Monday and see what she says and report back guidance. I don't want to waste your time if this just isn't possible with your system.

Hey again,

It was nice talking with you and I was happy to get your feedback. For any changes to the rich text editor we'll update the thread above and Antoine is passing your feedback to the UX team who'll reach out whenever and testing begins.

Here's the code for the slice zone as we discussed:

This documentation will show you how to install this locally if you want to test this project out:

Thanks again for your time.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.