The WYSIWYG Editor

Like almost any other CMS, Publii includes a WYSIWYG (What You See Is What You Get) editor for content creation. This editor allows users to write text, insert pictures and other elements much like you would in a standard word processor like Microsoft Word, and converts it to browser-friendly HTML for you. As such, you'll find writing content to be easy even if you've never built a website before, but there's a few additional options it's worth knowing about that are available via the editor's toolbar, which we'll look at here. 

The WYSIWYG Editor Toolbar

As with any standard word processor, the WYSIWYG editor includes options for common text formatting, as well as more website-specific functions. In this section we'll cover each of the options from the toolbar. If you are unsure of what a particular icon does, simply mouse over it to see a tooltip. 

Basic Formatting

There are some options that no word processor should be without, and the first section of the toolbar covers these:

• Change text to Bold.
• Change text to Italic.
• Add Underline to text.
• Strikethrough text.
• Align text left.
• Align text to centre.
• Align text right.

In this first section there are also some options that are less common in word processors, such as Insert/Remove Link, Insert Image, Insert Video and Create Table of Contents, as well as options that are common in word processors but that have additional options or work slightly differently such as Bulletlists and Numberlists. Information on these options may be found below. 

Inserting and Removing Links

To insert a link, move the cursor to the area where you want to add the link, or highlight the text you want to change into a link, then click the Insert Link icon in the toolbar. This will open a pop-up menu with additional link options, as follows:

• Url - Insert the URL of the page you want the text to link to here. If you want to create an anchor link to another heading on the same page, clicking this field will display a list of available headings, as well as the default top or bottom links.
• Text to display - Enter the text that should be changed into a link here; if you highlighted a block of text before clicking the icon this will already be filled.
• Title - Text entered here will be displayed when the link is hovered over by the user. 
• Target - If set to None, the link will open in the same browser window. If set to New Window, the link will open in a new tab or window, depending on user settings.

Click Ok once the fields have been completed to insert the link. To remove a link, simply click on the linked text in the editor and then click on the Remove Link icon in the toolbar.

Inserting Emoticons

The Publii WYSIWYG editor includes an extensive selection of emoticons that can be inserted into your content. To open the emoticons screen, click the Emoticon icon (which looks like a smiley face) in the toolbar. This will open a pop-up with the emoticons available:

From here, you can select which emoticon you would like to insert into your content. The categories on the left of the pop-up allow you to filter the emoticons by subject, or you can use the Searchbar at the top of the pop-up to search for a specific emoticon. When you find the emoticon you want, click on it to insert it into your post.

Inserting Blockquotes

Blockquotes are a great way to highlight important pieces of text in your post, or to draw attention to specific quotations. To insert a blockquote, click the Blockquote icon in the toolbar. This will centre-align your text, increase the font-size, and add an icon preceding the text to indicate that it is a quote. You may then continue entering text as normal; hitting Enter once will move the cursor down a line, but preserve the blockquote styling. Press Enter again without adding more text to end the blockquote.

Inserting Bullet and Number Lists

Publii includes the two basic list styles that can be found in text editors; bullet and number lists. They are essentially the same, but bullet lists display each item with a single bullet-point, making them useful when inserting a list of things that are not ordered, while number lists use ascending numbers instead of bullet-points, making them better for instructions that need to be followed in order. 

To insert a list of either type, place your cursor where you want the list to be inserted, and click the bullet or number list icon. This will create the first item in the list. Enter the text for the item, then hit Enter once you are finished to automatically create the next item. Once all items are added, hit Enter on a blank item to remove the blank and end the list. 

One additional feature in Publii's editor is the ability to choose a specific style of number or bullet; by clicking the arrow to the right of the Insert List icons you can choose to stick with the default style, or alternatives such as roman numerals, discs or squares.

Inserting Images

There are two ways to add images to your posts. The first, and easiest, is to simply drag and drop the image you wish to use onto the editor area; the image will be automatically uploaded and inserted to the currently-selected cursor position. However, this method only inserts the image with default settings. If you would like more fine-tune control over the images appearance, you should instead use the Insert/Edit Image button, which is at the top-right of the editor's toolbar.

Clicking it will open the Insert/Edit Image boxout, where you will see a set of five options which will allow you to make changes to the image's appearance. These options are:

