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.
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'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully
I'm trying to get Fine Uploader React to work but keep running into issues.
I'm getting the following errors:
Here's the URL: http://fineuploader.azurewebsites.net/
Here's what I've done so far:
Downloaded the source on to my computer from https://github.com/FineUploader/react-fine-uploader
I then npm installed react-fine-uploader and fine-uploader as per instructions
I ran webpack to transpile and bundle the code
Added an entry point and index.html
Finally, I simply published the app to a new Azure app/website
Any idea what's causing the issue?
P.S. My goal is to use Fine Uploader to upload files to Azure Blob Storage. At this point, I'm simply trying to get Fine Uploader going. I do realize that I'll have to enter a few pieces of information about my blog storage endpoint, etc. but I don't think this error is related to any of that.
A Gallery (and every higher level component of that library) needs an "uploader" props as explained in the section https://github.com/FineUploader/react-fine-uploader#high-level-components
An uploader is one of the 3 classes avaiable in the fine-uploader-wrappers package https://github.com/FineUploader/fine-uploader-wrappers#wrapper-classes
those are for upload to
Aws s3
Azure
or your enpoint
The uploader class need all the configuration endpoint, credentials, custom configuration, etc... (you can find a comprehensive list here in the api section https://docs.fineuploader.com/branch/master/api/options.html)
An example for s3 direct upload would be something like:
const uploader = new FineUploaderS3({
options: {
request: {
endpoint: "http://fineuploadertest.s3.amazonaws.com",
accessKey: "AKIAIXVR6TANOGNBGANQ"
},
signature: {
endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php"
}
}
})
and use that uploader in a gallery
<Gallery uploader={ uploader } />
There are many usefull option for customization: callbacks, onEventHandler, etc you can find them all in the docs of fineuploader
Edit: if im not mistaken react-transition-group is necessary even if it's not listed anywhere in the docs...
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'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 ));