I'm developing an enhancement extension for a website. I use CKEditor to add a WYSIWYG editor to the forums.
However, I've noticed that CKEditor only loads after every resource (body onload) has loaded (body onload). Most people in the forums use 5MB+ GIFs, so this really affects the load time.
Since all the javascript files are in the extension, file sizes aren't the problem. I'm not using jQuery either.
Is it possible to alter CKEditor or something so it runs only when the DOM is loaded?
As #Reinmar suggested, I've used CKEDITOR.replace() and now I can load it before body onload.
CKEDITOR.replace("id");
Related
I have an HTML page where JavaScript can be added into the header, but nothing else in the HTML can be edited. The JavaScript can be added inline or be an external file - it doesn't really matter.
I've come across a lot of JavaScript libraries that allow you to lazy load images, videos, iframes, etc. However, they all require that you use data-src instead of the normal src for images. Since I can't edit the HTML, that doesn't work for me.
And obviously - using native lazy loading won't work for me in this case since the HTML can't be changed.
Is there any way to lazy load with pure JavaScript and not have to change anything in the HTML?
CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?
If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow
I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).
How to load CSS with images and audio file using load manifest?
With or without use of createjs and preload js?
I want to load it first then append it in main? is this possible to do so or not?
Check out the examples in the PreloadJS GitHub - for example the MediaGrid loads all of the supported file types, including CSS, Audio, and images.
http://createjs.com/Demos/PreloadJS/MediaGrid.html
https://github.com/CreateJS/PreloadJS/
Note that due to browser limitations, CSS is always added to the DOM immediately. This is because when you are loading using Tags (instead of XHR), it has to be in the DOM to load, and we wanted tag and XHR loading to be consistent.
as the question states, I wish to embed a tinymce editor in a PyQT webkit component.
As far as I understand, evaluateJavascript allows for js functions to be called.
However, when I try loading tinymce.min.js, the editor does not display anything at all. As suspected, when evaluating a javascript that 'loads' other javascript files, they don't actually get loaded.
At this point, I feel lost. I will try to manually load 'plugins' that will be specified in tinymce's init function and will update this.
Till that time, any help would be really appreciated.
EvaluateJavaScript does make javascript function calls, or embed a whole javascript file. The following details out the attempts to solve the problem:
The approach of first reading the tinyMCE.js file and then using that in an evaluatejavascript method embeds the javascript somewhere, and can't be sniffed out in a webkit console. When loading files using the evaluatejavascript method, any dependencies, such as the ones that tinymce require, are not loaded. I think it's because javascript calls are "attached" to the webkit but not embedded in the frame's DOM itself.
The second approach consists of creating a webkit page and loading an html file. The html file itself embeds the javascript, so the component works like a "browser". In tinymce's configuration, toolbars and unnecessary parts were hidden. TinyMCE version 3 worked well with PyQt4. When the 4th version was embedded in an html page however, textareas were not being converted to tinymce editors. The console itself shows 'undefined' error messages, deduced to the assumption that tinymce 4 uses different javascript syntax and a different compiler.
And so ends my quest to write a stand-alone webkit editor. :)
The way JQM loads pages is by getting the element with the attribute data-role="page" via ajax, and not the whole document.
So, how do I make JQuery Mobile load the styles and scripts from any page (or a refresh), rather than only loading them in the entry point (index.htm)?
Just put them into the BODY tag.
It is described in my other answer: Why I have to put all the script to index.html in jquery mobile
Thanks, I had all my JS on one file, but the jquery, jqm, and jqm css files needed to be on each page too. What I ended up doing was including a script on each page body that checks if the scripts exist. If they were not there, they would be dynamically added.
It would be like this
if (document.getElementsByTagName('script') < 3)
{
createElement
setAttribute
append inside head element
//repeat for each script / styleshet
}
else
//do nothing
If I went the route of including all the files in the body, there would be a redundancy of the assets being requested on each page change. I believe this gets around it. It seems to work so far.