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.

#104693 Live-update div from JCE in frontend

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 sjudder on Tuesday, 07 July 2020 14:50 BST

Thursday, 25 June 2020 15:37 BST

sjudder
Heyh JCE-ppl,

I'm working on a project where we gather form elements and presenting them in a "preview". By jquery 3.3.1 we live update the preview of form fields and image uploads.

Now my issue is that I can't get the .keyup event to trigger from within the iframe created be JCE.

$('body.mceIframeContainer', $('iframe#description_ifr').contents()).on('change keyup paste click focus', function(e) {
alert('testing');
});

binding and observe alså does not work.

Is it posible to get the live typing, pasting of content to go to parentwindow and update the div container?

Should i build it into the iframe? and what files wwould that be to modderate?

PS: I can transfer the content just fine by adding a button outside the iframe.

Thanx

Wednesday, 01 July 2020 19:32 BST

Ryan
This is best done using the API, eg: 

(function() {
	tinyMCE.onAddEditor.add(function (mgr, ed) {
		ed.onNodeChange.add(function() {
			var content = ed.getContent();
			
			// update external forms etc. with content
			console.log(content);
		});
	});
})();

Ryan Demmer

Lead Developer / CEO / CTO

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

Tuesday, 07 July 2020 12:13 BST

sjudder
Heyh Ryan, That got me some of the way 🙂 - so that for leading me on. .onNodeChange only updates on "enter"-pressed. This code did the trick :) 

(function() {
	tinyMCE.onAddEditor.add(function(mgr, ed) {
		ed.onKeyUp.add(function() {
			var content = ed.getContent();
			$('.livepreviewdfull').html(content);
			console.log("We are updating content - please hold");
			console.log(content);
		});
	});
})();

Tuesday, 07 July 2020 12:41 BST

Ryan
If you are using keyup it's probably a good idea to debounce the callback, eg: 

(function() {
	function debounce(callback, time) {
    	    var timer, func;

    	    func = function () {
        	var args = arguments;

        	clearTimeout(timer);

        	timer = setTimeout(function () {
            	callback.apply(this, args);
        	}, time);
    	    };

    	    func.stop = function () {
        	clearTimeout(timer);
    	    };

    	    return func;
	}
	
	tinyMCE.onAddEditor.add(function(mgr, ed) {
		var keyup = debounce(function (e) {
			var content = ed.getContent();
			$('.livepreviewdfull').html(content);
			console.log("We are updating content - please hold");
			console.log(content);
                }, 200);
        
                ed.onKeyUp.add(keyup);
	});
})();

Ryan Demmer

Lead Developer / CEO / CTO

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

Tuesday, 07 July 2020 14:50 BST

sjudder
Thanx Ryan,

That makes sense, I will have to apply this for other fields aswell then and have a closer look at the functions resource usage.