Ability to paste images into MD editor
added in v3
Nicolas Giard
Merged in a post:
Paste image (screenshot) in Markdown mode like Github does
Daevid Vincent
It would really be great if I could paste a screenshot "inline" while in Markdown mode without having to do the whole upload file rigamarole... Look at how Github does it (like when commenting on a PR). Similarly, I don't need all my assets to be listed on every page. Only the assets on that page really need to be shown. And honestly I'd say even then if the last link to an asset is gone, then remove it. It's rare to re-use an asset isn't it? Maybe have a separate "assets" (like you have now) for things people use over and over like a company icon or fancy bullet points or something, but for copy/paste assets they're more a one-and-done sorta thing... IDK, but let's start with the snapshot/paste feature first and refine later. :) Thanks! Love the wiki!!
T
TB
Duplicate of https://feedback.js.wiki/wiki/p/ability-to-paste-images-into-md-editor
Lumos
I tried a workaround by using frontend JS to handle the paste event. The idea was to catch the paste, upload the image through the Wiki.js API, then insert the link at the cursor.
However, I couldn't get the API part to work properly. So I used another approach: Upload the pasted image somewhere else first, then paste the link back into the editor. Since I also have FileBrowser running, which is an extremely better file manager, I just made a folder there to store pasted images. It finally worked. I deployed Wiki.js and FileBrowser in the same Docker network. Then I used Nginx to reverse proxy a path from Wiki.js to FileBrowser, and injected the script into the browser.
I share my code here and hope it helps: https://github.com/jzli559/wikijs-paste-proxy.
K
Kilian Wi
Hey,
maybe you want to try to add a draw.io diagram from the markdown editor and past your image there. You can resize it, add other images or elements and save it.
In the markdown preview you just see the "Edit Diagram", so no cluttering of the editor with base64 strings.
It's not perfect, but for us this works as a great workaround for now. Would still love to see a different solution though and also have the draw.io available in the visuial editor.
Photo Viewer
View photos in a modal
Nicolas Giard
Merged in a post:
Drag and Drop images
Marco Domingos
Hi, every time I want to put screenshots/prints on a documentation page I need to upload the image first and then select her to paste where I want. Would be a nice feature to add a drag and drop so we could like to move the image to the documentation or copy paste.
d
didavas586
There is already an open PR for this feature: https://github.com/requarks/wiki/pull/5441
Under review since Jun 16, 2023 - without any further result.
Maintainer stated in the discussion that priority is version 3. No features will be added to 2.x.
But the latest update for version 3 of the blog post https://beta.js.wiki/blog is from october 2023 - so don't expect anything soon...
N
Nicolas Revill
Can't this be implemented while work is being done on 3.0? I just deployed the wiki to our web server but this is quite an essential feature to build wiki pages.
d
didavas586
Nicolas Revill build your own version by using the patch of the PR https://github.com/requarks/wiki/pull/5441. Maintainer will not bring this feature to version 2.x
A
ALEXMAR MARCA
Photo Viewer
View photos in a modal
Milan Zdimal
ALEXMAR MARCA This is exactly what our team does. There is no desire to manage an unwieldly dumping ground of images. It would be great if base64 images were more natively implemented and the renderer could covert the base64 images to dynamic generated "real" images to alleviate the burden of base 64 decoding and having to load the entire payload as part of the page load.
Nicolas Giard
Merged in a post:
Enable Image Paste from Clipboard via Ctrl + V in Editor
S
Sean Lee
Dear Wiki.js Development Team,
I hope this message finds you well. I would like to propose a feature that I believe would significantly enhance the user experience in Wiki.js: the ability to paste images directly from the clipboard into the editor using Ctrl + V.
Rationale:
Enhanced Usability:
Many modern documentation platforms, including competitors like XWiki, Confluence, and BookStack, support direct image pasting from the clipboard. This feature allows users to seamlessly insert images into their documents without the need for additional steps, such as manually uploading files or linking URLs. It makes the editing process more intuitive and efficient, especially for non-technical users.
Increased Productivity:
Users often work with images, screenshots, and other visual elements in their documentation. Allowing images to be pasted directly from the clipboard can drastically reduce the time spent on content creation. This feature would streamline workflows, especially in environments where speed and efficiency are critical.
Competitive Edge:
As an open-source platform, Wiki.js stands out for its flexibility and user-friendly design. However, lacking this feature might deter potential users who are accustomed to more streamlined editing experiences in other platforms. By implementing this functionality, Wiki.js could attract a broader audience and better compete with other documentation tools in the market.
Consistent User Experience:
Implementing clipboard image pasting would ensure a consistent user experience across different content types. Whether a user is adding text, code snippets, or images, the process should be as seamless and integrated as possible. This feature would align the image insertion process with the simplicity already offered by text and code editing.
Implementation Suggestions:
The editor could detect when an image is copied to the clipboard and automatically trigger an upload process when the user presses Ctrl + V. The image would then be inserted at the cursor's location within the document.
The uploaded image could be stored in the designated media library or a predefined directory, with a markdown or HTML image tag automatically generated and inserted into the editor.
Conclusion:
Integrating this feature into Wiki.js would greatly enhance the platform’s usability, making it more appealing to a wider range of users. I believe it would be a valuable addition to the already impressive set of features offered by Wiki.js.
Thank you for considering this feature request. I would be happy to provide any further insights or assist with testing if needed.
Best regards!
Evan Fort
I've been playing with this yesterday and found 2 work around (based on feedback here) --
1) For markdown - download and install "Paste to markdown" plugin in google chrome. You can now take a screen shot or copy and image to the clipboard and right click on the MD editor and hit "Paste as Markdown" and it will dump the base64 image in there in a way that works. It is a bit ugly since the whole base64 string is there, but it works.
2) Visual Editor - As mentioned below, if you write your article in MS Word including images, when you copy and paste it into the visual editor, the images will come over. Note, you cannot just copy the image along for some reason - you must add some text or a single space to the copy and when you paste it the image will come over. This looks cleaner than the MD version since you don't have to look at the base64 string.
V
Veera
Yes, it(2) works with OneNote too. I've been doing this for quite some time now.
Load More
→