programmers!
I am using ckeditor5 with strapi. But I could not figure out how to embed codepens. When I put recommended embed code by codepen itself, it just shows : See pen <a href="..."/>. If i inject the code with iframe it is just disappearing.
Anyone has ever done it ?
CKEditor plugin for Strapi allows to embed HTML snippets. See screenshot.
If the iframe code is visible in your Strapi dashboard, but it doesn't appear on your website (e.g. React app), it might be because of HTML Sanitization.
If your app uses something like DOMPurify, check How to allow an iframe tag in dompurify including all of its attributes.
If you don't need to stick to CKEditor, I recommend using Editor.js which has a plugin that offers a sanitized way to embed various services, such as CodePen. It's bundled by default with the Editor.js plugin for Strapi.
Related
I am working in SaaS website and they don't provide a better customization for the website,
so I ended up using the custom HTML & CSS & JS codes to customize the website.
The website is a single page application (SPA) built by Vue, and it uses custom routing
I wanted to change the link of (a tag) by vanilla javascript, it worked, but when I try to click on the link, it redirects me to the original route instead of the link I provided
For example:
This is the original that vue set
OLD
and this is the new that I set using vanilla javascript:
NEW
it shows the new one in the browser, but when I click on it, it redirects me to the old
how can I overcome this issue?
I'm trying to embed a script tag to render a form in a component. I can't figure out how to do this in React. If I took this tag and pasted it to an HTML document, the form would load perfectly, but I don't know how to do the equivalent with React.
I cant paste the actual code to embed on this site for work reasons, but I'm basically trying to embed this into a component so that a form renders and users can submit the form:
<script type="text/javascript" src="https://form.jotform.com/jsform/1234566789"></script>
Any ideas?
you can use the tag
const styles = {} // if you want to add some custom CSS
const URL = "https://form.jotform.com/jsform/1234566789" //embed URL
<iframe title="your title" style={styles} src={URL}></iframe>
read more about it HERE
I found a lovely node package that lets you embed Jotforms; you can find the NPM article here :
https://www.npmjs.com/package/react-jotform-embed
I made a component to easily embed JotForm.com forms to your ReactJS based websites or applications. It supports NextJS / Gatsby like SSR frameworks.
You also have access to some callbacks like onSubmit if you need.
You can access it here: https://npmjs.com/package/jotform-react
I want to use CKEditor5 in my Angular7 application and faced the following problem:
when I add a video from YouTube, using 'mediaEmbed' option in editor config, editor returns html like this:
<figure class="media"><oembed url="https://www.youtube.com/watch?v=6DDqkpR65Ak"></oembed></figure>
The browser shows an error because it does not have information about the tag oembed.
The documentation suggests using third-party services to convert this tag, but I think this is not a good idea.
How can I solve this problem?
Perhaps I should create a directive with the same name as this tag?
Or maybe create a custom button to insert a video - is it possible?
Perhaps there is a similar editor in which video insertion works out of the box and which supports the balloon menu?
I solved it using the following option:
htmlEditorConfig = {
mediaEmbed: {
previewsInData: true
}
}
And then in my HTML:
<ckeditor ... [config]="htmlEditorConfig"></ckeditor>
If you are using Angular, you will need to sanitize the string for Angular to display the media, with someting like:
import { DomSanitizer } from '#angular/platform-browser';
...
contructor(private sanitizer: DomSanitizer) {}
...
this.sanitizer.bypassSecurityTrustHtml(str);
This solution will only work with some providers (YouTube, Vimeo...), you'll find the full list in the docs.
==============================
According to the docs, here is how the previewsInData option works:
Including previews in data
Optionally, by setting mediaEmbed.previewsInData to true you can configure the media embed feature to output media in the same way they look in the editor. So if the media element is “previewable”, the media preview (HTML) is saved to the database:
<figure class="media">
<div data-oembed-url="https://media-url">
<iframe src="https://media-preview-url"></iframe>
</div>
</figure>
Currently, the preview is only available for content providers for which CKEditor 5 can predict the code: YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an code and it does not, so far, allow retrieving this code from an external oEmbed service. Therefore, for non-previewable media it produces the default semantic output:
<figure class="media">
<oembed url="https://media-url"></oembed>
</figure>
This means that, unless you limited the list of providers to only those which are previewable, you need to make sure that the media are displayed on your website.
In CKEditor5 it quite easy now to integrate the embed media feature by just :
install the media-embed package , npm install --save #ckeditor/ckeditor5-media-embed
add the 'media embed' to your toolbar config
As #jbgt mentioned previobale providers are limited, so maybe you need to use external libraries like iframely: https://iframely.com/docs/ckeditor as they recommend in the doc .. I hope they add an easier way to fix this..
I am creating a dashboard with the AdminLTE template, and I have a list section in which I can change the colors of the different sections of my web page.
What I would like to know is if there is a way to generate a preview of my web so that the administrator user of the dashboard can see the changes there.
I think it should not be easy, but I would like to know if there are different ways to achieve that, or if there is a plugin that is helpful.
Currently my project is done in HTML, Javascript and PHP
You can use an iframe to show the preview of your website in the admin dashboard.
Just add an iframe tag inside the dashboard panel like this,
<iframe src="https://www.your_website.com"></iframe>
Tip: To deal with browsers that do not support , add a text between the opening tag and the closing tag.
Tip: Use CSS to style the (even to include scrollbars).
I am working on vivvo template. Which is completed, now I have to integrate Accelerated Mobile Pages (AMP) in it. To reference amp js file use this
<script async src="https://cdn.ampproject.org/v0.js"></script>
but this file did't included in pages. And all reference files css and js after this line didn't loaded. I followed this link to use amp
Create Your First AMP Page
What am i missing. Please help. Thanks
Well for a start you can't use any other CSS files (inline CSS only) nor Javascript.
What do you mean "this file did't included in pages"? That piece of javascript is mandatory on an AMP page (it's what makes it an AMP page).
Also have you used the #development=1 option in Google Chrome? Append that to your URL and then reload the page with Developer tools open and look at the console to see errors.
I've blogged my own experiences creating AMP pages here: https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/ as there were a few funnies I didn't realise until I started implementing them.