How do I add an Iframe Block in Grapejs? - javascript

I want to let my users add Iframe-Content to their page that they create via GrapeJS.
For this I want to add an IFrame-Block to the GrapeJS editor, but I'm struggling to get it to work. Can anybody help?
There is this SO answer, but it only works for an older version of grapejs.
There is this plugin, but it also doesn't work for the current version
There should be a FrameComponent, but If I define a block with type "iframe", I get 'TypeError: m.render is not a function'

This was solved in the newest version
https://github.com/artf/grapesjs/releases/tag/v0.20.1
Thank you!

Related

'content' not Available for ui.Popup

Im using rappid for my current project.
Im trying to use ui.Popup for my element.
But for i don't know why, the 'content' option is not available for me.
In the docs, it said it need the content option for the contents.
https://resources.jointjs.com/docs/rappid/v3.4/ui.html#ui.Popup
But, when i press ctrl+space to see the available options, it doesnt have content. and if i add it manually, it just gives me error.
here's the picture, cant post picture coz its the first time i post a question:
[https://i.ibb.co/nf6Zz1h/error.png][1]
Do i need to use other options that listed in the option? is the doc not updated?
Thanks!
This was a TypeScript bug as the types were not provided for ui.Popup in version 3.4. It has been fixed in version 3.5, so you should not get the same error.
A temporary fix for version 3.4 is adding //#ts-ignore above the line where the TypeScript error is.

Uncaught TypeError: jQuery(...).fancybox is not a function |fancybox used in wordpress

I have a wordpress website and I want to show my video using fancybox, so I tried wp plugin like "fancybox for wordpress" and "easy fancybox".
But both of them give me the error message "Uncaught TypeError: jQuery(...).fancybox is not a function".
I search for many questions on here and found this can be jquery conflict, but I cannot figure out where is it.
here is my site http://skyblueenglish.co.uk
Notice that I only have one of above plugins at one time.
as per my thinking and till i have checked, what happen is,
in word-press you have included fancybox jQuery and it will obviously installed when you have installed the plugin. Now what happen is ,while using some JS function or JS Class it is mandatory to include jQuery file before we use/include the third party JS.
I checked the "View Source" for your page.
<script src="http://skyblueenglish.co.uk/wp-content/themes/skybluetheme/js/jquery.min.js"></script>
and i found that above JavaScript file is included in the footer.
i just removed that line and put it before
<script type='text/javascript' src='http://skyblueenglish.co.uk/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
and the error is Gone.
so what you have to do is, you have to find your footer, find the included jquery.min.js . remove it from the footer and include it from header.
Let me know if you dont understand anywhere.
;( function( $ ) {
$(document).ready(function(){
$(".fancybox").fancybox({
//....
});
});
} )( jQuery );
I did so many experiments on same topic and also tried with many different way to solve according to wherever I found similar topics on internet but trust me nothing worked out for me and then finally I simply tried to see what exactly error says:
Uncaught TypeError: $(...).fancybox is not a function
and for which I simply removed a line which was saying if($.fn.fancybox!==null).
I am not strong enough to understand Javascript or Jquery thing being fresher so I just tried with simple logic and it worked for me lol.
This might not be the right solution but just thought to share my experience so maybe for someone it may work too.
It worked properly without loosing any function by removing below code
if($.fn.fancybox!==null)
{$("a[class^='fancyBox']").fancybox();
$("a[class^='fancybox-thumb']").fancybox(
{helpers:{title:{type:'outside'},thumbs:{width:50,height:50}}});}
Thank You!

Can't destroy CKEditor instances

I'm trying to refresh all my CKEditor instances using this code:
for(name in CKEDITOR.instances)
{
console.log(name);
CKEDITOR.instances[name].destroy();
//Also tried this
//CKEDITOR.instances[name].destroy(true);
}
CKEDITOR.inlineAll();
and I'm receiving this:
Uncaught TypeError: Cannot call method 'getRanges' of null.
The interesting part is that, if I use the code directly in the console, it works just fine.
Anyone has any idea on how to solve it?
Check this bug report: http://dev.ckeditor.com/ticket/10219
In 4.1 and 4.0.3 we have partially fixed this issue, but... only partially :). However, this error shouldn't cause any problems - it is completely harmless.
I also had the same issue but it seems to be fixed in ck-editor-dev repositories.
Somebody checked in a fix 2 days ago for CKEDITOR 4.1.1 milestone.
Check http://dev.ckeditor.com/ticket/10219 again to access the change link in git.

jQuery fancybox not working in IE7

I've got a problem in good old IE7, as one of my clients is still using it.
For some reason, fancybox doesn't open and just throws a JS error in the jquery file itself.
I've tried debugging it, but have not found the solution as of yet.
Can you guys help me out here?
The site is http://beta.baeckerei-glasenapp.de/filialen/ and, as you can see in other browsers, the fancybox should open once you click on one of the 9 elements.
BTW: The HTML is generated by my CMS, so please excuse the "dl>a", which is nit valid HTML5 AFAIK.
Thanks
Tobias Timpe
There is a new version, which may solve the issues you are struggling with:
http://fancyapps.com/fancybox/

using jQuery in Safari Extension

I am trying to make a simple Safari 5 Extension that just injects a custom javascript. Any ideas how can I make use of jQuery in this custom script, please? I only know it's possible, because it is mentioned on one of WWDC videos, but I don't know how to do it.
Thanks
You can include jquery.js as a "start script". Your regular script (as an "end script") will see it.
I believe that if you don't need to keep jQuery updated, just copying the source code of jQuery into your extension's code base should work.

Categories

Resources