CKEditor with MVC: Event handling - javascript

I have the following code, which generates my default CKEditor on my form:
$('#Content').ckeditor({
filebrowserUploadUrl: '/ControlPanel/Reviews/UploadReviewImage/'
});
As you can see, my implementation is quite simple - most settings are controlled in config.js and are global to my site, except the uploader handlers.
Been looking for a few days, but can't find anything concise. I need to be able to detect when CKEditor is clicked, and make the window larger (though not full screen). I also want to display some help text when CKEditor is clicked... but I can't figure out how to handle dom events, or apply JQuery events to it? I've tried a few different things, the following being my latest attempt:
$("#Content").ckeditorGet().click(window.showDescription);
But I get a TypeError:
Uncaught TypeError: Object #<Object> has no method 'click'
Which is understandable, as CKEditor has its own event system.
The CKEditor documentation seems very unintuitive - and the examples aren't really much help.
UPDATE
I managed to get this working on my own, though because of thw way I've written my window.ShowDescription function, I needed to pass a JQuery event in to it. Here's the code for anyone interested :)
$("#Content").ckeditorGet().on("instanceReady", function () {
this.on("focus", function () {
this.resize(638);
// Mimic JQuery event for textarea
var originalEditor = $(this.container.$).parents(".input").find("textarea");
originalEditor.trigger(jQuery.Event("focus"));
});
this.on("blur", function () {
this.resize(400);
});
});

As you already suspected, what you did above won't work. The ckeditorGet method returns an instance of an editor, not the DOM element of the editor.
You can use the focus event of ckeditor to determine what to do when the editor receives focus.
Example:
$("#Content").ckeditorGet().on('focus', function(e) {
// do what you want on focus
});
May I suggest enabling the autogrow plugin to change the content area size? It's more generalized to the size of your content, and may work better than trying to resize on your own.

Related

Why only single change event is working on select element in jQuery?

I need to change behavior of jQuery library (date range picker), it have code like this:
box.find('.month').off("change").change(function(evt) {
dateChanged($(this));
});
box.find('.year').off("change").change(function(evt) {
dateChanged($(this));
});
Those are two select elements. It don't return false and functions inside handler don't access the event. But for some reason my events that use delegation doesn't work. They are ignored.
$picker.on('change', 'select', function() {
console.log('CHANGE');
});
The console log is not executing, but if I remove previous lines from the library, my event delegation code works fine.
NOTE: $picker is object in my code that is parent of box element. But I also have event added on $(document) that is also not working.
First time I see something like this. Adding event directly to element, prevents event propagation. Can someone explain what is happening here? Is this documented anywhere?
This happens in Firefox and Chrome.
If someone need simple example, I can create one. But thought that this is self explanatory.
EDIT: I've created a simple reproduction and it works fine. I have complex application with a lot of files (R Shiny Application), but I don't see any change events in dev tools. Are there any way of making the event not propagate? Maybe using event capturing. What should I search for in order to find the code that is preventing the events from propagating?

Detect any change in editor content - CKeditor 5, via javascript

I've looked at the CKEditor 5 documentation, but still can't work out how to get a simple javascript alert('hello') to fire when any balloon editor region is clicked on in my page. Any clues very much appreciated!
Okay, so the answer is actually very simple, just bind an on click event to the element, in this case via the CKEditor class, using JQuery as below:
$(document).on('click', '.ck-editor__editable_inline', function(e) {
// do something
})

How and when to use onDragCol in flexigrid jQuery

I am new in using flexigrid.js and I am wondering how and when to use this onDragCol event. I read some code inside of flexigrid.js and it seems that this is an event handler when you finished re sizing the column width.
I tried testing it by setting onDragCol to a function, like onAddCellProp...
onAddCellProp: onAddCellProp,
onDragCol: onDragCol
then I created the function
function onDragCol(columnNumber, columnTable) {
alert('hi');
}
then I tried resizing the flexigrid column but with no luck wasn't able to fire the onDragCol event. There was no error in firebug regarding javascript and onAddCellProp is normally working and other js implementations.
My question is: How and When can I use onDragCol?

Wrote alternative to jQuery Accordion, it spazzed. Why?

