I'm trying to call close function for CKEditor dialog box from my custom plugin. Just like it happens when you are clicking on smile in "smileys" plugin, but I can't find out how can I do the same in my own plugin.
Thanx for reply!
I've got the solution.
In my plugin I needed to call close function from "CKEDITOR.dialog.add" in "onLoad" section. So, I have to do this:
CKEDITOR.dialog.add( 'plugin_name', function( editor ){
onLoad: function( event ){
[...some code...]
event.sender.hide();
}
}
CKEDITOR.dialog.getCurrent().hide()
I propose you do it the same way it is done by CKEditor Dialog plugin internally. See line 535 in plugin.js
By clicking the button or firing the cancel event you ensure correct handling by the plugin.
Code sample:
// If there's a Cancel button, click it, else just fire the cancel event and hide the dialog.
button = CKEDITOR.dialog.getCurrent().getButton( 'cancel' );
if ( button )
CKEDITOR.tools.setTimeout( button.click, 0, button );
else {
if ( CKEDITOR.dialog.getCurrent().fire( 'cancel', { hide : true } ).hide !== false )
CKEDITOR.dialog.getCurrent().hide();
}
Related
I am trying to create a simple confirmation ("Do you want to close this window?") when closing a modal dialog page with the (X)-button.
What would be the most efficient way to implement this in Apex 5.0?
I tried to implement a solution using the dialog closed event, this seemed to have had no effects on closing the dialog with the (X)-button, however.
Try to create a dynamic action, on page load, in your modal page with that code:
Your da should execute a javascript code:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.unbind(); //remove the behavior
//put another behavior to the button
button.on('click', function() {
apex.message.confirm( "Your message here", function( okPressed ) {
if( okPressed ) {
apex.navigation.dialog.cancel(true);
}
});
});
Try to confirm if the "X" button have the css class "ui-dialog-titlebar-close", they can change between versions of apex.
If necessary, update the first line of the code with the correct class.
Have you considered hiding the button (x) and canceling the modal dialog page by clicking on the "cancel" button?
If you want to rename the standard button names in the confirmation window, use:
apex.lang.addMessages({"APEX.DIALOG.OK": pOkLabel});
apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});
I created a dialog in ckeditor.
editor.ui.addButton('blublu',
{
label: 'blublu',
command: 'blublu',
icon: this.path + 'icons/blublu.png'
}
);
editor.addCommand('blublu', new CKEDITOR.dialogCommand('blublu'));
CKEDITOR.dialog.add( 'blublu', this.path + 'dialogs/dialog.js' );
If I press the button the dialog shows, everything is fine. Now I try to open this window from another dialog :
( function() {
CKEDITOR.dialog.add( 'templates', function( editor ) {
return {
title: editor.lang.templates.title,
contents: [...],
onHide: function(){
if(condition)
//dostufff;
this.hide();
editor.execCommand('blublu');
}
}
}
});
It works the first time the editor is loaded. But if I open the dialog from the button in the toolbar, and I close it, I can't open the dialog from the 'templates' dialog. I have the dark background as if a dialog where shown, except the dialog, is not there. It is hidden and just shows it is not enough because all buttons handlers on it don't work.
I have no error in console.
Any solution?
I've tested it with existing plugins and it looks like you need to call execCommand asynchronously with setTimeout.
setTimeout( function() {
execCommand( commandName );
} );
If fix doesn't work for every browser, then you will have to add some short delay. I don't see better solution.
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.
Ckeditor call function after newpage button on the toolbar is clicked
Use 'afterCommandExec' and 'beforeCommandExec':
editor.on('afterCommandExec', handleAfterCommandExec);
function handleAfterCommandExec(event)
{
var commandName = event.data.name;
alert(commandName);
}
I found out how to catch the paste event:
editor.on('paste', your_cb_fn);
However this doesn't seem to work for the button actions:
// does nothing
editor.on('Bold', your_cb_fn);
editor.on('bold', your_cb_fn);
The solution may be to edit the plugins in _source/plugins to create triggers, though that is not ideal.