Images and links

Images perhaps are one of the most frequently used resources when it comes to writing blogs or documentation. Being able to insert pictures quickly into your document is essential in terms of productivity.

Adding links into a document is a common requirement too. For example, in a documentation site, it's helpful to link different pages together as cross-references.

Document Node provides a few ways to insert images and links into our documents quickly, which is available for both the Markdown editor and Rich Text editor.

Project images

To insert an image into the current cursor position, select the application menu Edit -> Insert Image.

screen-menu-insert-image

Or select Insert Image from the context menu.

screen-context-menu-insert-image

Or, use the keyboard shortcut Cmd+Shift+I on macOS (Ctrl+Shift+I on Windows and Linux).

And then, the image popup, which lists all images within the current project, will be shown as below.

screen-editor-image-popup

Click an image thumbnail to insert into the text editor directly. To choose an external image, click the "Folder" icon on the top right corner.

Dragging from projects

Another way to add project images or links is to drag them from the left side projects tree into your text editor.

If the dragged file is an image file, an image tag will be added into the document automatically. If the dragged file is a non-image file, a hyperlink will be created instead.

Dragging from disk

A more natural way to add external images or resource links is to drag them from the Apple Finder on macOS (or, Windows file explorer, and file manager on Linux) into your document directly.

While the images or links being added into the current document, the images (or files) you have dragged will be copied into the project automatically.

Dragging from browser

We often need to download images from the internet and add them to our documents.

In Document Node, you don't have to download it manually. Just drag the image from your web browser into the Document Node text editor, and it's done.

For most raster images, a copy will be saved into your project automatically. For GIF and SVG images, the remote link will be used in your document.

Copy-and-paste

If you get used to the copy-and-paste keyboard shortcuts, you will be happy to know that you can use it in Document Node for many different tasks.

Specifically, you can copy one or more files from the projects tree view and paste them into your text editor. Image files will be inserted as images, and non-image files will be added as links.

The same thing can be done from your disk. Just copy one or more files from anywhere on your hard drive, and paste them into the Document Node text editor.

Pasting screenshot

Taking screenshots for documentation is a regular task for writers. Document Node supports a feature that allows us to paste a screenshot into the text editor directly.

On macOS, use the shortcut Ctrl+Cmd+Shift+4 (a portion of the screen) or Ctrl+Cmd+Shift+3 (entire screen) to take a screenshot, and then go back to Document Node and press Cmd+V, you will have the screenshot inserted into the document automatically.

It's the same on Windows and Linux. Just use a different shortcut Alt+PrintScreen.