I'm using ImagePaste plugin to paste the image from word. But the image is not showing after the uploading.
When I paste the image it looks like this
But when I retrieve the image than it doesn't appear.
To automatically upload pasted image, you'll need:
A file manager (like CKFinder).
Upload Image plugin.
A properly configured CKEditor.
The configuration could look like this:
CKEDITOR.replace( 'editor2', {
extraPlugins: 'uploadimage,image2',
height: 300,
// Upload images to a CKFinder connector (note that the response type is set to JSON).
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
// Configure your file manager integration. This example uses CKFinder 3 for PHP.
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
} );
There's an official guide about uploading files using CKEditor.
Related
Really basic question I hope.
I keep getting a 'no upload adapter' error message in the console when I try to add an image using CKeditor 5 - Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
Below are the instructions from the documentation.
Configuring the image upload only
This feature can upload images automatically to the server (e.g. when the image is dropped into the content) thanks to the CKFinder upload adapter. All it requires is the correct config.ckfinder.uploadUrl path.
Assuming that the CKFinder PHP server-side connector is installed (available) under https://example.com/ckfinder/, use the following quick upload command URL to enable the image upload:
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
// Enable the "Insert image" button in the toolbar.
toolbar: [ 'uploadImage', ... ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php? command=QuickUpload&type=Images&responseType=json'
}
} )
.then( ... )
.catch( ... );
I have added the above code onto the webpage where my editor exists within tags. Am I doing this wrong? Should this code be added somewhere else, within the config file somewhere else I am missing?
Link to the documentation in question - https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html
The uploader works fine if I go to the sample page - http://example.com/ckfinder/samples/full-page-open.html
Didn't get this working, so used https://github.com/ckfinder/ckfinder-laravel-package instead.
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.
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:
I was able to store png images in MongoDB by using a method similar to the following code:
// server.js
q.desc.data = fs.readFileSync(__dirname + '/logo.png');
q.desc.contentType = 'image/png';
However, I could not make the image to show up in a web page controlled by AngularJS. The image data can be retrieved inside the page, but the following line shows up as text "", presumably because BSON format is different from the raw data.
// core.js (on the client Angular side)
$scope.q.desc.data = '<img src="data:image/png;base64,' + $.base64.encode($scope.q.desc.data) + '" />';
The only way I have found so far to display the image in a browser is to send it standalone from the backend:
// server.js
res.contentType(doc.desc.contentType);
res.send(doc.desc.data);
But how do we embed this image inside a web page? The Web browser cannot download/cache the image directly because the image doesn't have a URL. It lives inside the MongoDB. Thanks!
I have downloaded the latest ckeditor version 4.0.1. I am using this following code to set my custom config file.
CKEDITOR.replace( textAreaId,
{
customConfig : 'suConfig.js',
width : width,
height : height,
}
it is not considering the config file and while rendering my text boxes are empty without editor. But if i use the default config file it works