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.
Related
I am using Asp.NET Core 6 & CKEditor 4
When I click on send button to upload selected image from local path, file uploads successfully but after that error appears as follow:
HTTP error occurred during file upload (error status: 500).
I added extra directory to application root and used StaticFile like bellow:
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(
System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), "FilesCKEditor")),
RequestPath = "/FilesCKEditor"
});
Everything is ok when uploading image to the server but return status never send to ckEditor image browser dialog.
Please help me.
Thank You All
I am trying to setup classic ckeditor in my angularjs application. I have installed via npm and classic ckeditor 5 is up.
I am trying to copy paste contents to ckeditor but it is failing with the error saying filerepository-no-upload-adapter: Upload adapter is not defined.
Does this error mean the final classic ck editor build(12.3.1) doesnt have this plugin?
Below is the code which I am trying.
ClassicEditor.create( document.querySelector( '#editor' )
)
.catch( error => {
console.error( error );
} );
ClassicEditor.builtinPlugins.map( plugin => console.log(plugin.pluginName) );
ClassicEditor.builtinPlugins.map logs 'alignment','Essentials','CKFinderUploadAdapter','Autoformat','BlockQuote','CKFinder','EasyImage','Image','ImageCaption','ImageStyle','ImageToolbar','ImageUpload','List','MediaEmbed','Paragraph','PasteFromOffice','Table','TableToolbar'
Does this mean the final classic ck editor build(12.3.1) have these plugins?
the filerepository-no-upload-adapter means that your editor instance does not have any upload adapter defined. The best way to learn about defining an upload adapter is to follow the Image upload overview and either use (thus configure it) one of the official upload adapters or create a custom upload adapter for your server.
ps.: There's an issue that currently the CKEditor 5 have not an official plugin for inserting images via a URL. However, there's a guide for that.
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'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.
I've uploaded them to a public folder. Everything works apart from these two.
Is there some extra "Google Drive Hosting" script I need to put in?
Or should it be working without any extra and I need re-check my code?
Many thanks!
me also faced same problem while uploading my custom Jquery Plugin, bt i can able upload js file to an existing folder which is already using for my previous project , me faced this problem while creating new folder only
but
In my new folder me just deleted that js file and uploaded it again ,its working fr me nw
save file as .js
content of that file
(function ( $ ) {
$.fn.doValidation = function(options) {
//ur code goes here
}( jQuery ));