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

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.

Related

How to change the functionality for inserting images in TinyMCE?

My webapp has functionality for uploading images, with additional information, like image title, description, tags, copyright information, etc. I use TinyMCE for editing webpages, but I don't want to allow images to be uploaded within the editor. I only want to allow the user to choose among the images already uploaded to the server.
Would it be relatively easy to change the "Insert Image"-functionality in TinyMCE to the following:
When the "Insert Image" button is pressed, a custom dialog pops up.
The contents of that dialog is a grid view of the images on the server. No upload functionality should exist here.
An image is selected via a radio-button.
When the "Insert Selected Image"-button in the dialog is pressed, instead of just the <img>-tag, some generated HTML is inserted at the editor cursor.
I have skimmed the TinyMCE documentation, and I know about the file_picker_callback. Would I use that, and write my own javascript function to open up my own dialog? How do I control what is inserted into the document?
TinyMCE has APIs to create your own toolbar buttons that open dialogs to perform whatever task you need.
One approach is to use the TinyMCE UI: https://www.tiny.cloud/docs/ui-components/dialog/
The other approach is to use a URL dialog that embeds a remote web page you create. https://www.tiny.cloud/docs/ui-components/urldialog/
In either case you would use TinyMCE APIs (e.g. insertContent()) to place the resultant HTML into the editor.

Set Button icon using attached file

I'm creating a kind of template for users to fill out in Adobe Acrobat Pro X, but they also need to attach photos. I've created a button based on this thread here which, when clicked, prompts the user to select a file and then attaches the file to the PDF. It works beautifully, except the template pdf has multiple pages with multiple locations for photos.
I need a way to keep track of which (picture) attachment belongs to which location. My main idea so far is to simply insert code that will take the file and use it as the button's icon. (This is also good in the case where the user accidentally attaches the wrong file, then goes and uploads the right one without deleting the old one; I'll see the most recent choice and assume it's the correct one).
The other idea would be to rename the files as they get attached (to Attachment1, etc.) but this doesn't seem to be as feasible.
There are 2 different functions for the button depending on if the users are using Reader 11 or not.
When they are not using Reader, the main code looks like this:
app.alert({
cMsg: "Please select a file to attach.",
cTitle: "Attach File",
nIcon: 3,
nType: 0
});
try {
var rc = this.importDataObject("Attachment" + attachment_num);
if (rc) {
attachment_num += 1;
app.alert({
cMsg: "Attachment successful.",
cTitle: "Attachment Successful",
nIcon: 3,
nType: 0
});
I was thinking as the first line of the if statement, I could insert code to change the icon of the button that this code is running from, but I can't figure out the right thing to try. I was looking at using buttonSetIcon based on here but I'm doing something wrong, probably because of my lack of JavaScript knowledge.
What I was trying was something along the lines of this
var f = this.getField("ImageButton");
f.buttonSetIcon(rc);
It doesn't work though. I am not sure what exactly importDataObject returns in the variable rc but I was hoping it would be the file itself.
When the user is using Reader 11, this gets even more confusing because everything seems to just be one line of code, annot.cAttachmentPath;, but I'll focus on the other version first.
Any ideas?
Put the following line of code in the Mouse Up action of the button.
event.target.buttonImportIcon();
This will open a file selection dialog where the user can select the image to import and set it as the "normal" button icon. It will import the icon into the button that was pressed so you can use it for multiple buttons.
Note that in Reader, the image will need to be converted to PDF first. In Acrobat, the conversion will be automatic.
If you need a way to add images (as images) to Reader and you can tolerate the user positioning them manually, you can simply paste the image from the clipboard and it will show up in the PDF as a stamp. You need to instruct the user on how to get the image onto the clipboard though. Then they need to scale and position the image.

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.

adding a watermark only to target images (jquery)

I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.

Google image search by image uploader form style

I'm attempting to implement an image upload tool on my website, similar to how Google has done their image upload search. This would need to be able to have images dropped into it; have urls pasted into it; or have a user upload it from their own computer.
Another related question, how does Google have the selection method change when you click 'Paste URL' or 'Upload file'?
images.google.com for idea source.
Thanks in advance.
I believe Google spent several years developing the algorithms behind searching for images with other images, so if this a website you are developing for yourself, I'd explore other options. Otherwise, tell your boss it's impractical.
As for the method change, I imagine (without looking too closely) that they overlay the camera icon on the input, and on click, displays a <div> or other container element over the input field, which can then contain alternative input methods.
When the user clicks on Paste or Upload, it replaces the content of a sub container with the relevant HTML using jQuery or whichever JavaScript library it is that they use.

Categories

Resources