-
Notifications
You must be signed in to change notification settings - Fork 111
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to integrate Base64 or Simple file upload? #126
Comments
Update: The easiest way to set the upload adapter or to add / remove plugin from the build is by creating a custom build via the CKEditor 5 Online Builder that includes your own set of plugins. Then, you should follow the CKEditor 5 Angular integration - custom build section. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
why do i have to clone your code and do a custom build just to add that plugin... this is ridiculous... edit: ok i just copy pasted your code into my project... just 1 hour with your library and i already want to throw it and do it myself. why such complexity? i don't want to read your doc totally before starting to work... that's not how it works in 2020. in 2020 the getting start guide should be enough to cover 90% of the cases. then if the library is great we go deep to the doc, to customize as we want. i just started to read your doc and i already want to give up. "in order to do a simple thing start cloning our code first" why?! "read our 5000 pages of doc to understand how our textarea works" ... you don't like developers dude. you are just like the people who created so many bad games on NES and master system when we were kids, just to make us suffer for nothing. |
I'll hide my previous response as it's outdated a little bit. Use CKEditor 5 Online builder instead. |
I updated the solution - #126 (comment). |
Thank you for the quick reply. I switched to quill, and it works as I want so far (base64 images out of the box): Also the buttons are responsive out of the box( had an issue with that with ckEditor 5 ): I understand your reasons but imo it should be different. First of all, I took the "Document" build, and the upload image icon is there by default in the toolbox. So I imagine that the plugin should be there as well. I'm a backend developer, so I'm not an expert with webpack, I have to admit it. But for other libraries, I'm used to do stuff like: then in my imports: ImageBase64Module. That makes more sense imo. I will have a look to the online builder, but I don't like this solution, because then I have to manage your project somewhere on a git repo. This would produce issue: -> how do I align my version with the default one, in case of bug fixing for instance? Another solution would be to define interfaces that we can implement. I couldn't find an interface like "Plugin" in the document build, althought it would be very useful. Then I know what's expected from the plugin management system. The toolbar for each build should be minimalistic if you don't bundle the according plugins, at least a default one. Because we think if it's there, then it's part of the build. but it's not. Thanks for the reply again, CkEditor looks like a great product, but for proof of concept like I'm doing now, it doesn't fit. Developer experience can definitely be improved. |
Thanks for the feedback!
The plugin for handling image inside the editor is built-in to all builds. However the "upload" part which requires the
Yes... It works this way in our React and Vue integrations. But because of the mentioned issue with Angular loaders incompatibility and no way to configure the webpack for the Angular's app there's currently no way to do that. I know it's a big pain. But the CKEditor 5 wasn't developed for Angular ecosystem. It's a pure Vanilla JS editor. Unfortunately, we added two loaders needed to compile our sources - SVG loader and (Post)CSS loaders to not write everything in the JS files and to be able to reuse some parts of the UI, plus be able to configure the output. That's actually a bit PITA in the JS ecosystem. There're many "standards" that are conflicting. with only one default loader for CSS and SVG that problem wouldn't exist.
There're a few tools like `npm-check-updates` and similar ones which can update picked dependencies to latest ones. We'll also provide a tool to download an updated version of your packages from the CKEditor 5 Online Builder tool.
Have you seen the https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html and Plugin interface? There's also the Plugin base class, which you can use to inherit some useful methods from it.
I think that the core of the problem is that it doesn't work out of the box. But there're a few reasons why it currently behaves differently. |
Could you tell more about it? And could you create an issues in the CKEditor 5 issue tracker? |
Hey, As you see, the toolbar goes outside the window in case of mobile device; maybe it's not a bug, I am not sure; also there is no borders on the textarea part; Step to reproduce:
app.module.ts:
document.component.ts:
document.component.html:
|
if you confirm it's a bug i'll create a ticket np, btw it is the hello world example, i didn't try to customize anything |
For the base64 images I can live with it because I'm storing the document as an html page on the disk (server side), I just have a reference to the file in the database (mongodb); I could use GridFS to store it with mongo but I was too lazy yesterday haha. Also I don't think the document will contains tons of images, so I can live with my solution. For the Plugin interface, I couldn't find it in the npm packages I've installed (same as the hello world example), I think I had to make a custom build anyway to get that interface; Managing an external dependency is not something I did often during my carreer , 7y doing backend dev. I did it two times yes, it wasn't my idea and i didn't like it (and we end up having issues with that). I see external deps as black boxes. Having it on a private repo means that if a developer starts working on my project, he has to clone two projects and not one. or I could have my own npm registry, but all those steps equals less productive work imo. I'll try it again once my POC is over, lots of nice plugins there, maybe i'll switch to react or vue (the nice thing when being backend dev is to be completely open for changes on the frontend framework :D i like vuejs for its simplicity, maybe the experience will be better with it) |
I assume people are still ending up here trying to figure out how to integrate this all into an Angular Application, specifically with the simpleFileUpload plugin. I made a sample repo of this being done using the custom build tool CKEditor offers and added the steps in the README, cheers! |
Getting this error when using online builder to build with custom plugins.
|
I followed @ecolara3 instruction and hit a brick wall. the issue is that the custom build tool for ckeditor 5 (https://ckeditor.com/ckeditor-5/online-builder/) results in an ES6 build. according to: #20 this ES6 build is using some uglifier resulted in throwing compilation error Please add ES5 build option to the custom build tool. it's already a huge among of pain to customize ckeditor 5 for angular, please do not make it even worse. |
First thing, it seem this issue uses another packages: #88
Packages i install:
ckeditor5-
adapter-ckfinder
angular
build-classic
build-decoupled-document
ckfinder
core
editor-decoupled
engine
ui
upload
utils
in the upload i found: base64uploadadapter.js
Another thing... i have no idea how
config
work, how to add simple plugin, how to manythings, how js based sample can be converted to angular.Here's my code:
I get this error:
After click and upload image, i get this error:
The text was updated successfully, but these errors were encountered: