You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#100316 load uikit.min.js into editor iframe

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by sageman on Monday, 08 July 2019 18:04 BST

Thursday, 20 June 2019 19:00 BST

sageman
Hi,
as the title says, I would like to use uikit 3 in the backend, so that editors will see positioning of elements (using grid to position elements inside the article, rather then having to add an additional module).
I have created a custom backend template, so uikit js and css files are loaded in the backend. I adjusted component.php, thinking that jce iframe might be using this to load the content window. This seems not to be the case, I can see that the editor creates packed file.

Any hints on how to go about this?

Thanks,
Richard

Thursday, 20 June 2019 19:42 BST

Ryan
I'm not 100% sure this will work, but try this: Create a file called editor.js in media/jce/js/ and add the following to it: 

(function() {
	tinyMCE.onAddEditor.add(function (mgr, ed) {
		ed.onInit.add(function() {
		    var scriptLoader = new tinymce.dom.ScriptLoader();
                    scriptLoader.add(ed.settings.document_base_url + '/media/jui/js/jquery.min.js');
                    scriptLoader.add(ed.settings.document_base_url + '/templates/yootheme/vendor/assets/uikit/dist/js/uikit.min.js');
            
                    scriptLoader.loadQueue(function () {});
		});
	});
})();
You will need to update the jquery and uikit paths to the correct ones for your use case.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 24 June 2019 16:54 BST

sageman
Thanks for the fast reply!

I'm not 100% sure this will work, but try this:
Create a file called editor.js in media/jce/js/ and add the following to it:
...
You will need to update the jquery and uikit paths to the correct ones for your use case.


So, I used my path to the uikit file. The editor.js does get loaded.
But it does not seem to change anything inside the editor iframe head (Cache emptied).

Monday, 08 July 2019 10:16 BST

Ryan
The onInit event that is used in the script is the last event that is fired after the editor has been initialised and all content loaded and processed, so theoretically this should work, but this does all depend on the UIKit script requirements.

It might be worthwhile throwing this one over to Yootheme support, and see if they can shed some light on the issue.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 08 July 2019 18:04 BST

sageman
Hi Ryan,

yes, actually, the script does work now!
It was actually an issue with the template loading order of js scripts - once I placed UIkit all the way at the bottom, your script also worked.
I have some issues with the Joomla modal windows (not JCE related), but other then that, the approach works...

Thanks for your help!
Richard