I wrote an alternative to the jQuery Accordion, as that didn't offer multiple open section support (any idea why they opted to not include support for that? What's the history there?). I did some research on StackOverflow, as well on Google to see what other options others came up. I needed something that could be used on the fly on multiple elements.
After seeing several solutions and experimenting with them, in the end, I wrote my own version (based on Kevin's solution from http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once , but heavily modified).
jsFiddle can be found here: http://jsfiddle.net/3jacu/1/
Inline Code:
$(document).ready(function(){
$.fn.togglepanels = function(){
return this.each(function(){
h4handler = $(this).find("h4");
$(h4handler).prepend('<div class="accordionarrow">▼</div>');
$(h4handler).click(function() {
$(h4handler).toggle(
function() {
barclicked = $(this);
$(barclicked).find(".accordionarrow").html('►');
$(barclicked).next().slideUp('slow');
window.console && console.log('Closed.');
return false;
},
function() {
barclicked = $(this);
$(barclicked).find(".accordionarrow").html('▼');
$(barclicked).next().slideDown('slow');
window.console && console.log('Open.');
return false;
}
);
});
});
};
$("#grouplist").togglepanels(); }
Oddly, the accordion arrow at the right side stopped working once I pasted it in jsFiddle, while it works in my local copy.
In any case, the issue is that toggling isn't working as expected, and when it does, it fires duplicate toggle events which result in it closing, opening, then ultimately closing the section and it won't open from that point on (it toggles open then closes back). That's assuming it works! At first, it won't work as it doesn't respond. I think there's a logic error somewhere I'm missing.
From what I wrote/see in the code, it searches the given handle for the corresponding tag (in this case, h4), pops the handle into a variable. It then adds the arrow to the h4 tag while applying the accordionarrow class (which floats it to the right). It then adds a click event to it, which will toggle (using jQuery's toggle function) between two functions when h4 is clicked.
I suspect the problem here is that I may be mistakenly assuming jQuery's toggle function will work fine for toggling between two functions, that I'll have to implement my own toggle code. Correct me if I'm wrong though!
I'm trying to write the code so it'll be as efficient as possible, so feedback on that also would be appreciated.
Thanks in advance for your time, assistance, and consideration!
You have the toggle binding (which is deprecated by the way) inside of the click binding, so a new event handler is getting attached every time you click the header.
As a random aside you should also fire events within the plugin (where you have the console lines would make sense) so that external code can react to state changes.
I believe your issue is the $(h4handler).click(function() { you have wrapped around the toggle listener. Essentially what this was doing was making so every click of the tab was adding the toggle listener, which was then also firing an event. Removing the click listener will have the behaviour you expect.
You forgot to paste the trailing characters ); to close the function call to jQuery function ready. Fixed: http://jsfiddle.net/LeZuse/3jacu/2/
UPDATE: I've just realised I did not really answer your question.
You are duplicating the .toggle functionality with binding another .click handler.
The doc about .toggle says:
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
Which means the click event is already built in.
NOTE: You should use local variables instead of global, so your plugin won't pollute the window object. Use the var keyword for this:
var h4handler = $(this).find("h4");

How to listen to basic events in CKEditor?

I can't figure out how to listen to focus, click, onKeyUp and other basic dom events in ckeditor. In the events summary there is only a few events regarding the lifecycle of ckeditor. And the "textArea" of ckeditor is an iframe, and it's html itself, so it is not clear on what dom node to listen.
It's not a big deal, just do the following, works for focus, blur, click etc.
var ckeditor = CKEDITOR.instances['textArea_id'];
ckeditor.on('focus', fnHandler, context, data, priority);
or a jQuery example :
$(document).ready(function () {
$('#YOUR_TEXTAREA_ID').ckeditor(ckeditor_config);
CKEDITOR.instances.YOUR_TEXTAREA_ID.on('blur', fnHandler);
});
I don't know when this support appeared, but it definitely works for 3.5.x
CKEditor actually has built-in event handling in the object. See this article for an explanation: http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html
So, to catch a modification in a CKEditor instance you could do this:
CKEDITOR.on('currentInstance', function(){modified = true;});
Also, it appears that version 3 has an event processor built into it that's more straightforward: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.file.html#eventProcessors
CK is a bit convoluted and documentation has holes, but based on its ability to gracefully handle Word generated HTML it gets my vote as the best option out there.

Categories

Resources