ckeditor on focus not working - javascript

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();
} );

Related

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.');
});
}

Table Focus event is not working in IE

I am using one event "tableFocusEvent" in YUI. It's working fine in FF but it's not working in IE.I tried to get similar event and use "focus" but that also not working.
Can anyone Please help me in this. Any help is appriciated.
My code is here
myDataTable.subscribe('tableFocusEvent', test);
function test()
{
alert("Hii");
}
Kailash you can try this one I think this must be helpful.You have mentioned in your question that you have used focus event please check below code have you used like this way -
var items = Y.one('#items');
items.on('focus', function (e) {
Y.log("testing for focus event");
});

Hyperlinks inside of nicEdit content and handling events using jquery

I have a nicEdit (a rich editor) on my page and I'm inserting hyperlinks in the content of nicEdit via setContent() method after creating an instance of class nicEdit. It all works fine. However, some of the content have hyperlinks in them with a class of "someclass." I want to be able to catch the click events of those hyperlinks in the content of nicEdit using jquery. I tried, the following:
$('.someclass').click(function () { });
$('.someclass').on('click', (function () { });
$('.someclass').live('click', (function () { });
$('.someclass').bind('click', (function () { });
But nothing works. May be I'm going about it the wrong way as I really didn't get into the internals of nicEdit. Is it possible to insert hyperlink(s) (or any element) into the content of nicEdit and try to handle the click events (or any events) with jquery? If so any code sample is appreciated. Thanks in advance.
I think I have something - I don't have all of your code for reference, but based on your clues, it seemed like this was fairly easy:
$(function(){
var myEditor = new nicEditor({fullPanel : true }).panelInstance('editor');
nicEditors.findEditor('editor').setContent(
'<a class="someclass" href="http://www.google.com">Click Here</a>'
);
$('.nicEdit-main').on('click','.someclass',function(){
alert('clicked');
});
});
Fiddle Sample
If you want to do anything more specific, you can also pass the event to the click handler and act upon those in a normal fashion.
Let me know if this resolves your issues.

ckeditor onChange event

i am using ckeditor,now i want to translate the content in onChange event using google translation api[is there any other methods ?]
so i think that i need the onChange event of ckeditor ,
i tried this but not working...
$('.CKeditor').ckeditor();
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
}
is there any possibilities ?
Note :: My Requirment is a text box that can enter arabic text[but i need a rich text editor] other methods are welcome!
Thank you.
There are some issues with the change event, try something like:
CKEDITOR.instances[name].on("instanceReady", function(){
this.document.on("keyup", function(){
t.text(CKEDITOR.instances[name].getData());
t.trigger("change");
});
});

add code for event listener for keypress in ckeditor

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.

Categories

Resources