I want to be able to click on the image icon in CKEditor and be able to browser the local file system. I would like the chosen file to be passed to the editor just like the standard URL is. I want to use the base64image plugin to embed the image inline.
I have tried using CKFinder but, when I click the Browse Server button in the Image Properties dialog, I get an empty window with just 'run();' in the centre.
To enable CKFinder in read-only (gallery) mode, set the readOnly configuration option to true and pass it as a configruation option to the CKFinder.setupCKEditor function:
CKFinder.setupCKEditor( editor, {
readOnly: true
} );
This will disable the possibility to modify anything.
If you only want to disable uploads, you can disable modules related to upload operations:
CKFinder.setupCKEditor( editor, {
removeModules: 'FormUpload,Html5Upload,UploadFileButton'
} );
The second thing is to change Access Control settings in the server side connector by setting 'FILE_CREATE' to false so the uploads will be disabled also on the server side.
Related
I am facing the cache issue whenever I do a new deployment, changes are not reflecting automatically. Always I have to go to the browser setting and clear the cache.
Is there a way to handle this issue automatically whenever I do the new deployment.
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'libs/knockout/knockout-3.4.0',
'jquery': 'libs/jquery/jquery-3.1.1.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.0',
'promise': 'libs/es6-promise/es6-promise.min',
'ojs': 'libs/oj/v3.2.0/min',
'ojL10n': 'libs/oj/v3.2.0/ojL10n',
'ojtranslations': 'libs/oj/v3.2.0/resources',
'signals': 'libs/js-signals/signals.min',
'text': 'libs/require/text',
'hammerjs': 'libs/hammer/hammer-2.0.8.min',
'moment': 'libs/moment/moment.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'customElements': 'libs/webcomponents/CustomElements'
},
waitSeconds: 0,
// urlArgs will be appended at end of .js files
urlArgs: "v=1.33",
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
}
},
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
}
}
}
});
You can update version (by changing urlArgs parameter in configuration) every time you deploy new code, thus every time new JavaScript file will be downloaded.
This can always be a problem during development. There are a couple of solutions.
1) Build into your app URL, a version string. Every time you publish a new version, change that number and the browser will pull new files
2) Set the cache control values on your server so that it doesn't cache anything from your app directory
3) Just do what you're doing with clearing browser cache. There are utilities that add a button on the browser bar to make it easier to get at.
I personally use the node http-server library to run my dev work and I use it's cache control arguments to make sure nothing is being cached.
http-server -c-1 -o
The above turns off caching and launches the browser from the current location (loading index.html if present)
With Chrome: if you open the Developer Tools (F12), on the Network tab you can check the Disable cache checkbox, which turns off caching, while the DevTools is open.
With Firefox: if you open the Developer Tools (F12), click the cogwheel icon ("Toolbox Options"), then in the "Advanced Settings" section, check the Disable Cache (when toolbox is open) checkbox.
Now there will be no caching in the browser. Might slow down stuff seriously...
I have a textarea with html id "id_textarea".
editor = CKEDITOR.inline( 'id_textarea', {
filebrowserBrowseUrl : 'browse_url',
filebrowserUploadUrl : 'upload_url'
});
editor.on( 'fileUploadRequest', function( evt ) {
console.log("This is not printing");
});
Whenever I try to upload a file, it doesn't print anything to console. Am I doing something wrong?
By the way, my requirement is to add csrf headers before sending a request for which I need to catch some event like fileUploadRequest.
I assume that you are trying to upload files via the Upload tab in the Image Properties dialog. It is provided by the File Browser plugin and fileButton which does not support the fileUploadRequest and fileUploadResponse events (there is already a feature request with a more in-depth description of this case).
If you would like to use these events for some custom request preprocessing, you can use the Upload Image plugin. The configuration process is described in the official docs, but keep in mind that it will work only for dropping or pasting files. Upload via the Image Properties dialog will still be handled by the File Browser plugin which does not support these events.
The important thing here is that since CKEditor 4.5.6, the File Browser plugin uses the CSRF header so it can be probably used on your server side without any modifications in the JavaScript code. So if you are using an older version I suggest updating to 4.5.6 (using e.g. CKBuilder) and trying to integrate with your backend. The CSRF header in the File Browser plugin should be sufficient for your needs.
Here is the header:
Part of the functionality of my intranet application is that a user needs to see some XML which has been generated. A new browser tab is opened, and the WebAPI controller streams XML.
This works fine, problem is when the user clicks on "Save As...", nothing happens.
If I place a static xml file on the server, browse to it and click "Save As..." then this works fine; so I don't see this as being caused by a group policy or desktop build error. This also works fine in a proper web browser.
The code to return the xml...
return new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent(fpml, Encoding.UTF8, "text/xml"),
};
If you trick IE into thinking that it has a file, rather than dynamic content, then the "Save As..." feature will work as expected.
This can be done by simply adding a filename into the URL, i.e.
Instead of
http://myhost/myapp/api/getFpmlApi/?TradeId=234234
use
http://myhost/myapp/api/getFpmlApi/Fpml.xml?TradeId=234234
I want to add validation in filefield of ExtJs4 , so that user can only browse .png , .jpeg image files..How should I do it ?
{
xtype: 'filefield',
id:'photoUpload',
buttonOnly:true,
buttonText: 'Photo'
}
I think it is important to understand how file upload works, so to prevent yourself from troubles in the future...
For security reasons, the following applies:
Browsers cannot access the file system unless the user has explicitly clicked on an upload field.
Browser has minimal access to the file being uploaded, in particular - you JS code may be able to see the file name (the browser has to display it in the field), but nothing else (the path itself on most browsers is not the correct one).
The upload process itself happens in these steps:
The user clicks on an upload field, initiating the file select dialog.
The browser implements access to the file system through the dialog, allowing the user to select a file.
Upon OK click, the browser sends the file to the server.
The server places the file in its temp directory (configured per server).
Once upload is complete, the upload script on the server is called with the file details, and that script will have full access to the uploaded file.
The last step is the only point where you have full access to the file details, including the real actual name, its size, and its content.
Anything the browser gives javascript is browser depended. Even the file name will vary between browsers although all the browsers I know do keep the actual file name (but not the real actual path), you cannot rely on this to work with future versions. The reason for this is that the file name is displayed on the client side.
So the recommendation is this:
Do all file upload checks on the server side.
Again, you may get away with the file name on the JS client side, particularly if you know and can test what browsers your clients will use, but I'd strongly recommend to to this test on the server.
The last thing you have to remember is that users might upload a file ending with .png, but the file itself is a .zip with the extension changed - so to really confirm that the file is .png you need to actually look into the file data, which only the server can do.
{
xtype: 'filefield',
id:'photoUpload',
buttonOnly:true,
vtype:'fileUpload',
buttonText: 'Photo'
}
And Vtype which I have use..
Ext.apply(Ext.form.VTypes, {
fileUpload: function(val, field) {
var fileName = /^.*\.(gif|png|bmp|jpg|jpeg)$/i;
return fileName.test(val);
},
fileUploadText: 'Image must be in .gif,.png,.bmp,.jpg,.jpeg format'
});
Try following snippet in your 'filefield' xtype config
regex : (/.(gif|jpg|jpeg|png)$/i),
regexText : 'Only image files allowed for upload',
msgTarget : 'under'
I have a big problem with Internet Explorer 7 and 8.
SITUATION:
I have a FORM that build a Medical Prescription. When I hit the save button, the script saves the DomainObject on DB and set a boolean property (of panel where the form is added) called "saved" to true and a byte[] property called PDF with bytestream.
On RenderHead of Panel, I read this boolean and, if is true, I force the trigger of a hidden button with this code:
String js = "$('#" + printPDF.getMarkupId() + "').click();";
response.renderOnDomReadyJavaScript(js);
The button executes this code:
ResourceStreamRequestHandler handler = new ResourceStreamRequestHandler(new ByteArrayResourceStream(pdf, "application/pdf"));
handler.setFileName("foo.pdf");
RequestCycle.get().scheduleRequestHandlerAfterCurrent(handler);
This code work perfecly on FF and Chrome. The Browser download windows appears and the user can save the PDF on HD.
Unfortunally, Internet Explorer has that damn security behavior that is triggered when a site require something to download. That warning require a user validation. A yellow Bar appear and the user is force to hit "Download".
screenshot http://imageshack.us/a/img198/1438/securityg.jpg
When I hit Download File, the form is submitted again with the exact state I had when I hit save the first time. So no previous INSERT on DB is already committed; The Session is resetted to the previous state etc...
The result is a double INSERT on DB of the Domain Ojbect.
Any clue to resolve this?
The problem is that you click download link programaticly instead to redirect browser to an URL or open an URL by JS window.open(url). Click a link looks like an unwanted operation that is sometimes restricted by browser.