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.

<figure> and <figcaption>

Images and embeds will be output using the semantic <figure> and <figcaption>elements. For example:

Output

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

The following CSS classes are used:

  • .kg-image-card is used on the <figure> element for all image cards
  • .kg-image is used on the <img> element for all image cards
  • .kg-embed-card is used on the <figure> 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 <figure> 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 <figure> elements in the HTML output. Here‘s an example for wide images:

Output

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

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

<div class="content">
  <article>
    <h1>Image size implementation</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.</p>

    <figure class="kg-image-card kg-width-full">
      <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-2.jpg">
      <figcaption>A full-width image</figcaption>
    </figure>

    <p>Fusce interdum velit tristique, scelerisque libero et, venenatis nisi. Maecenas euismod luctus neque nec finibus.</p>

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

    <p>Suspendisse sed lacus efficitur, euismod nisi a, sollicitudin orci.</p>
  </article>
</div>

<footer>An example post</footer>

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

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

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

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

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:

<figure class="kg-card kg-embed-card">
    <iframe ...></iframe> <!-- <iframe> represents card content -->
</figure>

The CSS:

.fluid-width-video-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Summary

You have discovered how to ensure your theme is compatible with the full range of extensible features in the Ghost editor. For further support with themes, head to the forum.

原文地址：https://www.cnblogs.com/QDuck/p/12081529.html

时间： 2024-11-11 05:00:25

GHOST CMS - Editor编辑器的相关文章

Gitbook Editor编辑器中使用markdown语法总结

markdown是Gitbook中使用的标记语言,通常我们会使用编辑器去编辑电子书,之后再使用gitbook上传.在编辑器中也可以虽然说可以使用图形化的操作,但是也可以使用编写markdown去写电子书. 在Gitbook Editor编辑器中点击工具栏中的""会显示左侧的目录栏,点击图标"",会出现markdown语法编辑栏和非markdown编辑栏,如下图所示,左侧可以使用markdown语法编辑电子书内容,右侧则为编辑内容的实际显示效果. 1.标题 Markd

GHOST CMS - Content Collections

Content Collections Collections are the backbone of how posts on a Ghost site are organised, as well as what URLs they live on. You can think of collections as major sections of a site which represent distinct and separate types of content, for examp

GHOST CMS - 创建自定义主页 Creating a custom home page

创建自定义主页 Creating a custom home page 为你的网站创建一个自定义的主页是一个让你从人群中脱颖而出的好方法,并把你自己独特的印记存放在你的网上.本教程向您展示了如何在Ghost中自定义和开发自己的自定义主页. Creating a custom home page for your site is a great way to set yourself apart from the crowd and put your own unique stamp on you

帝国cms后台编辑器集成ueditor编辑器

我更换成百度编辑器的原因有以下几点:1.使用百度编辑器的图片粘贴上传功能,这个功能实在是太有必要了,有开发的过程中或上传的过程中,通常用qq直接截图,直接放到文章上面,避免了再放到本地保存的情况,真是麻烦 .2.使用word图片转存功能,离线的时候,可以使用Word将文章写好,然后再上传到网站上来.图片是最大的问题,使用百度编辑器可以完美的解决.3.良好的扩展性,百度编辑器貌似开发起插件来更方便容易一些.本功能不修改帝国cms核心代码,所以没得问题.下面介绍步骤:1.下载定制好的百度插件,下面是

GHOST CMS - 配置 Config

Config For self-hosted Ghost users, a custom configuration file can be used to override Ghost's default behaviour. This provides you with a range of options to configure your publication to suit your needs. 对于自承载的Ghost用户,可以使用自定义配置文件覆盖Ghost的默认行为.这为您提供

GHOST CMS - Channels

Channels If you want something more flexible than taxonomies, but less rigid than collections, then channels might be for you. A channel is a custom stream of paginated content matching a specific filter. This allows you to create subsets and superse

GHOST CMS - Custom Routes

Custom Routes Template routes allow you to map individual URLs to specific template files within a Ghost theme. For example: make /custom/ load custom.hbs Using template routes is very minimal. There's no default data associated with them, so there i

GHOST CMS - Redirects

Redirects In addition to creating routes, you can also create redirects for any time there are any changes in your URLs and you need to forward visitors Accessing the redirects file The redirects.json file is located in content/data/redirects.json an

Editor编辑器的一些用法

共有两个脚本,一个是有关Inspector面板的,一个是window的 using UnityEngine; using System.Collections; using UnityEditor; //2.枚举下拉框 //public enum OPTIONS { //    CUBE=0, //    SPHERE, //    PLANE, //} public class Texts : MonoBehaviour { //1.通过拖这个脚本可以改变颜色和曲线 //public Colo