Editor Links allow you to link to other sections of the CloudCannon interface from within the Visual Editor. Use them to create edit buttons for your collection items and blog posts to quickly navigate the app. You can also add front matter Editor Links to open the front matter Editor at specified fields.
Editor Links are using the CloudCannon link protocol.
Linking to front matter#
Create a link to open a data editor at a specific input:
<!-- Inputs -->
<a href="cloudcannon:#title">
Edit the title
</a>
<!-- Arrays -->
<a href="cloudcannon:#array[1]">
Edit the first array item
</a>
<a href="cloudcannon:#array[+]">
Create a new item in an array
</a>
<!-- Inputs within an Object -->
<a href="cloudcannon:#object.title">
Edit a variable within an object
</a>
<a href="cloudcannon:#object.array">
Edit an array within an object
</a>
<!-- Inputs within an Array inside an Object -->
<a href="cloudcannon:#object.array[0].title">
Edit the title of the first array item within an object
</a>
You can edit hidden inputs by using popout-style editor links.
Open the sidebar instead#
Front matter can be highlighted within the data editor in the sidebar, or displayed standalone in a panel (default). To change open an editor link in the sidebar:
- Add the
data-cms-bind-styleattribute - Set the attribute’s value to sidebar (optional)
<a href="cloudcannon:#title" data-cms-bind-style="sidebar">
Edit the title
</a>
Linking to other views#
To have edit links for posts in a list, add an Editor Link in the blog post loop:
<a href="cloudcannon:collections/staff">
Edit all staff
</a>
<a href="cloudcannon:collections/staff/jane-doe.md">
Edit Jane Doe
</a>
<a href="cloudcannon:collections/posts/welcome-post.md">
Edit Welcome Post
</a>
<a href="cloudcannon:status">
Link to Site Status and Recent Activity
</a>
Front matter Editor Links are prefixed with cloudcannon:# and use a common syntax to reference them, for example:
<!-- Inputs -->
<a href="cloudcannon:#title">
Edit the title
</a>
<!-- Arrays -->
<a href="cloudcannon:#array[1]">
Edit the first array item
</a>
<a href="cloudcannon:#array[+]">
Create a new item in an array
</a>
<!-- Inputs within an Object -->
<a href="cloudcannon:#object.title">
Edit a variable within an object
</a>
<a href="cloudcannon:#object.array">
Edit an array within an object
</a>
<!-- Inputs within an Array inside an Object -->
<a href="cloudcannon:#object.array[0].title">
Edit the title of the first array item within an object
</a>
Posts Example#
To insert edit links for posts in a list, add an Editor Link in the blog post loop
For example, a Hugo site would implement this as:
<ul class="blog-posts">
{{ range .Pages }}
<li class="blog-post">
<h3>{{ .Title }}</h3>
<!-- Editor Link -->
<a href="cloudcannon:/collections/content/{{ .File.Path }}" class="editor-link">Edit post</a>
<p>{{ .Summary }}</p>
<a href="{{ .RelPermalink }}">Read more</a>
</li>
{{ end }}
</ul>
