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..
Related
I'm trying to develop a chrome extension and I want to mimic how browsers are able to grab a screenshot or logo of a website by only its link. You usually see it when you open a new tab. I'm using json, javascript, css and html.
Below is the examples of those.
(https://i.stack.imgur.com/upxrr.png)(https://i.stack.imgur.com/KKMpb.png)
I've tried to search for within the Chrome API Documentation, but I couldn't find anything on it. I've also tried to use iFrames, but they are extremely insufficient and they don't resize well on a smaller display.
Do you have an specific use case for that?, if not i think you could save a lot of time implementing it yourself.
You could import a custom png or svg file and wrap it with a tag
<a href="link">
<img src={yourImgSrc} width={} height={}></img>
</a>
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.
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 create an image or pdf from a html. The html consist of images with css filters like sepia, gray-scale etc. So it would be better if anyone have worked on that.
<img class="dj_rot" src="/940/images/photos.png" style="filter: sepia(1);">
<img class="dj_rot" src="/940/images/photos.png" style="filter: grayscale(1);">
Thanks
Deepak
You could use "html2canvas" is a opensource script that allows you to take "screenshots" of webpages or parts of it
https://html2canvas.hertzen.com/
You will see many examples of how to use in the same webpage
If you want to create a PDF you could use a jsPDF is another option based on Javascript
http://rawgit.com/MrRio/jsPDF/master/
Also you will find the documentation with examples and source code
If it is not enough you could use and API that allow that, You only need to establish a URL and then you receive the image
https://screenshotlayer.com/
Screenshotlayer (Free, Powerful Screenshot API)
url2png (Screenshots as a Service)
urlbox.io (Website Screenshot as a Service API urlbox)
screenshotmachine (Screenshot machine)
Browshot (Service for real time website screenshots)
You could review a link with more information
What's the best website screenshot capture API?
https://www.quora.com/Whats-the-best-website-screenshot-capture-API
Have you tried taking a screenshot of the HTML? To take a screenshot you should hit command+shift+4. The number 3 takes a screenshot of the entire screen, while the number 4 allows you to select what it will take a screenshot of.
You might want to use pdf converting tools like html2pdf of mPDF for PHP.
I have used html2pdf successfully in the past, but I am pretty sure both of them have a good support for CSS.
Its look weird but i am not getting where is the documentation of google docs viewer to embed in my website. https://docs.google.com/viewer here is link where I can only generate links. Actually i want to increase or remove the timeout check because i cant view files with big sizes. Here is what i am doing right now
<iframe id="iframe1" src="www.urltopdf.pdf&embedded=true"width="1000" height="800" ></iframe>
and with big files getting following error.
Sorry, it took too long to find the document at the original source. Please try again later.
You can also try to download the original document by clicking here.
Here is a page with a form that generate a link to the document viewer : https://docs.google.com/gview
[EDIT] Google may have deprecated this functionnality.
In this page, there is a very minimal documentation that you may already have seen, but I didn't find any other documentation about it, and the search "gview" gave 0 result in developers.google.com.
There are also other similar issues about Joomla or Wordpress plugins using this viewer.
As an alternative to this viewer, if you host these files in Google Drive, you can use the google drive's built-in preview functionnality :
<iframe src="https://docs.google.com/file/d/fileID/preview" width="640" height="480"></iframe>
You can easily access to this from any previewed document from Google Drive by clicking on ⋮ then integrate element.