GHOST CMS - Editor编辑器

Editor

The open-source Ghost editor is robust and extensible.

Overview

More than just a formatting toolbar, the rich editing experience within Ghost allows authors to pull in dynamic blocks of content like photos, videos, tweets, embeds, code and markdown.

For these author-specified options to work, themes need to support the HTML markup and CSS classes that are output by the {{content}} helper. The following guide explains how these options interact with the theme layer and how you can ensure your theme is compatible with the latest version of the Ghost editor.

 and 

Images and embeds will be output using the semantic 

 and 

elements. For example:

Output

class="kg-image-card"> class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg"> >An example image> >

The following CSS classes are used:

• .kg-image-card is used on the 

   element for all image cards

• .kg-image is used on the  element for all image cards
• .kg-embed-card is used on the 

   element on all embed cards

This is only relevant when authors use the built-in image and embed cards, and themes must also support images and embeds that are not wrapped in 

 elements to maintain compatibility with the Markdown and HTML cards.

Image size options

The editor allows three size options for images: normal, wide and full width. These size options are achieved by adding kg-width-wide and kg-width-full classes to the 

 elements in the HTML output. Here's an example for wide images:

Output

class="kg-image-card kg-width-wide"> class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg"> >

Normal width image cards do not have any extra CSS classes.

Image size implementations

The specific implementation required for making images wider than their container width will depend on your theme's existing styles. The default Ghost theme Casper uses flexbox to implement layout using the following HTML and CSS:

Output

class="content"> > >Image size implementation> >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.> 
class="kg-image-card kg-width-full"> class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-2.jpg"> >A full-width image> > >Fusce interdum velit tristique, scelerisque libero et, venenatis nisi. Maecenas euismod luctus neque nec finibus.> 
class="kg-image-card kg-width-wide"> class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg"> >A wide image> > >Suspendisse sed lacus efficitur, euismod nisi a, sollicitudin orci.> > > >An example post>

And the CSS:

style.css

.content {
  width: 70%; margin: 0 auto; } article { display: flex; flex-direction: column; align-items: center; } article img { display: block; max-width: 100%; } .kg-width-wide img { max-width: 85vw; } .kg-width-full img { max-width: 100vw; } article figure { margin: 0; } article figcaption { text-align: center; } body { margin: 0; } header, footer { padding: 15px 25px; background-color: #000; color: #fff; } h1 { width: 100%; }

Negative margin and transforms example

Traditional CSS layout doesn't support many elegant methods for breaking elements out of their container. The following example uses negative margins and transforms to achieve breakout. Themes that are based on Casper use similar techniques.

style.css

.content {
  width: 70%; margin: 0 auto; } article img { display: block; max-width: 100%; } .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin: auto calc(50% - 50vw); transform: translateX(calc(50vw - 50%)); } .kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } article figure { margin: 0; } article figcaption { text-align: center; } body { margin: 0; } header, footer { padding: 15px 25px; background-color: #000; color: #fff; }

Gallery card

The image gallery card requires some CSS and JS in your theme to function correctly. Themes will be validated to ensure they have styles for the gallery markup:

• .kg-gallery-container
• .kg-gallery-row
• .kg-gallery-image

Example gallery HTML:

Output

class="kg-card kg-gallery-card kg-width-wide"> 
class="kg-gallery-container"> 
class="kg-gallery-row"> 
class="kg-gallery-image"> src="/content/images/1.jpg" width="6720" height="4480"> > 
class="kg-gallery-image"> src="/content/images/2.jpg" width="4946" height="3220"> > 
class="kg-gallery-image"> src="/content/images/3.jpg" width="5560" height="3492"> > > 
class="kg-gallery-row"> 
class="kg-gallery-image"> src="/content/images/4.jpg" width="3654" height="5473"> > 
class="kg-gallery-image"> src="/content/images/5.jpg" width="4160" height="6240"> > 
class="kg-gallery-image"> src="/content/images/6.jpg" width="2645" height="3967"> > > 
class="kg-gallery-row"> 
class="kg-gallery-image"> src="/content/images/7.jpg" width="3840" height="5760"> > 
class="kg-gallery-image"> src="/content/images/8.jpg" width="3456" height="5184"> > > > >

For a better view of how to support the gallery card in your theme, use the Casper implementation, which is a generic solution that works for most themes.

Bookmark card

The bookmark card requires some minor CSS in your theme to ensure the metadata is easier to digest:

style.css

.kg-bookmark-card {
    width: 100%; position: relative; } .kg-bookmark-container { display: flex; flex-wrap: wrap; flex-direction: row-reverse; color: currentColor; font-family: inherit; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.1); } .kg-bookmark-container:hover { text-decoration: none; } .kg-bookmark-content { flex-basis: 0; flex-grow: 999; padding: 20px; order: 1; } .kg-bookmark-title { font-weight: 600; } .kg-bookmark-metadata, .kg-bookmark-description { margin-top: .5em; } .kg-bookmark-metadata { align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kg-bookmark-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .kg-bookmark-icon { display: inline-block; width: 1em; height: 1em; vertical-align: text-bottom; margin-right: .5em; margin-bottom: .05em; } .kg-bookmark-thumbnail { display: flex; flex-basis: 24rem; flex-grow: 1; } .kg-bookmark-thumbnail img { max-width: 100%; height: auto; vertical-align: bottom; object-fit: cover; } .kg-bookmark-author { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .kg-bookmark-publisher::before { content: "•"; margin: 0 .5em; }

Here's an example of the HTML structure that's created by the editor:

Output

class="kg-card kg-bookmark-card"> href="https://ghost.org/" class="kg-bookmark-container"> 
class="kg-bookmark-content"> 
class="kg-bookmark-title">The bookmark card> 
class="kg-bookmark-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.> 
class="kg-bookmark-metadata"> src="/content/images/author-icon.jpg" class="kg-bookmark-icon"> class="kg-bookmark-author">David Darnes> class="kg-bookmark-publisher">Ghost> > > 
class="kg-bookmark-thumbnail"> src="/content/images/article-image.jpg"> > > >

Embed card

If a video is used with the theme then some CSS will be needed in order to maintain a good aspect ratio.

Example HTML:

class="kg-card kg-embed-card">