Develop Reference

Froala editor not working with fancybox plugin

all the things working correctly but when I add froala in fancybox popup then space, arrowkeys not working also when I click f key then act as full screen
please give me solution:
<textarea class="form-control froala-editor" id="comment"></textarea>
js:
$(function(){
$('.froala-editor').froalaEditor();//{'placeholder': 'Enter some text...'})
setTimeout(function(){
$('.froala-editor').froalaEditor('events.focus', true);
console.clear()
console.log('fired focus trigger!')
}, 2000)
$('.froala-editor').on('froalaEditor.focus', function (e, editor) {
console.log('received focus trigger')
});
});

you can try to use in IFRAME like below
or try use another one lik tinyMCE or CKEditor...
Modal recreates textbox so you need to rebind editor may be your current issue.
i wish tihs answer helps
<script type="text/javascript">
jQuery(function($) {
$('.open-fancy-box').on('click', function(e) {
e.preventDefault();
$.fancybox.open({
type: 'iframe',
src: 'youreditor.html'
});
});
});
</script>

The question is completely wrong - fancybox works fine with anything. In your case, you simply have to tell fancybox not to listen to keyboard events, and most likely you will want to disable touch events, too:
keyboard: false,
touch : false

How to catch fullscreen event of tinyMCE in Angular

I have add tinyMCE in may website which is using angular. I'm not able to catch full screen event of tinyMCE. I've checked the topic here and tried many method, but still no success.
-With the code below in editor setting I'm able to catch "change", "redo", "undo" event:
setting = {
selector: 'textarea',
...
setup: function(e) {
e.on('undo', function () {
some codes;
});
},
};
but 'fullscreen' seems not work here, neither the button on the toorbar, nor the one in the menu.
-I also tried to get it by finding the fullscreen class in the DOM:
if ( angular.element('.mce-fullscreen').length ) {
console.log('fullscreen');
}
Anyone have some hints, please? Thank you very much.

If you look at the source code for the fullscreen plugin you will see this line:
editor.fire('FullscreenStateChanged', {state: fullscreenState});
...so when you go to full screen the editor will emit the FullscreenStateChanged event. You can then use that event like this:
setup: function (editor) {
editor.on('FullscreenStateChanged', function () {
console.log('FullscreenStateChanged event fired.');
});
}

How to set focus on rich-text-field, in edit-mode of a contenttype?

I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?
This is what I tried so far:
(function($) {
$(document).ready(function() {
$('#text').focus() // Only works, when TinyMCE is disabled.
$('body#content').click() // Cannot click into TinyMCE's body.
$('#text_bold').click() // Cannot even click one of the editor's buttons.
setTimeout(function() {
// Tried same as above with time-delay, no luck.
}, 277);
});
$(window).load(function() {
// Tried the same as in doc.ready, no luck.
});
})(jQuery);

I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.
selector: "textarea.tinymce",
setup: function (editor) {
editor.on('mouseup', function (e) {
this.focus();
});
}

TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.
This is an old code I used (TinyMCE version shipped with Plone 4.3):
(function($) {
function checkTinyMCELoaded () {
if (window.tinymce==undefined || !tinymce.editors.length) {
setTimeout(checkTinyMCELoaded, 100);
return;
}
$('#text_ifr').contents().find(".mceContentBody").get(0).focus();
}
$(document).ready(function() {
setTimeout(checkTinyMCELoaded, 100);
});
})(jQuery);
It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.

ZeroClipboard doesn't work in first click

I'm trying to copy text to clipboard by using ZeroClipboard. It works good, but only in the second click on the button and not in the first click. I saw few solutions in Google but none of them fixed my problem.
I tried to put the ZeroClipboard events outside of the click button event, and also to put it inside the $(document).ready(function() and all of this didn't help.
Can you please help me solve this problem?
Thanks!
$("body").on('click','.copyToClipboard', function (event) {
var clientTarget = new ZeroClipboard( $("#copy_to_clipboard"), {
moviePath: "js/ZeroClipboard.swf",
debug: false
} );
$('#copy_to_clipboard').attr('data-clipboard-text', texttocopy);
alert(texttocopy);
clientTarget.on( "load", function(clientTarget)
{
$('#flash-loaded').fadeIn();
clientTarget.on( "complete", function(clientTarget, args) {
clientTarget.setText( args.text );
$('#data-to-copy-text').fadeIn();
} );
alert(args);
} );
});

I think you need to set up the zero clipboard before you click on it. In your code, you're not setting it up to handle clicks until you actually click on it. You should find all the objects on the page that need to handle clicks and set them up on document ready. something like this:
$(function () {
$('.copyToClipboard').zclip({ /* zclip settings */ });
});

How to prevent a jQuery Mobile collapsible from expanding?

I'm working with the JQM collapsibleset widget.
I need one collapsible to just be a button (that allows to add more elements to the set/accordeon), so when it's clicked, it should NOT expand (or collapse).
I'm using the following code to no avail:
$("div.ui-dynamic-tabs div.tab_add").on("collapsiblebeforeexpand", function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
return false;
console.log("foo");
});
with both the collapsibleexpand and the collapsiblebeforeexpand custom event I added to JQM to test whether this would help.
I can register all events and returning false also does prevent the console from being triggered. However... the collapsible still expands... :-(
I thought adding a beforeexpand event would prevent the subsequent code inside JQM to run when calling preventDefault on the event, but it still executes.
Question:
How do I stop the collapsible from expanding correctly by prevent execution of an event triggered before the expanding javascript is run?
PS: I'm also tagging with jQueryUI because both JQM and UI use the same widget factory and event mechanisms.

In jQuery Mobile 1.3.2, that event is called collapsibleexpand, and its default behavior can indeed be prevented.
You only have to write:
$("div.ui-dynamic-tabs div.tab_add").on("collapsibleexpand", function(e) {
e.preventDefault();
});

Here is the solution from JQM on Github:
$.widget( "mobile.collapsible", $.mobile.collapsible, {
_handleExpandCollapse: function( isCollapse ) {
if ( this._trigger( "collapsiblebefore" +
( isCollapse ? "collapse" : "expand" ) ) ) {
this._superApply( arguments );
}
}
});

As per frequent's answer, this is a modification that suits JQM 1.4:
$.widget('mobile.collapsible', $.mobile.collapsible, {
_handleExpandCollapse: function(isCollapse) {
if (this._trigger('before' + (isCollapse ? 'collapse' : 'expand'))) {
this._superApply(arguments);
}
}
});
Bind the event:
$('#mycollapsible div').on('collapsiblebeforeexpand', function(event, ui) {
if (someCondition)
event.preventDefault(); // prevent node from expanding
});