paste a picture into the edit area

Question

paste a picture into the edit area

xu4wang opened this issue 8 years ago · 26 comments

xu4wang commented 8 years ago

copy and paste a picture into the edit area of the markdown file, the editor automatically:

create an image file,
put it into the wiki directory
add an ![image_file_name](image_file_name.jpg) into the markdown file.

Is it doable?
Thanks.

xu4wang commented 8 years ago

Answer 1 · 2016-05-19T01:39:13.000Z

Hi @xu4wang , I will consider implementing it in the future. Thanks for the idea ;)

Answer 2 · 2016-05-22T06:42:21.000Z

OK.. looking for good news then. :-)

Answer 3 · 2016-05-31T08:10:37.000Z

Hi @xu4wang ,

You can now use the command Markdown Preview Enhanced: Image Helper or the keymap ctrl+shift+i to copy the image to local assets folder.

Under Copy image to root /assets folder , click the file box and then choose file, it will then copy file to assets folder and insert link for you.

Thanks ;)

Answer 4 · 2016-05-31T10:27:58.000Z

I tried, however when I press "CTRL-Shift-i", a red alert message shows "Image Helper targets only markdown file".
I was with a mardown file open, and focused.

Anything wrong?

Answer 5 · 2016-05-31T12:40:48.000Z

Hugh that should not happen. Could you please try "ctrl+shift+p" then choose "Markdown Preview Enhanced: Image Helper"

Answer 6 · 2016-05-31T14:14:15.000Z

same... "Image Helper targets only markdown file"

Answer 7 · 2016-05-31T14:50:54.000Z

@xu4wang sorry I don't really know what caused this issue.

I have just uploaded a new version 0.6.7. In this version, Image Helper should be working for all types of files, not only .md files.

So please upgrade the package.

Sorry for the trouble. Hopefully this time it works ;(

Answer 8 · 2016-05-31T15:07:44.000Z

OK. Finally it (v0.6.7) works. ;)

Answer 9 · 2016-06-01T15:55:51.000Z

It seems that adding two pictures with the same name does not work well. Is it possible to append unique identifiers to the image name?

Answer 10 · 2016-06-03T11:25:37.000Z

My suggestion is to introduce something like a namespace to avoid conflict. Make the picture file path related to the markdown file it's being pasted to.

For example, pasting a file named "pic.jpg" to a markdown file named "sandbox.md", then

the package create a folder named "sandbox" (if sandbox is not available)
put "pic.jpg" into "sandbox"
create a link [pic](sandbox/pic.jpg)

Answer 11 · 2016-06-03T15:30:04.000Z

@xu4wang I don't think so.

It is quite possible that I will share pictures among files.
I don't want to manually manage picture names. Most of my pictures are generated by matplotlib with the same file name. Then I will rename them randomly and paste them into my markdown files. It would be great if random names are automatically generated.

Answer 12 · 2016-06-03T15:53:13.000Z

@mistguy Thanks for sharing your thought. Please find my two cents below:

if you want to share pictures among files, the picture need to be named carefully. Otherwise it will be difficult to figure out which picture to use (the only exception is for the first uploading, in that case the link is generated automatically by the system).

Answer 13 · 2016-06-04T07:05:41.000Z

@xu4wang I can copy picture addresses from the original markdown file. Actually, I think the best way to manage pictures in markdown files is to mimic a WYSIWYG editor. Managing picture files are really annoying.

I think markdownnotes (http://markdownnotes.com/) is a good example of how to manage pictures.

Answer 14 · 2016-06-04T07:14:36.000Z

Hi @mistguy , I am now trying markdownnotes. How do you insert image in markdownnotes?

Huhh I think I figure out how to add image in markdownnotes.

Actually you can upload image to imgur by Image Helper (the most bottom drop area).

I can add unique identifier support if you want

Answer 15 · 2016-06-04T08:41:09.000Z

@mistguy the new version support appending unique identifier

Answer 16 · 2016-06-04T15:40:39.000Z

Thanks. It works well.

Answer 17 · 2016-06-07T13:02:15.000Z

@shd101wyy
I noticed in the config page, we can choose the name of the image directory.
Just wondering if we can make the directory configuration support both absolute path and relative path.

For example:

/assets' means the picture will be put toProjectDirecotry/assets`
assets means the picture will be put to assets directory, under the same path the markdown file being edited.

by this way, we leave the flexibility and give user the ability to choose.

Answer 18 · 2016-06-07T13:07:40.000Z

good idea. I will change it in next version.

Answer 19 · 2016-06-13T09:44:18.000Z

@shd101wyy
I pulled version 0.7.1, and set the "Root Image Folder Paht" to "assets", the pasted image still goes to "/assets". Was expecting it goest to "assets"..

Answer 20 · 2016-06-13T10:59:34.000Z

Hi @xu4wang , you need to pull master instead of 0.7.1. It should work.

Answer 21 · 2016-06-13T11:00:19.000Z

And there shouldn't be "Root image folder path" option anymore, I changed the option name.

Answer 22 · 2016-06-13T11:10:24.000Z

OK. It works.
I noticed there are two config items:

Image save folder path
Root Image Folder Path

I was changing the second one.... If I change "Image save folder path", it worked.

Answer 23 · 2016-06-13T12:47:46.000Z

Well... this shouldn't happen.
The newest version should only have the "Image save folder path" option...
I don't know why this happened. Could you please try restarting atom or reinstalling this package.

Answer 24 · 2016-06-13T13:52:39.000Z

Agreed. It shouldn't happen.
I restarted ATOM, restarted my macbook...it's still there.
OK. let it be. it may disappear someday.

Answer 25 · 2016-06-15T07:09:30.000Z

@shd101wyy I figure out the root cause, in the config.cson under ~/.atom:

  "markdown-preview-enhanced":
    imageFolderPath: "assets"
    rootImageFolderPath: "/assets"
    useGitHubStyle: true
    useGitHubSyntaxTheme: true

Don't know why rootImageFolderPath is still there.

I removed the line rootImageFolderPath: "/assets", that configuration item disappeared. ;)