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.');
});
}
Related
I have a window.blur function as follows
$(window).blur(function(){
_doing_something_wrong.resume();
$('#_put_an_eye_on_users_activity_modal').modal({show : true, keyboard: false,backdrop: 'static'});
});
and TinyMCE init as follows
tinymce.init({
selector:'._editor_statement_question',
setup: function (_editor) {
_editor.on("focus", function () {
$(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").show();
});
}
});
but whenever I am trying to type some content in editor ( _editor.on('focus',function(){} ) the window.blur function is firing, I mean the modal is showing up,
How can I avoid this only for editor focus,
I tried unbinding the blur function, but need a simple and clean solution, some hints please
TinyMCE vesrion - 4.x
thanks
I figured it out, Its because of the TinyMCE Iframe, So I managed my blur function as follows
$(window).blur(function(){
if($('iframe').is(':focus')) {
//do nothing
}
else {
_doing_something_wrong.resume();
$('#_put_an_eye_on_users_activity_modal').modal({show : true, keyboard: false,backdrop: 'static'});
}
})
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.
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 */ });
});
Just trying to do a simple on focus command with ckeditor and jquery.
var foo = // what can i do here to signal ckeditor?
$(foo).focus(function(){
$(".class1").hide();
$(".class2").show();
});
Maybe this is really simple and I'm just overlooking it but any advice or links are greatly appreciated.
Have tried:
CKEditor on focus remove default value
How to listen to basic events in CKEditor?
http://docs.ckeditor.com/#!/api/CKEDITOR.focusManager-method-constructor
http://www.mytechlogy.com/professionals/questions/forum-details/158/how-to-make-focus-in-ckeditor-using-js/?ref=related_posts#.U2EgUv3z3eI
http://ckeditor.com/forums/Support/jquery-click-event-not-working-textarea-ckeditor
Basic idea with CKEditor's events
CKEDITOR.on('instanceCreated', function (event) {
event.editor.on("focus", function () { //nothing to do with jQuery, this is CKEDITOR's on
$(".class1").hide();
$(".class2").show();
}
);
or
CKEDITOR.instances["editorID"].on("focus", function(){ //CKEDITOR's ON
$(".class1").hide();
$(".class2").show();
} );
I need to add an event listener for keypress after the CKEditor is loaded.
The code is something like:
CKEDITOR.instances.editor1.document.on('key', function(event) {
/* instructions */
});
Any idea where can I add the code for that? In which file or in what way?
Code to archive it is something like this:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
}
);
});
});
Edit - 2014 - Since this answer is still getting some upvotes, i felt it would be fair to point out, that it was meant for CKEditor in version 3.x. With the version 4.x there is a change event, which will trigger not only on key events but also after pasting, undo, redo etc.
In code its something like this:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('change', function (event) {
// change event in CKEditor 4.x
});
});
Do you need to track changes?
I was originally using the solution above, but I ended up replacing it with the OnChange CKEditor plugin. This is useful in some special cases - for example, if you add a link using the toolbar, keypress won't register anything.
Here's a code example, updated to use instanceCreated (install OnChange first):
CKEDITOR.on('instanceCreated', function(e) {
if (e.editor.name === editorId) { //editorId is the id of the textarea
e.editor.on('change', function(evt) {
//Text change code
});
}
});
Update: According to the answer above, CKEditor now has a built-in change event, so you don't have to install the plugin to use this solution anymore. You can still use the second line of code to apply the change to the instance of CKEditor you want to edit.
If the keydown logic makes sense for a given plugin, you can include it in the plugin's definition:
CKEDITOR.plugins.add('customPlugin', {
// definition keys...
init: function( editor ) {
// Plugin logic
...
// Register a keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
editor.on('key', function(event) {
console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin
}
});
I've tested some of the solutions proposed here and I got my anwser when I found this link: http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html
The following code worked like a charm:
editor.on('contentDom', function()
{
editor.document.on('keydown', function( event )
{
if ( !event.data.$.ctrlKey && !event.data.$.metaKey )
somethingChanged();
});
});
CKEDITOR.instances.editor1.on('change', function () { //Do something here.});
This code registers any change event including copy-paste.
You add that code in your page, or in a .js file included in your page. There is no mystery about that code.