• Source - Displays the path to the image that will be inserted into the post. Click on the icon to the right of the field to open the file browser, then select the image you wish to insert from your computer. Alternatively, if the image you wish to use is located online, then you can enter the URL to the image in this field; remember to ensure you have the necessary permission to post an image if you do not own the rights to it!
• Alternative Description - Add a description to the image; this will be displayed should the image fail to load, or read by a screen reader to provide information on the picture for the visually-impaired.
• Width/Height - Sets the width and height of the picture in pixels; when an image is selected the actual dimensions will be automatically populated in these fields, though you can change them to resize the image if needed. 
• Constrain Proportions (Padlock Icon) - When this option is enabled the aspect ratio of the chosen image will be preserved when resizing, ensuring that the image doesn't appear too stretched. Once enabled, entering a width into the Width field will automatically populate the height field with the appropriate size.
• Class - This option allows you to modify the appearance of the image in the post. Choose from Full Image, which sizes the image to fit the entire text column, Wide Image, which stretches the image to the edges of the page, or a Left, Right or Center-Aligned Image, which places a smaller version of the image to the left, right or center of the screen to mimic a newspaper layout.
• Show Caption - When this option is enabled a caption box will be added underneath the inserted image in the editor, where you can enter caption text for the picture.

Note: If you are encountering issues when uploading, modifying or generating images, try switching from the default Sharp image engine to the included JIMP engine, which may be more stable for you. You may change which engine is used for modifying images in the Global Settings section (options available for Windows and MacOs user only).

Editing an Existing Image

If you've previously inserted an image to your post and wish to modify some of its settings, you may do so by first clicking on the image you wish to modify in the editor, then clicking the Insert/Edit Image button. This will reopen the pop-up boxout containing the image options, which you can then modify accordingly.

Inserting Galleries

Galleries in Publii are powered by Photoswipe, a lightweight solution that creates touch-friendly image galleries with minimal effort.

Creating a Gallery

1. To add a gallery to a post, click on the icon that displays multiple images (to the right of the standard Insert Image icon). A section representing the gallery will be added to the post body defined by an outline, with an Add images to gallery button in the center.
2. Click on the Add images button to open an Edit gallery popup; if this is a new gallery a file explorer window will also open, where you can select any images to add to your gallery.
3. Double-click on an image to add it to your gallery; once it is added, you may add alt text and an image caption to it via the fields provided.
4. To add more photos, click on the Add images button at the bottom-right of the edit window.
5. Once all your images have been added, select the number of columns for the gallery using the drop-down box at the bottom-left of the edit window, then click the Ok button to save changes.

Editing a Gallery

To edit a gallery, open the post containing the gallery you wish to edit, then click on it in the WYSIWYG editor; this will re-open the Edit gallery pop-up so you can add or remove photos, edit the alt text or captions, the number of columns and change wide / full width alignment.

Customizing Your Gallery

You can customize the style of your galleries to help them fit with your site aesthetic, and set which controls users will be able to access. Each of these options is applied globally to all galleries on your site, and may be found by clicking the Theme option in the left-sidebar, then clicking the Gallery tab in the Custom Settings section of the Theme Settings page. The available options are:

• Item spacing - Sets the amount of white space between each gallery image, which is defaulted to 0.5 REM; REM values are recommended to maintain relative spacing on different screen sizes (basically, the size of the space between the different photos stays relatively the same on all screen sizes, so no massive gaps on small screens), but others such as px and vw may be used.
• Lightbox style - Define whether the lightbox (the background shown around a photo when you click on it in the gallery) is light or dark colored, to fit your site aesthetic.
• Lightbox overlay transparency - Sets the transparency of the lightbox when viewing a single photo; a setting of 0 will be fully-transparent, while a 1 will be totally opaque.
• Advanced lightbox settings - When enabled, additional options for controlling your lightbox will be shown.

If advanced lightbox settings are enabled, the following additional options will be available that provide further controls in the lightbox in addition to the standard touch controls:

