Skip to content
This repository has been archived by the owner on Dec 1, 2023. It is now read-only.

Latest commit

 

History

History
41 lines (26 loc) · 2.37 KB

editor.md

File metadata and controls

41 lines (26 loc) · 2.37 KB

Editor

This section introduces the main editing tool you will see in many places: Pagekit's powerful editor.

Overview

The Pagekit Editor supports HTML as well the the popular Markdown syntax. The included auto-completion will adapt to the activated language. To toggle Markdown, just click the checkbox below the editor. You can also include HTML snippets in Markdown.

Above the content area, you'll find a toolbar with the most frequent formatting tasks. Select text styles, insert links, quotes, lists and media elements. Depending on the current editor mode, the toolbar will automatically insert HTML or Markdown snippets.

In the top right hand corner you can see an arrow icon to enter full screen mode. If you are on a large enough screen, you will see a side by side view of your content source on the left and the rendered preview on the right. On smaller devices, this will be displayed in two separate tabs.

Markdown editor

Images

To insert an image, just click the image icon and a modal will appear where you can choose a picture from Storage. When the Storage dialog is open, you can also drag and drop the desired image file from your local file browser. Once an image is selected, click the update button and the image shortcode will appear in the current cursor position.

Insert an image

Note You can always open the dialog again by placing the cursor inside the shortcode and clicking on the toolbar icon.

Videos

As with images, inserting a video is as simple as clicking the video icon and using the modal dialog.

Adding a video

Links

To insert a link, select the text you want to link and click on the link icon from the toolbar. You can also insert an link without selecting any text in which case the title will be used as the link text.

Adding a link

Text Editing

The remaining toolbar icons are for other frequent text editing tasks. Just select the text to be edited and click on the desired icon to apply its style.