Paste images from MS Word to contenteditable div - javascript

I've created a text editor, using a contenteditable div. The user can copy and paste text from word to the website. Only the images aren't working, because the src points to a local path.
I think I should encode the image to base64, before it is displayed, but the problem is, that the images cant be displayed, because they are local files.

Try using some remote server to hold the photos so that they can be utilized. Try something like picpaste.com, however they only hold files temporarily I presume.

Related

I have downloaded a text file. Instead of downloading I want to display it in a html page using javascript

I try to convert a pdf as base64 string. I converted it and saving it to text file. Iam able to download the text file. But i dont want to download it instead of download it i want to display it in a html page. While clicking that text file i should be able to view the content of the text file. Is there any possible way to do it in javascript.
I have attached the below Link
https://codesandbox.io/s/nervous-flower-nxmtw?from-embed
You can use a iframe and put the text file link to src
Note* - the above solution is with the limited information i have understood .

HTML/CSS local text file

This is driving me crazy but is there a way to read a local text file from my computer and have it display the text from the text file to the page.
I've tried:
<iframe src="test.txt" frameborder="0" style="color: white;"></iframe>
However, you can't change the text color and I assume you can't change the font-family. Is this any way possible?
EDIT: I'm trying to make an overlay on OBS where the HUD fades away and comes back, however, there are several texts located in text files that I need to use since they change, for example, last follower. The name of the follower gets added to the text file in which I was hoping I can display and modify the font color and family to fit the theme of the HUD. I only plan on using the html page locally through browser source.
Take a look at this Javascript plugin, it can help:
https://github.com/systemjs/plugin-text
this plugin gets the text and stores in a variable, so you can use this variable to replace some innerHTML of an element, like a >p<, >div<, etc...
Or, you can use the simplest way, jQuery .load() function:
http://api.jquery.com/load/

Dynamically loading images with unknown image type, JS, HTML

So, what I have is a Chrome extension. It scrapes a page looking for certain phrases (such as 'smile') and replaces them with an image stored locally with the same name ('smile').
The problem is, I have ~1k images that are a mixture of .gif, .jpg and .png
So I am not sure of the most efficient way to load up the image with the proper src location.
Idealy I would have it try smile.gif, smile.jpg and smile.png until it found which one is right but I don't want crazy overhead
To clarify, I already know how to detect the reference words in text -> which gives me part of the filename (for example 'smile') -> but I have no way to know at this point whether 'smile' is stored locally as a jpg/png/gif so I can't direct the <img src=.... to the exact right location.
Would it be possible to go through the directory and create some json with filename: extension, and then reference this? I am assuming I can't do this in Javascript though
Any suggestions?

Pasted image from word appears as link to user computer

I have a problem with pasting some images in some editable div.
Most of the time when I paste an image from word i get it in the form of a base64 image string. The problem is that some times when i paste in image i get
<img width="309" height="198" src="file:///C:/Users/Robert/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" />
As you can see instead of the image string I get the URL to my temp folder, i think this has something to to with the image size but i'm not really sure.
I would also like to mention that i use firefox, but the same think happens in IE.
Is there a way i can get the image to be pasted as a base64 string ?
Update
I figured out that this only happens if the document is a .doc not .docx. But i would like to make it work from both types
Thanks alot.

retrieve image from clipboard

HI
I want to get an image from the system clipboard (Windows/Mac) and paste it into
can it be done in javascript?
No, JavaScript would not be able to paste image data into a web page. There are no HTML elements that can display pasted image data.
If there's a way to grab the data URI (I can't figure out how, can you? it seems only text is available from the clipboard) then you could append <img src="data:image/png;base64,9A8SDF7ADSF9=="> to a wysiwyg field where the gobbledygook is the data URI. Then assuming you want to save that, you'd have to do some parsing on submit, write the image to a file and do with it as you will, or store as a blob or something.

Categories