• Current slide/total number - If enabled, the total number of images in the gallery as well as the number of the currently-viewed photo will be displayed in the lightbox.
• Zoom in/out button - Controls whether a separate button for zooming in and out is added to the lightbox; users can also zoom in or out by clicking or tapping the image.
• Toggle fullscreen button - Adds a button to make an image full-screen for more detailed viewing.
• Share button - Enables a share button so that users can share your photos via social media.
• Close button - Displays a button to close the lightbox when viewing a single photo.
• Next/Previous arrows - Enables buttons for scrolling between photos in a gallery.
• Preloader - Enables a preloader animation that will kick in whenever images take longer than 1s to load.
• Close gallery on page scroll - If enabled, the gallery lightbox will be closed when the user scrolls down the page (note that this option only applies to devices that do not support touch, such as desktops).
• Keyboard navigation - Allows desktop or laptop users to use their keyboard to navigate between images in the gallery.

Inserting Video

Online video provided via Youtube, Dailymotion and the like is a popular way to provide and consume content, so Publii includes support for embedding these videos to your posts. To insert a video, just like when inserting an image, place your cursor in the editor where you want the video to be inserted, then click on the Insert/Edit Video option at the top-right of the editor toolbar; this will open the pop-up boxout with the video-specific options, which are:

• Source - The source URL of the video you wish to embed; simply copy the full URL (for example, http://www.youtube.com/watch?v=11a11a11a11) and add it into this field; the embed code needed will be automatically generated. Alternatively, you can copy the provided embed code directly from the video's page and insert the full code into the Embed tab, available by clicking the Embed text at the top of the boxout.
• Width/Height - Set the width and height of the video as you want it to appear in the post, in pixels.
• Constrain Proportions (Padlock Icon) - As when inserting images, enabling this option will ensure that the aspect ratio of the video is preserved when resized; once enabled, entering a width into the Width field will automatically populate the height in order to match the original aspect ratio.

You should also see three different sections listed on the left side of the pop-up; General (the default section), Embed (allows for embed code for your video to be added instead of specifying a direct source), and Advanced. The advanced options allows for two additional settings:

• Alternative Source URL - If you have an alternative location that Publii may use should the first source not work, enter it here.
• Media Poster (image URL) - Set the thumbnail for the video as it will be displayed on the blog. You may enter a URL to the image you wish to use, or click the up-arrow icon to the right of the field to upload your own image to be used as a thumbnail.

Editing a Video's Settings

If you've already inserted a video and wish to change the settings later, click on the video in the editor, then click on the Add/Edit Video button to open the boxout containing the specific settings for the selected video, where you will be able to make your required changes.

Inserting Tables

Tables in the WYSIWYG editor work much like they do in applications such as Excel. It is useful for displaying data such as pricing, survey results etc...

To insert a table, place your cursor in the editor where you would like to add a table, then click the Table icon in the toolbar, which will open the additional table options. Before your table can be inserted into your content you'll need to define the size; you can do this by highlighting the Table option, which will display a grid. By highlighting a cell in the grid with your cursor you can set the total number of rows and columns; click on the cell to set the size and insert the table. 

From here you can click on the individual cells to insert content. You may also click on the Table icon again to set addition options, like cell padding and spacing, border and colours, as well as perform basic tasks that you will see in Excel, such as inserting additional rows or columns, merging cells and the like. 

Creating a Table of Contents with Anchor Links

The Post Editor includes an option to auto-generate a table of contents for your post, which can be useful for longer-form content. To insert a table of contents, click on the section of your post where you want the table to be added, then click on the corresponding Table of Contents icon, which is the top-right icon in the editor toolbar. 

The inserted table will be auto-generated from each of your Headings, with nested headings being grouped together into subsections e.g. the first H2 heading will be listed as section 1 in the table, with any H3 sections under it appearing as section 1.1, 1.2, 1.3 etc...and any H4 sections between the H3 headings appearing as 1.1.1, 1.1.2, and so on. 

Each item in the table of contents will also have an anchor link assigned to it, so users can click on an item in the list to instantly jump to that section in the post. 

Changing the Table of Contents Title

By default the table will have 'Table of Contents' as its title. This can be changed by clicking on the title of the table in the editor; you can then delete or modify the title as needed.

Updating the Table of Contents

If more sections and headings have been added to the post after the table of contents was generated, you can update it by clicking on the table in the editor, then clicking the circular Update icon that appears just under the last item in the list. 

Formats

Each theme in Publii includes additional formatting options for highlighting text, beyond the basic bold or italic. These formats are accessible via the Formats section in the bottom-left of the editor toolbar. Each theme has its own unique formats and styling; they can be used to highlight blocks of text with a colourful background, insert a drop-capital letter at the beginning of a sentence, or offset text. 

To insert the desired format, place the editor cursor where you want the format to be used, then click the Formats option in the toolbar and select your desired format from the drop-down list. You can then type as normal, and the formatting will be applied. Hitting Enter will end the formatting and start a normal line of text.

You may also insert formatting into existing text by highlighting the text selection, then clicking the Formats option and choosing a format type as normal. 

HTML Formats

The HTML Formats option, which is the second option from the bottom-left of the editor toolbar, allows you to change the HTML tags for the text that you are writing, including Headings, Paragraphs, Address, Pre and Code. As with the other formatting options, you can select the format before typing the text, or highlight a text selection and change its format. More information on the basics of HTML can be found in the Posts section of this guide.

Find and Replace

When you need to make a lot of changes in one go, utilising the find and replace function will save you a lot of time. To access the Find and Replace function, press CTRL+F or Command+F on your keyboard, or click the Magnifying Glass icon in the toolbar. This will open the Find and Replace pop-up box, where you have access to the following options:

• Find - Enter the text you want to find in your content here.
• Replace with - Enter the text you want to replace the found text with here.

Clicking on the Gear icon in the bottom-left of the pop-up will also show two additional options:

• Match case - If this option is enabled then the search will only look for strings that exactly match the case as entered in the Find field; very helpful if you need to change multiple lower-case words to upper-case or vice-versa.
• Find whole words only - If this option is enabled the search will ignore matching text that is part of a larger word e.g. searching for 'up' with this option enabled will ignore longer words such as 'upset'. 

Once the options have been set, click on the Find button at the bottom of the pop-up to search; any matches will be highlighted in your text, with the currently-selected match highlighted in blue. You may then choose to Replace the single match, or Replace all to change all matches. To move between matches, you can click the up and down arrows next to the Find field.

Horizontal Line

Clicking the Horizontal line icon will insert a separator underneath the currently-selected text, indicating the end of a section. The style of the line will change depending on the typography of the theme you are using, but the functionality is always the same. 

Read More

A read-more is a tool that is quite specific to online writing. Some themes in Publii will display each post in order in their entirety on your frontpage and paginated pages. If you've written a longer post that you'd rather wasn't fully-displayed on your frontpage listing, inserting a read-more will hide any text after it, allowing users who want to read the complete post to click through to the individual post page. 

Note: Most Publii themes have settings to control the length of preview text on the frontpage, so read-mores are not always necessary. However, it may be useful to add readmores into your text regardless if you plan to change your theme at a later date, as your new theme may not include these settings.

Clear Formatting

Clicking this icon will remove all formatting in the selected text. This may be used if you have accidentally used bold or italics throughout a text, or want to return a block of text to the default look to restyle it from scratch.

Undo/Redo Changes

Everyone makes mistakes, or is caught out by an unexpected editor behaviour that makes a mess of your formatting. In such cases you can click the Undo button, represented by a back-arrow, to revert the most recent change. If you Undo something but then decide that you liked the change, you can hit the Redo button to re-implement the changes.

Post Autosaves

Publii includes an autosave feature to protect your post from any unexpected closure such as power loss, or from a simple change of mind after closing a post. The autosave occurs every 10 seconds when editing a new post; if you then close the post screen, whether intentionally or due to an external factor, a draft of the autosaved post will be saved and held for 30 minutes, allowing you to restore any lost changes. To restore a draft, after reopening the edit post screen, click on the Restore Last Draft button that appears on the right of the editor toolbar; it has an icon that looks like a rewinding clock. Once done, the drafted text will instantly appear in the editor, ready to edit.

Source Code Editor

If you're comfortable with using HTML, or you'd like to do some more advanced edits such as adding CSS classes to your post content, you can do so by switching to the Source Code Editor. Click on the HTML tag symbol in the editor toolbar to switch to the source code. The functions of the TinyMCE editor are not available when working with source code, but you can search for specific content using the search bar, accessible by clicking CTRL + F.

One additional option that is available specifically in the source code editor is the Beautify Code button; when clicked, the source code of your post will be formatted to make it easier to read and modify, rather than for efficiency. Alternatively, you may set the editor to always beautify the code without the need to click the button every time; you can do this via the Three-Dot Menu. This menu can be accessed by clicking on the Three-Dot Icon at the top-right of the app (on any page except when editing a post, tag, or menu) to open the main menu, and then clicking on the App Settings option to open the App Settings screen.

From here, scroll down to the Experimental Features section and enable the Auto-Beautify Source Code in the WYSIWYG Editor option and click the Save Settings button at the top of the page. Once done, the source code editor will always beautify the code when opened.

Inline Editor

For ease of formatting your text content, the Post Editor includes an inline text editor; highlight any piece of text in the editor and a small version of the main toolbar containing the more commonly-used options such as bolding or underlining text and inserting links will appear. 

Advanced Link Insert

The inline editor provides a more robust link inserter tool which includes additional options to fine-tune link behavior. Access it by highlighting the text you want to change to a link in the post editor, then clicking the chain icon in the inline editor toolbar that appears above the text. A popup will appear with the following options:

• Select link type - Set whether you want to link to a post, tag or author page, the frontpage of your site, or an custom URL in this drop-down list.
• Post, Tag or Author name - This option is only available when the Post, Tag or Author page is selected in the previous section. All available items on your Publii site will be shown when clicking the drop-down list, but you can use the search box at the top of the list to filter items if you have a lot of content on your site.
• Custom link - Sets the link URL. Only appears when the Custom link link type is selected.
• Link target - Sets whether the link redirects the user's current browser window (The Same window option), or opens in a new tab (The New window option).
• Link label - Sets the text that should be displayed as a link in the content; if you highlighted text beforehand this will be automatically added to this field.
• Link Anchor - Sets the target to an anchor that is on the same page as the link, allowing users to jump to a specific section quickly. The drop-down list will display any anchors that have been added to the page for selection.
• Link title attribute - Sets the HTML title attribute for the link element. Text entered here will appear as a tooltip when the user hovers over the link on the published website.

Markdown Shortcuts

The TinyMCE Editor in Publii does not currently include a full markdown editor, but it does have support for the most common shortcuts, which will help you create your post content faster.

Inserting Headings with Markdown

The heading elements in HTML (H1-H6) are used to create titles for your content. Each heading 'level' is used to show where a particular title is in the post hierarchy; for example, the main title of a page or article will use the H1 heading, while each subsection of the article will use an H2 heading. If each section has its own subsections, then they will usually use the next heading down; a subsection under a H2 heading will use a H3 heading, and so one. This creates a structure to your content that is easily understandable to both people and computers! In Publii, the main H1 title is created by the 'Title' field in the post editor, and the other headings may be added manually as you create your content. With markdown shortcuts, this can be done very quickly and easily.

To insert a heading using markdown, you add hashes (#) corresponding to the heading you want to insert before your title. So, to insert a Heading 2 element (H2), you would write:

## My heading 2 title

...then hit enter. The Post Editor will automatically convert this to a Heading 2 element in HTML. If you want to insert a Heading 3 (H3) element, just add three hashes before the title, and so on.

Inserting Lists with Markdown

There are two types of lists that are common in HTML, and in writing in general; ordered lists, or lists with numbered items, and unordered lists, which use bulletpoints instead of numbers for each item. Inserting them using markdown is extremely fast and easy. For an unordered list, type a star (*) or a hyphen/dash (-) followed by a space before the first item's text in a list. When you hit enter, the text will automatically change to a bulletpoint item. For example, typing:

* The first item in my unordered list.

...and hitting the enter key will add a bulletpoint before the text, and automatically create a second bulletpoint for your new line of text, so you can add the next item. Simply add your next item, then hit enter again to create a third item etc...Once you've added all the items you want, pressing enter on a blank item will end the list.

Inserting ordered lists works in exactly the same way, but instead of using a star or hyphen, you can just start to write the list using "1. ". The item will automatically be formatted into a list. Once you've added enough items, just hit enter on a blank item to end the list.

Adding Bold or Italic Text with Markdown

Markdown can automatically change your text to be bold or italic by wrapping the text in the appropriate symbol, in this case a star (*) for italics, and two stars (**) for bold. To make a sentence bold, you should add two stars before and after the text. For italic, add one star before and after the text:

**This text will be bold**. 
*This text will be italic*. 
This text will be unchanged.

The Post Editor will change the text as soon as you press space after adding the last star, so you'll know immediately that is has worked.