Visual Editor

The visual editor is where you'll spend most of your time editing. You'll see a copy of your webpage where you can edit metadata and any content regions you've defined.

To open the visual editor, choose the website you want to work with and then select a page to edit.

If you're working with a mouse, you'll see guides appear when you hover over content regions. To select a content region, just click or tap on it.

Some content regions, such as block and inline regions, will accept focus and provide a toolbar. Others will trigger a panel that appears on the right-side of the screen.

When you're done editing, select Publish from the sidebar to publish your changes back to the server.

Formatting Text

In block regions, sections can be formatted as headings, paragraphs, preformatted text, and blockquotes. The following elements can be produced using the paragraph menu in the toolbar.

In block, inline, and link regions, you can add formatting such as bold, italic, strikethrough, etc. The resulting markup is comprised of semantic HTML5 elements.

Links

The markup for links is pretty basic.

<a href="index.html">Home</a>

Links may also have a title or target attribute depending on the options chosen in the editor.

Images

The markup for images depends on whether or not the image has a caption.

Images with captions will use the <figure> element.

<figure class="image">
  <img src="image.jpg" alt="Description">
  <figcaption>Caption</figcaption>
</figure>

Images without captions will use the <img> element.

<img src="image.jpg" alt="Description">

Videos

Videos can be used to embed content from third-party websites. The markup used depends on the source of the embed. There are two ways to insert embeddable content.

You can copy and paste the embed code into the Video Panel and it will be added to the page as-is. This is the most reliable way, but it requires you to locate the embed code on the third-party's website. (Usually hidden behind a share button.)

For convenience, you can also paste a URL into the Video Panel and we'll try to fetch the embed code for you using the provider's oEmbed API. (For example, try pasting a YouTube or Vimeo URL.)

If the provider doesn't support oEmbed, you'll need to locate the embed code manually.

Tables

Tables are useful for displaying tabular data. New tables will use the following markup.

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <!-- more rows -->
  </tbody>
<table>

Percentage units will be used when a table is resized. This ensures the table remains responsive even after resizing.

Anchors

Anchors provide a way to deep link to specific parts of a page. New anchors will use this markup.

<a id="anchor-name"></a>

It's generally best to place anchors at the beginning of a heading or paragraph. When creating an anchor, make sure the id is unique from all others on the page.

Code Blocks

Code blocks are special elements that contains one or more lines of computer code. Surreal CMS uses the following W3C recommendation for structuring code blocks.

<pre class="cms-code">
  <code class="language-javascript">
    ...
  </code>
</pre>

Galleries

Galleries are collections of images that you can add to any block region. You can make galleries interactive using JavaScript libraries such as Lightbox and Fancybox. Galleries use the following markup.

<div class="cms-gallery">
  <!-- Gallery images here -->
</div>

Gallery images must use the syntax below. Avoid adding additional elements, classes, and attributes, as they will be removed when the gallery is parsed.

<a href="uploads/image.jpg">
  <img
    src="uploads/thumbnails/image-256x256.jpg"
    alt="Description"
    data-caption="Caption"
  >
</a>

Thumbnails are automatically generated when images are added to the gallery. They will be stored in the [uploads]/thumbnails/ folder on your server.

Galleries are very similar to Gallery Regions, but there are differences in how they're configured. The following data- attributes can be used on the containing content region to control how thumbnails and other gallery features work.

Section Breaks

You can insert section breaks into your document using the Insert menu. A section break is comprised of the following markup.

<hr>

Historically, <hr> stood for horizontal rule and it was used to display a horizontal line on the page. The element was redefined in HTML5, and is now the semantically appropriate element for adding thematic breaks in content.