Surreal features a Live Editor that lets you edit content inline, just like you were editing the live webpage. There’s no need to preview, since the page will look just like it does in the editor once you select Publish.
By default, editable content regions are indicated by a dashed outline when you hover over a region. Learn how to add custom editable guides here.
If you need to programmatically detect whether or not your page is being rendered in the CMS, you can use one of these methods.
Images that are inside of an editable region can be aligned left or right using the appropriate alignment buttons in the toolbar. When an image is aligned left or right, the CMS will apply a float and a special class:
<img src="image.jpg" style="float: right;" class="cms-float-right"> <img src="image.jpg" style="float: left;" class="cms-float-left">
You can use these classes to apply certain styles when an image is aligned left or right, such as a margin that prevents text from getting too close to the image.