When using ckeditor links, images and table properties dialogs if the user clicks on cancel, CKEDITOR will check if anything has changed and if so prompts the user with js confirm popup.
How can I disable this prompt on cancel; no other dialogs in our webapp prompts on cancel and this is not consistent.
There doesn't' seem to be a way to get a list of all the handlers for an event to remove the one that's doing the prompt.
I don't want to specify a custom isChanged for each and every dialog item to hack a fake nothings changed.
Is there a standard way to override the base on('cancel',...) event handlers in CKEDITOR? I see that I can monkeypatch the dialogdefinition.OnLoad, OnOK, OnCancel handlers but this forced cancel prompt I'm referring to is not being done in the dialog's OnCancel.
I'm using the latest version 4.2
This is now a supported configuration option in version 4.3. Just specify config.dialog_noConfirmCancel = true when you create the dialog.
Check out http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-dialog_noConfirmCancel
You where very close. In fact it is in fact is the onCancel event.
There is a ticket for this problem that also includes a workaround:
CKEDITOR.on('dialogDefinition', function(dialogDefinitionEvent) {
if (dialogDefinitionEvent.data.name == 'link') {
var dialogDefinition = dialogDefinitionEvent.data.definition;
// Get rid of annoying confirmation dialog on cancel
dialogDefinition.dialog.on('cancel', function(cancelEvent) {
return false;
}, this, null, -1);
}
});
If you leave out the if (dialogDefinitioNEvent.data.name == 'link') statement it would disable the check for all dialogs.
The -1 handler parameter is the key here, as it inserts the handler before the dialog plugin's default handler, which will never be invoked because the return false cancels the bubbling of the cancel event to the other registered event listeners.
CKEditor Ticket #8331: Ability to ignore "Confirm Cancel"-warning on dialogs
I can confirm that the latest version of ckEditor works with the "noConfirmCancel" attribute.
A snippet of my working code is as follows:
<script type="text/javascript" src="#ckBasePath#/ckeditor.js" language="JavaScript"></script>
<script>
thisConfig = CKEDITOR.config;
thisConfig.autoParagraph = true;
thisConfig.fillEmptyBlocks= true;
thisConfig.dialog_noConfirmCancel = true;
objSample = CKEDITOR.replace( 'Sample' , thisConfig);
</script>
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-dialog_noConfirmCancel
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've created a Kendo Scheduler that binds to a remote data source. The remote datasource is actually a combination of two separate data sources. This part is working okay.
Question is... is there any way to prevent certain events from being destroyed?
I've stopped other forms of editing by checking a certain field in the event's properties and calling e.preventDefault() on the edit, moveStart and resizeStart events if it should be read-only. This works fine, but I can't prevent deletes.
Any suggestions greatly appreciated.
Just capture the remove event and process it as you have with the edit, moveStart, and reviseStart events. You should see a remove event option off the kendo scheduler. I can see it and capture it in version 2013.3.1119.340.
I think better way is to prevent user from going to remove event in the first place. Handling the remove event still has its validity as you can delete event for example by pressing "Delete" key).
In example below I'm assuming event has custom property called category and events with category equal to "Holiday" can't be deleted.
remove: function(e)
{
var event = e.event;
if (event.category === "Holiday")
{
e.preventDefault();
e.stopPropagation();
}
},
dataBound: function(e)
{
var scheduler = e.sender;
$(".k-event").each(function() {
var uid = $(this).data("uid");
var event = scheduler.occurrenceByUid(uid);
if (event.category === "Holiday")
{
// use .k-event-delete,.k-resize-handle if you want to prevent also resizing
$(this).find(".k-event-delete").hide();
}
});
},
edit: function (e) {
var event = e.event;
if (event.category === "Holiday")
{
e.container.find(".k-scheduler-delete").hide();
}
}
FYI, you can do this...
#(Html.Kendo().Scheduler<ScheduledEventViewModel>()
.Name("scheduler")
.Editable(e => e.Confirmation(false))
)
which will deactivate the default confirmation prompt for the scheduler. Then you can do your own prompt on items you want.
There is also a
.Editable(e => e.Destroy(false))
that you can do to remove the X on the event window. This particular example would remove it for all of the events, but there might be a way to remove it for specific ones.
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.
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)
I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.