I am customizing the functionality of ckeditor image upload. The user sees a dropdown with different options. Depending upon the option selected from the dropdown the "Browse Server" button should take the user to corresponding url.
So basically I need to dynamically pass the browse server url (which has chosen from a drop down list) to the filebrowser of Image Upload functionality of CK Editor 3.4.1 gem.
Example:
I am having a select box in the Image Info Tab for that I have added the following code.
{
type : 'select',
id : 'url_path',
items :
[
[ 'Add photos from My Computer', '' ],
[ 'Add photos from My Album', 'http://localhost:3000/pages/'],
],
onChange:function(){
L=this.getValue();
}
Browse Button code looks like this
{
type:'button',
id:'browse',
style:'display:inline-block;',
align:'center',
label:b.lang.common.browseServer,
hidden:true,
filebrowser :
{
action : 'Browse',
url : '',
target : 'info:txtUrl'
}
}
Here the url value has to set according to the value of select box. How can I configure that ?
Regards,
Pankaj
Related
I've been searching for a solution for a couple of weeks now to no avail.
My web application uses Spring/Hibernate. When I make an AJAX call to retrieve data for my table(using Datatables), everything show up fine. However, when I click on a link and then click BACK to return to the table, IE and Firefox seem to behave differently :
FIREFOX :
Display table page (AJAX call);
Click link to go to new page;
Click Back to return to table page;
Database DAO NOT called to re-display data
INTERNET EXPLORER :
Display table page (AJAX call);
Click link to go to new page;
Click Back to return to table page;
Database DAO IS called to re-display data
Why is this happening and how can I fix this ? Basically I'd like IE to behave like Firefox in this particular scenario.
Sample code (JSP):
$('#tableWithData').DataTable( {
serverSide : false,
ajax: {
"url": "/app/search/rowData",
"data": function ( d ) {
d.searchDeptlCntnrNo = $('#criteriaDeptlCntnrNo').val();
d.searchCntlNoCd = $('#criteriaCntlNoCd').val();
d.searchExactMatch = $('#criteriaExactMatch').val();
d.searchCntlNoCmpnt1 = $('#criteriaCntlNoCmpnt1').val();
d.searchCntlNoCmpnt2 = $('#criteriaCntlNoCmpnt2').val();
d.searchCntlNoCmpnt3 = $('#criteriaCntlNoCmpnt3').val();
d.searchCntlNoCmpnt4 = $('#criteriaCntlNoCmpnt4').val();
d.searchRangeField = $('#criteriaRangeField').val();
d.searchCntlNoCmpntQty = $('#criteriaCntlNoCmpntQty').val();
d.searchCntlNoCmpntRng = $('#criteriaCntlNoCmpntRng').val();
}},
stateSave: true,
pagingType: "full_numbers",
deferRender: true,
scrollY: 400,
scrollCollapse: true,
scroller: true,
lengthChange: false,
"columns": columns,
language: {
"loadingRecords": loading data..."},
fnInitComplete: function(oSettings, json) {
$("#loading-div-background").hide();
},
language :{
"emptyTable": "Your query returned 0 results."
}
} );
EDIT :
This would be a BFCache issue and since I use JQuery and it has an embedded onload event, Internet Explorer cannot retrieve the cache ? https://stackoverflow.com/a/1195934/1501426
For anyone having the same problem, here is what I've found :
This is an IE issue with jQuery and Internet Explorer :
jQuery automatically attaches an unload event to the window, so
unfortunately using jQuery will disqualify your page from being stored in > the bfcache for DOM preservation and quick back/forward.
https://stackoverflow.com/a/1195934/1501426
It looks like I'm stuck with this. For now, I will open a new window when the user clicks a link but IMO, that's a bad design.
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");
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 have a combobox in a view that is tied to a data store / model that uses Ext.Direct to load the data for the drop down.
In my controller where I open the view that contains the combobox, I kick off the load of the store.
This all works, but when I click on the combobox, it kicks off another load (masks the screen with loading) and re-loads the store. I need to prevent that second load since it's already loading.
Store:
Ext.define('ESDB.store.Employees', {
extend: 'Ext.data.Store',
model: 'ESDB.model.Employee',
autoLoad:false,
proxy: {
type: 'direct',
api: {
create : undefined,
read : EmployeeService.getRecords,
update : EmployeeService.setRecord,
destroy : undefined
}
}
});
Model:
Ext.define('ESDB.model.Employee', {
extend: 'Ext.data.Model',
fields: ['id','name','login','pw','domain','lastLogin','addedDate','active','ulevel','staffID']
});
View:
(relevant part - the combo box - there are no other references to the store or model in the view)
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'combobox',
name : 'callTakenBy',
fieldLabel: 'Taken By',
displayField: 'name',
queryMode: 'remote',
valueField: 'id',
store: "Employees",
editable: false
}
]]}
Controller (when they double click a row in the grid, it kicks off the load for the employees store, then opens the view):
encounterRowClicked: function(grid, record) {
console.log('Double clicked on ' + record.get('id'));
var store = this.getEmployeesStore();
store.load({
params: {
},
callback: function(r,options,success) { } //callback
}); //store.load
// load the view:
var view = Ext.widget('encounteredit');
view.down('form').loadRecord(record);
}
All this code works, but when I get in to the view, where the combobox is properly displaying one of the loaded values, I click on the combobox and it kicks off another load of the store. It works, but then I have to click again to actually choose a different value. So I am looking for a way to tell the combobox to simply use the store, not to load it-- seems like it should already know that it's loaded and to simply use it?
You need to set the queryMode : 'local' for the combobox. As you can see in the docs, the default value is remote (by the way you should remove the mode: 'remote', mode is not a valid config for the combobox).
In queryMode: 'remote', the ComboBox loads its Store dynamically based upon user interaction.
You should use 'local' because you already have the data localy in the store
I've written a custom plugin for CKEditor--successful on all fronts, save one currently: I can't, for the life of me, figure out how to customize the image on the button in the toolbar of the editor. As I'm a new user, you'll have to click through to see attached image; the highlighted square in the top left should have a pretty picture (like most of the other toolbar items).
I have written a complete tutorial covering every aspect of CKeditor plugin development, including buttons, context menus, dialogs and more.
The answer is to set the icon property of the button settings like so:
editor.ui.addButton('your-plugin', {
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
});
Your plugin directory should have an "images" subdirectory where your button should go. In the above snippet, replace "your-plugin.jpg' with the JPG, GIF or PNG image for your button.
This answer, of course, assumes that you know how to create a button image using some image editor like Gimp, Photoshop, etc.
Some info for others try to write plugins for CKEditor 3.0.
I've started by copying the source from plugins/flash and have now got a button with a youtube logo.... this is an extract from plugins/youtube/plugin.js
editor.ui.addButton( 'YouTube',
{
label : editor.lang.common.youtube,
command : 'youtube',
icon: this.path + 'images/youtube.gif'
});
Also you'll need to edit you language file.... e.g. lang/en.js
Add your plugin name to the "common" section (this appears as a tooltip when you hover over the button) and add a whole block for your plugin, with all your strings, like this....
// YouTube Dialog
youtube :
{
properties : 'YouTube Properties',
propertiesTab : 'Properties',
title : 'YouTube Properties',
chkPlay : 'Auto Play',
chkLoop : 'Loop',
chkMenu : 'Enable YouTube Menu',
chkFull : 'Allow Fullscreen',
scale : 'Scale',
scaleAll : 'Show all',
scaleNoBorder : 'No Border',
scaleFit : 'Exact Fit',
access : 'Script Access',
accessAlways : 'Always',
accessSameDomain : 'Same domain',
accessNever : 'Never',
align : 'Align',
alignLeft : 'Left',
alignAbsBottom: 'Abs Bottom',
alignAbsMiddle: 'Abs Middle',
alignBaseline : 'Baseline',
alignBottom : 'Bottom',
alignMiddle : 'Middle',
alignRight : 'Right',
alignTextTop : 'Text Top',
alignTop : 'Top',
quality : 'Quality',
qualityBest : 'Best',
qualityHigh : 'High',
qualityAutoHigh : 'Auto High',
qualityMedium : 'Medium',
qualityAutoLow : 'Auto Low',
qualityLow : 'Low',
windowModeWindow : 'Window',
windowModeOpaque : 'Opaque',
windowModeTransparent : 'Transparent',
windowMode : 'Window mode',
flashvars : 'Variables for YouTube',
bgcolor : 'Background color',
width : 'Width',
height : 'Height',
hSpace : 'HSpace',
vSpace : 'VSpace',
validateSrc : 'URL must not be empty.',
validateWidth : 'Width must be a number.',
validateHeight : 'Height must be a number.',
validateHSpace : 'HSpace must be a number.',
validateVSpace : 'VSpace must be a number.'
}
these are some plugins for CKEditor 3.x
CKEditor Plugins
Highslide JS Plugin,
LrcShow Plugin,
FileIcon Plugin,
InsertHtml Plugin,
SyntaxHighlighter Plugin
Download: CKEditor 3.x Plugins
There is a pretty exhaustive tutorial on CKEditor Documentation Website, see: CKEditor Plugin SDK - Introduction
At this moment it covers:
Creating an Editor Command
Creating the Toolbar Button with an icon
Explanation on how to register the plugin in CKEditor
Creating Plugin Dialog Window with Two tabs
Adding Context Menu
Advanced Content Filter (ACF) integration (on a separate page)
If you are interested in creating your own widgets, check also Widgets SDK Tutorial
To add your custom icon you need to edit skins/moono/*.css
For the editor itself you need to add the same CSS class in the following files
editor.css
editor_gecko.css (firefox)
editor_ie.css
editor_ie7.css
editor_ie8.css
editor_iequirks.css
The format name for a CSS button class is .cke_button__myCustomIcon_icon
You can either use your own image file for the icon or edit the sprite /skins/moono/icons.png to add your's.
In your plugin.js you need to have something like
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: 'myCustomIcon'
});
Regarding font awesome, I was able to achieve this using CSS:
span.cke_button_icon.cke_button__bold_icon {
position: relative !important;
background-image: none !important;
&:after {
font-family: FontAwesome;
position: absolute;
font-size: 16px;
content: "\f032";
}
}