CKEditor 5 and Image Button - javascript

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Based on the guides and articles I have been reading, my assumption is that I have to save the image to the server and then give the url back to the ckeditor so that it may use it to display the image.
What I can't seem to figure out is how to do that. Where in the ckeditor js code would I add my own logic so that it may pick up the uploaded image, send it to the server and then give a url back to ck editor?
I've been through a lot of documentation such as this, but I can't seem to find anything.
https://docs.ckeditor.com/ckeditor5/latest/features/image.html
https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Did you check the console? On the console, if you don't have the editor properly configured, you'd have something like this:
filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
Now, there are two built-in upload adapters – for CKFinder's server connector and for the Easy Image service provided by CKEditor Cloud Services. Both need to be configured to work:
CKFinder adapter: https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
Easy Image: https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image
The role of an upload adapter is to expose a function which will send a file to the server (in whatever way it wants) and notify the editor once the upload is done (by returning a URL to this file). The editor takes care of the rest – inserting the image into the content, displaying a progress bar, etc.
Besides using the built-in adapters, you can write your own one. See:
https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src as an example of a simple upload adapter

Related

WYSIWYG Texteditor Image Delete/Upload Logic

Im using laravel with summernote wysiwyg text editor. I want user to be able to insert images to the text.
First i tried using the default summernote upload method. Basically it turns upload image to a base64 data url. Then after posting it, in a controller, that base64 is decoded into an actual image, saved to the server, and the img that src part is turned into a public image url that leads to the current server.
This worked fine with small images. But it didn't work well with big images. Post didn't work and i didn't get any error from anywhere. I assumed that it was because of the base64 part. I also saw THIS THREAD which made me wanna change base64 part even more.
So i switched to using onImageUpload callback without even thinking about it much. I saw lots of tutorials suggesting it.
With this callback, whenever user insert a image to the editor (before the post), OnImageUpload function is called in js. In that function, ajax sends to image to the controller, controller saves the image to the server and responds with its public url. Finally editor uses that url to show the image in the editor.
Issue starts here with deleting images.
There is a OnMediaDelete function which has issues. It does not work with delete/backspace key for example. And even if that worked properly, a user can insert pictures and leave the page (or use one bugs of the onMediaDelete callback) which means there isn't a easy way to determine if the uploaded image is actually used in a text or not. Server would be filled with unused images?
How do you deal with this? Should i upload the images to a temp file during the editing and carry them to a actual folder if there are being used after the post? This would require stuff like cron to keep temp folder empty won't it? Is this how people deal with this?
Or should i just disable uploading images with text editor? Maybe a small content management for images in another part of the server?
Whole thing feels so simple but i am really struggling with it. I feel like i am missing a huge point here. Please help me. Sorry for this weird question. Thank you

Alloy Editor : upload multiple images on my server from content

Is it possible to upload the multiple images from pasted content of google drive document or local documents i.e articles ?
After pasting the content from document, i want to upload all images on my server
Currently, when i drop/select image (single) in editor area locally then using "imageAdd" event i can upload the image to my server, but same thing when i do by selecting the image (having google image url) from document that time its not working.
want to implement : all images which i have copied in editor which are hosted in different server, need to upload on my server
You need a plugin that detects whenever content is copied into the editor, then find out any external image and then imports them into your server.
This is an example of such plugin https://www.pluginsforckeditor.com/imagesfromserver/ although you can write your own.

Image source path is converting into blop instead of real path in tinyMCE editor

I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help
When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.

Getting drag and dropped files icon using Javascript

I want to get an icon's image when a user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?
I would suggest a mix of:
This great drag and drop upload library:
http://valums.com/ajax-upload/
This javascript code to preview uploaded images before they upload
How to upload preview image before upload through JavaScript
You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.
Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...
An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.
You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !
You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)
Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.
Here is a great tutorial that I think can help you with many problems. If I understood your problem right.
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer
Here you've a "Using drag feedback images", maybe this can help to you :)

Javascript wysiwyg editor with image upload functionality (use with JEditable)

I'm looking for a good wysiwyg editor with image upload functionality (i.e. a user can add as many pictures as he likes, form URL's or disk, and they'll be uploaded).
I already tried TinyMCE, but it was really heavy and took a very long time to load (I'm using JEditable to only make the editor appear when the user clicks on it).
I've used the components from dhtmlx.com and had pretty good success with them. You can buy the libraries or use the open source version of them if your project qualifies.
You can find the editor library here: http://dhtmlx.com/docs/products/dhtmlxEditor/index.shtml

Categories

Resources