Admin Composer

Ray Fan edited this page Oct 4, 2018 · 6 revisions

Composer is where you produce a post. It has 3 parts shown in the picture below with different color of rectangles, Topbar (red), Sidebar (green) and Editor (orange). A post can be either published or draft, depending on this status the Composer behaves slightly differently.

Topbar

The Topbar of the Composer shows a list of buttons that allows you to publish, update, save (autosave), preview and close the post.

Autosave

The Composer autosaves your work for you after you stop typing for a few seconds (by default 10 seconds). If you continue to type after a short break but before the threshold it won't carry out autosave. When autosaves happens you will see a disabled text SAVED.

⚠️ It's only for drafts. When a published post is being updated, you don't want to autosave it to accidently show the public your unfinished work.

Note: currently offline support is not there, you need to be online for this to work.

Save

Under certain conditions by design Autosave will not happen, instead you will see the save shows up and you can click on it

  • you make changes to the content of a post that is published (this is just discussed above)
  • when you make changes to elements on the sidebar or post title, not in the editor

In these circumstances, you have to click on the save button to save the post.

Publish / Update

Depending whether the post is published or a draft, you would see a Publish or Update button. The post title is the only thing that is required, when that is missing the button will be disabled.

Sidebar

The Sidbar contains post information such as post status, date etc.

Revert to draft

For quick changes to a published post, you just make your changes and hit Publish. But if you find yourself making lengthy changes, I recommend you Rever the post back to draft, so that autosave can help you save.

Post Date

You can choose any year, month and date, the time will just be the time you hit Publish. Currently there is no scheduling, if you set a future date it'll just show up with that future date.

💥 Be careful to update a published post's date, it may cause issues with search engines as the URL of a post has yyyy/mm as part of it.

Category

When you open the Composer to create a new post, the default category will be selected for you automatically. All posts must have a least one category. See Admin - Categories.

Tags

You can have zero to many tags. ⚠️ The tag selection comes from a dropdown, but if you enter a brand new tag just hit "tab" to delimit it.

Slug

Slug is the human friendly URL. The slug auto generates from Title when it first saves it, it's good practice to make sure it's a value you like.

💥 Be careful to update a published post's slug, it will cause issues with search engines.

Exerpt

When you set the Display post in option to Excerpt on the Blog settings, the blog will show an excerpt for each post instead of full body. Category and tag pages by default show excerpts. If you leave this field blank, the blog will calculate an excerpt from post body for you.

Editor

Basic Content

The Composer uses CKEditor5 for content editing, I highly recommend checkout its documentation on how to input different content elements, keyboard shortcuts and Markdown support.

As a challenge, try input the following yourself

  • paste some html content without styles
  • add heading, list, bold text with markdown
  • add link without clicking the toolbar, then try move your cursor outside the link to contiune typing regular text

Images

Clicking on the image icon on the toolbar will launch the Media Gallery and you can upload and select images to insert, see Admin - Media Gallery for details.

Limitations and Workarounds

The editor does have limitations, but CKEditor team is actively working on these

  • source code block (inline code is supported)
  • media elements such as youtube video, tweets etc.

For right now, I provide Shortcodes for you to insert your source code and youtube videos.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.