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.
Related
I'd like to set readonly field, but only first line on the grid. How can I do this?
Any suggestions are welcome!
You can make use of the edit function like
edit: function(e) {
//add your custom logic here as if condition
//as for this example it just disable the one with id 1
//or maybe ada a new attribute like isEditable = boolean upon datasource.parse then check it
if (e.model.id == 1) {
//revert edited cell back to `read` mode
this.closeCell();
}
}
Well this is not exactly prevent opening, its just immediately close it after it opened i think. but it is viable option since i cant even see the changes. Working example dojo and this actually sugested in the kendo forum here
I just saw this link which is a great explanation by onabai, but i´m trying to also set a template for the temporary popup and i can´t make it work:
$(".k-grid-popup", grid.element).on("click", function () {
// Temporarily set editable to "popup"
grid.options.editable = "popup";
// Insert row
grid.addRow();
// Revert editable to inline
grid.options.editable = "inline";
});
How do you set the template of the popup?
Regards.
While you can access the grid options directly, any change to the options should be made using the setOptions method. This function will notify the grid of any options change and it will be able to make all the internal change the handle the event according the the new options.
$(".k-grid-popup", grid.element).on("click", function () {
grid.setOptions({editable: "popup"});
grid.addRow();
grid.setOptions({editable: "inline"});
});
I don't have any working example of your code so I can't tell if you need to change something else in your code.
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 am developing a mobile web app using Kendo UI Mobile. Whenever we make any AJAX calls, or our DataSources make them we call app.startLoading() to show the loading icon to the user. This works very well.
However, depending on the context in which the call is made we would like to change the text that is displayed along with the loading icon. I know you can define this when I create the kendo.mobile.Application instance. How can I change it afterwards?
The documentation does not suggest a way to do this, and a browse of the source code did not help me either. Is this really not possible?
EDIT: This is using Kendo UI Mobile v.2012.3.1114
I usually make a "utility" function to do this:
var _kendoApp = new kendo.mobile.Application(document.body, {});
var showLoading = function (message) {
_kendoApp.loading = "<h1>" + (message ? message : "Loading...") + "</h1>";
_kendoApp.showLoading();
};
I am also setting a default message of "Loading..." if one isn't passed in.
Edit:
I could have sworn that worked for me in a past app I did, but judging by thr source, I think you are right, my answer above shouldn't work. My best suggestion is to add a class to the message element so you can target it, and use jQuery to change the text.
var _kendoApp;
var showLoading = function (message) {
$(".loading-message").text(message ? message : "Loading...");
_kendoApp.showLoading();
};
_kendoApp = new kendo.mobile.Application(document.body, {
loading: '<h1 class="loading-message">Loading...</h1>'
});
Please help me - I need to make full re-initialization of CKeditor. I don't want to make re-initialization of instances of CKeditor, but I want fully reload it. Is there any way to implement it?
I tried to made next:
delete window.CKEDITOR;
and then:
//clear for old sources
$('script[src*="/includes/contentEditor/ckeditor/"]').each(function() {
$(this).remove();
});
$('link[href*="/includes/contentEditor/ckeditor/"]').each(function() {
$(this).remove();
});
//load CKeditor again
contentEditor.loadjscssfile('/includes/contentEditor/ckeditor/ckeditor.js', 'js');
contentEditor.loadjscssfile('/includes/contentEditor/ckeditor/adapters/jquery.js', 'js');
My method loads editor but some plugins does not work after reloading. Thanks for any help!
I have plugins and I don't need to fully reinitialize CKEditor either, just instances, are you doing it properly?
To remove my instance (my textarea is referenced by ID txt_postMsg):
$('#btn_cancelPost').click(function(){
CKEDITOR.remove(CKEDITOR.instances.txt_postMsg);
$('#txt_postMsg').remove();
$('#cke_txt_postMsg').remove();
});
Then I re-create the textarea, and after a 50ms timeout I call the constructor with the textarea again, plugins reload fine. We have some pretty complex plugins for flash/image editing so maybe there's an issue with your plugin?
My version:
$$("textarea._cke").each(function(Z) {
if (typeof(CKEDITOR.instances[Z.id]) == 'undefined') {
CKEDITOR.replace(Z.id, { customConfig : "yourconfig.js"});
} else {
CKEDITOR.instances[Z.id].destroy(true);
CKEDITOR.replace(Z.id, { customConfig : "yourconfig.js"});
}
});
try something like
for(var instanceName in CKEDITOR.instances)
CKEDITOR.remove(CKEDITOR.instances[instanceName]);
CKEDITOR.replaceAll();
AlfonsoML
I use CKeditor for dynamically edit different part of site. When I click on some area of the site it shows popup with CKeditor with content of this area above this area. When I save it I destroy instance of this editor, but if while editing I use link plugin CKeditor can't show editor without page refreshing. Chrome says - Uncaught TypeError: Cannot call method 'split' of undefined, Mozilla - x.config.skin is undefined(I try to set config.skin and it show another error - z is undefined).
I hope the full re-init can help.
P.S. Sorry I can find how to answer on your comment...
I've been looking for a way to re-initialize the editor and the only solution that I end up is to delete the instance and create a new ID.
Here's my code.
var editor = 'myeditor'
var instance = CKEDITOR.instances[editor];
if(typeof instance != 'undefined')
{
instance.destroy();
$(".cke_editor_" + editor).remove();
//make a new id
editor = (Math.random().toString(36).substr(2, 10););
}
CKEDITOR.replace(editor,
{
}
It's not perfect but it works.
Hope this helps.
This is my solution:
var editor = CKEDITOR.instances[your_ckeditor_id];
editor.mode = 'source';
editor.setMode('wysiwyg');
OR
var editor = CKEDITOR.instances[your_ckeditor_id];
editor.setData(editor.getData());