I have a page where I have multiple editors with the class ".ckeditor".
I'm trying to update the values on blur, but blur does not trigger.
$(".ckeditor").on("blur", function() {
console.log("blur");
for (var i in CKEDITOR.instances) {
console.log(i);
CKEDITOR.instances[i].updateElement();// to update the textarea
}
});
Anyone know if they've totally changed its behaviour in ckeditor 4?
Try adding the event in a way like so
CKEDITOR.instances.editor1.on('blur', function(e) {
console.log('onblur fired');
});
Related
I'm working on an iPad app using Kendo and the DropDownList is throwing an ActionSheet. I'd like to force it to use the Web UI list style. How can I do this?
For anyone interested I was able to hack together a solution. Here's a function that accepts a kendoMobileView as the argument and applies the fix.
//Hack to force dropdowns to act like comboboxes in mobile!
utils.fix.dropdownlists = function(view) {
var dropdowns = view.element.find("[data-role='dropdownlist']");
//Iterate through dropdown elements
_.each(dropdowns, function(item){
var comp = $(item).data("kendoDropDownList");
if(comp && comp.popup) {
comp.popup.bind("open", function(event){
event.sender.element.parent().removeClass("km-popup km-widget");
if(event.sender.element.parent().hasClass("km-popup")) {
//Prevent default open animation.
//Then remove classes and open the popup programitcally
//Easy peasy, Lemon squeezy
event.preventDefault();
event.sender.element.parent().removeClass("km-popup km-widget");
setTimeout(function(){
event.sender.open();
},0);
}
});
}
});
}
Anybody figure out syntax to re-render a template on window resize, using Meteor.js? I tried doing a Meteor.flush(), but that doesn't seem to be the right approach.... :(
window.onresize = function(){
Meteor.flush();
};
Change some session value when resizing the window, and then just have the template listen for that change:
<template name="body">
{{touch}}
</template>
Template.body.touch = function() {
return Session.get("touch");
}
Meteor.startup(function() {
$(window).resize(function(evt) {
Session.set("touch", new Date());
});
});
Meteor docs provides a good example for this scenario, by the way of adding window dimensions as a Client-side global Reactive data source, which could be called on
Template->autorun()
https://guide.meteor.com/data-loading.html#stores
I have a ckeditor plugin and inside the init: I want to capture the click event so I can do something.
CKEDITOR.plugins.add('Columns',{
init : function(editor) {
editor.on('doubleclick', function(ev) {console.log('hello');}); // Works
editor.on('focus', function(ev) {console.log('hello');}); // Works
editor.on('click', function(ev) {console.log('hello');}); // Does not work
editor.on('mousedown', function(ev) {console.log('hello');}); // Does not work
}
});
Any Ideas???
EDIT:
OK could not get click working, I believe we need to create an event for that. However thanks to this post: http://alfonsoml.blogspot.com.au/2011/03/onchange-event-for-ckeditor.html
I managed to use 'saveSnapshot' which seems to fire each time I click so this now works
editor.on('saveSnapshot', function(ev) {console.log('hello');}); // Works
I realise this is old but it doesn't have an answer to the original question.
CKEDITOR.plugins.add('Columns',{
init : function(editor) {
editor.on('instanceReady', function (e) {
this.container.on('click', function (event) {
console.log('hello');
});
});
}
});
Note: this won't work when CKEditor is in 'classic iframe mode'. Instead, you'll need to use this.document (see: document property) to get a reference to the iframe.
I have:
$('.image.txt_over').hover(function(){
$(".screen", this).stop().animate({top:'165px'},{queue:false,duration:300});
$(this).fadeTo("slow", 1);
}, function() {
$(".screen", this).stop().animate({top:'226px'},{queue:false,duration:460});
});
and I am trying to keep the jquery hover effect once a new set of images are refreshed via Ajax. Currently the jquery is killed once the Ajax refreshes.
I think I need .delegate() or .live() but cant seem to get either to work. Still learning jquery.
Try this:
$('body').delegate('.image.txt_over', 'mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(".screen", this).stop().animate({top:'165px'},{queue:false,duration:300});
$(this).fadeTo("slow", 1);
} else {
$(".screen", this).stop().animate({top:'226px'},{queue:false,duration:460});
}
});
Does anyone know how I can attach an onpaste event in CKEditor 3.x?
I basically want to grab CTRL + V data and add few text to it and then add it to the editor.
I have looked around but have not found a definitive answer. CKEditor forum is of not much help.
This should do the trick
var editor = CKEDITOR.instances.YourInputControlName;
editor.on('paste', function(evt) {
// Update the text
evt.editor.setData(evt.editor.getData() + ' your additional comments.');
}, editor.element.$);
Your both examples are a little bit synthetic.
At first, editor.getData() gets all the content of editor, so if you want to process only pasted data, you need to get ev.data.html and paste to correct place.
editor = CKEDITOR.instances.editor1;
editor.on('paste', function (evt) {
var editor = evt.editor;
evt.stop(); // we don't let editor to paste data, only for current event
// show loader that blocks editor changes
$.post('clean.php', {html: evt.data.html}, function (data) {
editor.insertHtml( data.html ); // text will be inserted at correct place
// hide loader
}, 'json');
});
Don't use functions editor.setReadonly(true/false), you won't be able to paste text in correct place (in cases with async data processing).
This example edits the content to be pasted by removing all img elements.
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.on('paste', function (ev) {
ev.data.html = ev.data.html.replace(/<img( [^>]*)?>/gi, '');
});
});
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
var data = evt.data.dataValue;
if (window.chrome || window.safari) {
// removing span wrapper on webkit browsers.
data = $(data).html();
}
evt.editor.insertHtml(data);
});
I know it's an old question, but thought I'd add my version of aliaksej's answer as it allows the use of a custom 'cleaner' - it didn't quite work for me until I modded it as below.
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
$.post('/actions/clean.php', {html: evt.data.dataValue}).done(function (data) {
evt.editor.insertHtml(data);
}, 'json');
});