☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

content

Table of contents

Description:

This key defines input options for the Content Editor.

Appears in:
└── _editables
    └── content
Type:
Object
Properties:
allow_custom_markupboolean#

This key toggles whether CloudCannon will allow you to edit custom markup in rich text editors and explicitly accept the risk of unintentionally deleting elements that cannot be recreated.

Setting this key to true will enable editing of custom markup. When using allow_custom_markup outside of editable regions, content that uses JavaScript will not be editable for security reasons. These inputs will appear as uneditable snippets.

allowed_sourcesArray<allowed_sources[*]>#

This key defines which sources and DAMs you are allowed to upload to and browse.

The value can be an array of strings. Valid values include site-files and the reference key for any DAM connected to your site.

If site-files is omitted from the array, site files will not be available as an asset source for this input.

Show examplesHide examples

In this example, we have configured allowed sources for an Image Input.

Copied to clipboard
_inputs:
  image:
    type: image
    options:
      allowed_sources:
        - site-files
        - my-cloudinary-dam
{
  "_inputs": {
    "image": {
      "type": "image",
      "options": {
        "allowed_sources": [
          "site-files",
          "my-cloudinary-dam"
        ]
      }
    }
  }
}
blockquoteboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to wrap selected blocks of text in a block quote.

Setting this key to true will enable a tool in your WYSIWYG toolbar to wrap selected blocks of text in a block quote.

Defaults to: true

boldboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to bold selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to bold selected text.

Defaults to: true

bulletedlistboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert an unordered list or convert selected text to an unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert an unordered list or convert selected text to an unordered list.

Defaults to: true

centerstring#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to center align selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to center align selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

codeboolean#

This key toggles whether CloudCannon will display tools in your WYSIWYG toolbar to turn selected text into inline code and selected text into a code block.

Setting this key to true will enable two tools in your WYSIWYG toolbar to turn selected text into inline code and selected text into a code block.

Defaults to: false

code_blockboolean#

This key toggles whether CloudCannon will display a control in your WYSIWYG toolbar to insert a code block in editable regions.

Setting this key to true will enable a control in your WYSIWYG toolbar to insert a code block.

By default, this key is false (i.e., the code block control is not displayed).

Defaults to: false

code_inlineboolean#

This key toggles whether CloudCannon will display a control in your WYSIWYG toolbar to create an inline code element, containing any selected text.

Setting this key to true will enable a control in your WYSIWYG toolbar to create an inline code element.

By default, this key is false (i.e., the inline code control is not displayed).

Defaults to: false

copyformattingboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to copy formatting from selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to copy formatting from selected text. Applies to bold, italic, underline, strike, subscript, and superscript formatting. Does not copy other styles or formatting.

Defaults to: false

embedboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a region of raw HTML for YouTube, Vimeo, social media posts, or other media.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a region of raw HTML. Embedded content is sanitized to mitigate XSS risks, which includes removing style tags. Embeds containing script tags are not loaded a rich text editor.

Defaults to: false

expandableboolean#

This key defines whether you can upscale an image to fit the bounding box while resizing an image prior to upload.

Has no effect if files are not resized.

Defaults to: false

Show examplesHide examples

In this example, we have configured an Image Input to allow upscaling images to fit the bounding box while resizing.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      expandable: true
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "width": 1200,
        "height": 600,
        "resize_style": "cover",
        "expandable": true
      }
    }
  }
}
formatstring#

This key toggles whether CloudCannon will display a dropdown menu tool in your WYSIWYG toolbar for structured text.

Setting this key to true will enable a dropdown menu tool in your WYSIWYG toolbar for structured text. Valid values include for p, h1, h2, h3, h4, h5, h6, pre, address, and div. Include a space between each values, e.g. format: p h1 h2.

Defaults to: p h1 h2 h3 h4 h5 h6

heightnumber#

This key defines the height of the bounding box used in the resizing method defined by resize_style.

Show examplesHide examples

In this example, we have configured the height of the bounding box for an Image Input.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "width": 1200,
        "height": 600,
        "resize_style": "cover"
      }
    }
  }
}
horizontalruleboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a horizontal line.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a horizontal line.

Defaults to: false

imageboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert an image and enter alternative text and title text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert an image. Select an existing image, upload an image, or use an external link.

Defaults to: true

image_size_attributesboolean#

This key toggles whether CloudCannon will instruct a rich text editor to save width and height attributes on image elements.

Setting this key to true will instruct the rich text editor to save width and height attributes on image elements. This can prevent pop-in as a page loads.

By default, this key is false (i.e., width and height attributes are not saved on image elements). This defaults to true if the Image Size Attributes site flag is enabled (this is enabled for sites created before June 23 2023, in order to keep those sites working).

Defaults to: true

Show examplesHide examples

In this example, CloudCannon will save width and height attributes on image elements in a Rich Text Input.

Copied to clipboard
_inputs:
  content:
    type: markdown
    options:
      image_size_attributes: true
{
  "_inputs": {
    "content": {
      "type": "markdown",
      "options": {
        "image_size_attributes": true
      }
    }
  }
}
indentboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to increase the indentation of a list item in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to increase the indentation of a list item.

Defaults to: false

italicboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to italicize selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to italicize selected text.

Defaults to: true

join_aboveboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to merge a list item with the item above it in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to merge a list item with the item above it.

Defaults to: false

join_belowboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to merge a list item with the item below it in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to merge a list item with the item below it.

Defaults to: false

justifystring#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to justify selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to justify selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

leftstring#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to left align selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to left align selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

linkboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to create a hyperlink around selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to create a hyperlink around selected text.

Defaults to: true

mime_typestring#

This key defines what format an image is converted to prior to upload.

Allowed values: image/jpeg image/png image/webp

Show examplesHide examples

In this example, we have configured an Image Input to convert images to WebP format prior to upload.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      mime_type: image/webp
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "mime_type": "image/webp"
      }
    }
  }
}
numberedlistboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert an ordered list or convert selected text to an ordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert an ordered list or convert selected text to an ordered list.

Defaults to: true

outdentboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to decrease the indentation of a list item in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to decrease the indentation of a list item.

Defaults to: false

pathsObject#

This key defines paths for your Rich Text editors or File inputs.

If undefined at higher levels of the configuration cascade, paths will default to any values configured in the CloudCannon configuration file.

Show examplesHide examples

In this example, we have configured paths for the blog Collection to set custom upload and static paths.

Copied to clipboard
collections_config:
  blog:
    paths:
      uploads: /uploads/blog/
      static: /assets/
{
  "collections_config": {
    "blog": {
      "paths": {
        "uploads": "/uploads/blog/",
        "static": "/assets/"
      }
    }
  }
}
prevent_resize_existing_filesboolean#

This key toggles whether CloudCannon will skip the image resizing process configured for this input when selecting existing images.

Setting this key to true will skip the image resizing process when selecting existing images.

Defaults to: false

Show examplesHide examples

In this example, CloudCannon will skip the image resizing process when selecting existing images for an Image Input.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      prevent_resize_existing_files: true
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "width": 1200,
        "height": 600,
        "resize_style": "cover",
        "prevent_resize_existing_files": true
      }
    }
  }
}
redoboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to redo recent edits undone with undo.

Setting this key to true will enable a tool in your WYSIWYG toolbar to redo recent edits. Undo is always enabled through standard OS-specific keyboard shortcuts.

Defaults to: false

remove_custom_markupboolean#

This key toggles whether CloudCannon will allow you to strip custom markup from content edited in a rich text editor, allowing you to clean files of unnecessary HTML content.

Setting this key to true will enable stripping custom markup from content. The remove_custom_markup key is disabled if allow_custom_markup is enabled.

removeformatboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to remove formatting from selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to remove formatting. Applies to bold, italic, underline, strike, subscript, and superscript formatting. Does not remove other styles or formatting.

Defaults to: true

resize_stylestring#

This key defines how image files are resized prior to upload, using a bounding box defined by width and height options.

Valid values are cover, contain, crop, or stretch:

  • cover keeps aspect ratio and ensures the image covers the bounding box
  • contain keeps aspect ratio and ensures the image fits inside the bounding box
  • crop prompts the user with and interface to select an aspect-ratio-respecting area
  • stretch ignores aspect ratio and resizes the image to the bounding box

This key does not apply to existing images, and does not work if width and height options are not defined.

Defaults to: contain

Allowed values: cover contain stretch crop

Show examplesHide examples

In this example, we have configured an Image Input to resize images using the cover style to ensure images cover the bounding box while maintaining aspect ratio.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "width": 1200,
        "height": 600,
        "resize_style": "cover"
      }
    }
  }
}
rightstring#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to right align selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to right align selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

sizesArray<sizes[*]>#

This key defines definitions for creating additional images of different sizes when uploading or selecting existing files.

Show examplesHide examples

In this example, we have configured an Image Input to create additional images of different sizes when uploading or selecting files.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      sizes:
        - size: 2x
        - size: 3x
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "sizes": [
          {
            "size": "2x"
          },
          {
            "size": "3x"
          }
        ]
      }
    }
  }
}
snippetboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a Snippet, if any are available.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a Snippet.

Defaults to: true

strikeboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to strike through selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to strike through selected text.

Defaults to: false

stylesstring#

This key toggles whether CloudCannon will display a dropdown menu in your WYSIWYG toolbar to apply a style to selected text.

Setting this key to true will enable a dropdown menu in your WYSIWYG toolbar to apply a style to selected text. Styles are the combination of an element and class name. The value for this option is the path (either source or build output) for the CSS file containing styles.

subscriptboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to subscript selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to subscript selected text.

Defaults to: false

superscriptboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to superscript selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to superscript selected text.

Defaults to: false

tableboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a table.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a table. Further table options are available from the table context menu in the rich text editor.

Defaults to: false

underlineboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to underline selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to underline selected text.

Defaults to: false

undoboolean#

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to undo recent edits.

Setting this key to true will enable a tool in your WYSIWYG toolbar to undo recent edits. Undo is always enabled through standard OS-specific keyboard shortcuts.

Defaults to: false

widthnumber#

This key defines the width of the bounding box used in the resizing method defined by resize_style.

Examples:
Open in a new tab