TinyMCE Drag and Drop image upload issues - javascript

I've used TinyMCE for a while, but am now wanting to implement drag-and-drop image upload functionality. (ie where you can drag an image from your local computer into the text editor, resize & reposition it etc, then upload it to the server) I was going to purchase Redactor for this feature, but then I noticed TinyMCE has the paste_data_images option allowing images to be dragged/pasted directly into the editor. This seems to converts it to inline base64 encoded data.
I suspect and have read, that in theory it might be possible to have this value submitted to the server, extract the base64 uris from the Dom, write them to a file, replace the SRC with the path to the newly created file, then submit the text to the database. Has anyone achieved this?
From my initial exploration I've found the issues may be:
Huge images (~100mb) could potentially be pasted into the textbox which could cause problems.
Internet Explorer 11 and Edge browsers both don't
seem to allow dragging of images into the textbox at all.
Has anyone managed to get this working seemlessly?
I have since double checked Redactor and noticed that it also doesn't work with IE and Edge either.

TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the 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 net here is that 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.
As for the issues you reference...
If a browser does not allow the drag/drop sequence you could look at using a file manager like MoxieManager or elFinder etc. They allow you to upload the image via a UI and have the uploaded image appear in your content in one step.
Image size is always an issue. You could manage this on the server in the image upload handler and return an error if the image is "too large". You could also write your own image handler function and stop the upload altogether if the image is too large.

Related

How do I configure a tinymce editor to only upload images to the server only on form submit?

I am creating a forum that utilizes the tinymce wysiwyg editor. It seems like the editor's default behavior is to upload an image to the server immediately when a user adds an image to the editor.
What if the user does not want that image anymore? What if a user maliciously adds many, many photos to the server?
I am wanting to submit images to the server only when a user submits a post. That way, I can limit the amount of images downloaded to the server and can better validate the post.
You can set the configuration setting automatic_uploads: false.
With that setting, as long as either images_upload_url or images_upload_handler are specified, images shouldn't be uploaded automatically and should only be uploaded when editor.uploadImages() is called upon form submission.
Here's some more information about automatic_uploads:
https://www.tiny.cloud/docs/configure/file-image-upload/#automatic_uploads
NOTE: Tiny has identified a bug where the automatic_uploads setting isn't always respected when uploading via the image dialog. The bug has been logged, and work to fix the bug is currently being scheduled as of this posting. I will edit this post the fix has been released.

Get Image URL/Address from webpage selection using Applescript/Javascript

I need a quick way to get the image URL, just like I would get if I right click on an image and select "Copy Image URL". I'm thinking Applescript, though others have mentioned Javascript.
This needs to be compatible with an Automator workflow and needs to work with Google Chrome, Chromium, and Safari, at a minimum.
More specifics:
I already have an Automator workflow that this will be added to.
The workflow begins with text and images that I have selected on a webpage using the mouse.
The processing of the text is working fine.
I just need a Applescript or Javascript or Shell Script (which I assume are the only outside code that can be added to an Automator workflow) that will grab any and all image URL's within the part of the page selected in step 2.
Images are NOT downloaded. Only the image URL is needed.
The basic logic is this:
Does selected input contain images?
If yes,
get URL of image(s)
pass to the next step
else continue
Any help or ideas appreciated!
OS X Services would be your best bet. Those work with text selections and are supported in most apps (e.g. see the Safari>Services submenu). You can also assign them keyboard shortcuts, which is very handy for repetitive tasks.
Basically, you want to get the selection as web content (i.e. HTML data, not plain text) then extract the URLs from that. You can create services in Automator, which includes various actions for working with web content, so I recommend starting there.

How to upload image in CKEDITOR with a Django backend?

I have done proper research of many image plugins which upload images to server using php scripts.I just want to know a proper way to upload images to a django-based server.
Here's I think what a approach should be -
On clicking a toolbar button,a dialog will be opened.UI elements of the dialog will include a form with a file type,two fields for height and width and a button (upload to server).On adding a image file and fields and clicking upload button,ajax call will be sent (am i right here? or form submit should handle it.) to the server where a particular view will handle saving image to a specified folder.
On success server will return the full path of the image and dialog will insert in the editor.
Sorry if my question is very naive but I just wanted to know if my assumptions are right before starting off.
Thanks
There is a Django package
https://github.com/django-ckeditor/django-ckeditor
This comes with a demo app. I would advise to look into that, and see how it works.
Basically you will have to configure the media url and there is a setting for ckeditor where to upload the media. Ckeditor will handle the image upload for you.
Uploaded content will be show in an overview page, where you will have the option "use image in text"

Keeping the original behavior of a file input in Fine-Uploader

My problem is this: i have a form with a file input. This file input has a onchange event attached. How can i add Fineuploader to handle things like validation (fize size, format,), thumbnail previews, but not the upload of the files and keep the original behavior of the file input?
If you want to take advantage of many of Fine Uploader's features (chunking, progress, etc.) you're going to need to make sure your upload endpoint is set up the correct way. PHPFox's source is not open so I cannot see how their upload endpoint(s) work. One idea is to contribute your own. We have PHP examples.
Another theoretical idea is to turn autoUpload off in Fine Uploader. Use addFiles or addBlobs to add files to Fine Uploader from the input element's onchange, then use drawThumbnail, validate, etc. on Fine Uploader's files, but then have the actual file/form submission occur via the PHPFox addon form (i.e., Fine Uploader's upload button does nothing). FU's API methods and Core Options are going to be essential for this.

How to insert an image from client-side into an editor?

Like an "insert" menu, by which to insert an image into the editor, using JavaScript, I've no idea what's the solution at all,
should be in 2 steps:
Let the user choose an image (this should be doable by an input type=file).
Insert the chosen image into editing context(don't know how to implement).
You won't be able to achieve this without uploading the image to your server, since the only reference you can have inside the text area is to a public website (i.e. not the users hard drive).
I'd recommend checking IMCE; that's what I use.
It allows the user to upload images. Together with a nice WYGIWYS editor such as TinyMCE it works like a charm.

Categories

Resources