The Scrivito Editors gem is a collection of useful standard JavaScript editors based on the Scrivito SDK. By means of these editors, CMS attributes of any type can be edited. They also provide helpers for the property view of pages and widgets. A browser for adding, updating, and deleting content, the content browser gem, is included as well.

The following editors are included:

• A string editor, string
  
• A string list editor, stringlist
• An HTML editor based on MediumEditor, medium
• A number editor for float and integer attributes, number
  
• A numeric slider, to change float, integer, and numeric string attributes
• A link editor
• A link list editor, linklist
• A reference editor
• A reference list editor, referencelist
• A date editor based on the jQuery UI datepicker and timepicker addon
• An enum editor
• A multienum editor
• A binary editor, binary
  
• An image editor, image
  
• Deprecated as of Scrivito 1.6.0: an HTML editor based on Redactor 10, redactor

1. The Scrivito editors gem is automatically added to your application. Just follow the instructions for integrating Scrivito into your Rails application.
2. The date editor requires you to set a time zone for your application in config/application.rb.

   config.time_zone = 'Berlin'

As a default, all editors are configured to be automatically triggered for CMS attributes rendered by means of the scrivito_tag SDK method. The editors also bind to the editor option, so that you can customize any CMS attribute and use whatever editor you like. For example,

scrivito_tag(:span, @widget, :my_date, {}, editor: 'my_fancy_date_editor')

does not trigger any of the standard CMS in-place editors provided by this gem, so you can bind to it in your own JavaScript files.

By default, a placeholder is displayed for empty CMS attributes to notify the user of how to edit the attribute. The placeholder can be customized by providing a data-scrivito-editors-placeholder HTML attribute.

For example, to change the placeholder to My custom placeholder text, you can adjust the call to scrivito_tag in your views like shown below:

scrivito_tag(:div, @obj, :my_attribute, data: { scrivito_editors_placeholder: 'My custom placeholder text' })

The string editor provides two modes:

• Editing a single line of text. Pressing enter finishes editing: data-scrivito-editors-multiline="false"
• Multiline text. Pressing enter adds a new line: data-scrivito-editors-multiline="true"

If data-scrivito-editors-multiline has not been specified, Scrivito automatically chooses one of these modes by inspecting the element: Multiple lines are enabled for tags that preserve line breaks, i. e. elements with white-space: pre, pre-wrap, pre-line.

Examples:

Please note that specifying data-scrivito-editors-multiline="true" for non-preformatted elements will be confusing to users, since line breaks would only be visible while editing.

Some editors provide an option for enabling a reload event that reloads the widget, modal dialog, or page after successfully saving the changes made to it. By default, the reload event is not triggered. To enable it, use the data-scrivito-editors-reload HTML attribute, like in the following example:

scrivito_tag(:div, @obj, :my_string_attribute, data: { scrivito_editors_reload: true })

The Content Browser lets you manage and select all kinds of content for placing it onto pages, for example. The Content Browser is opened automatically for link, linklist, reference, and referencelist attributes. For details regarding the Content Browser, please refer to the content browser documentation.

The number editor

The number editor supports Scrivito’s numeric attribute types, integer and float. When rendering an attribute of one of these types, options for specifying a range and a step size, and for making the attribute value mandatory (i.e. disallowing an empty value) are available:

Setting scrivito_editors_allow_delete to false causes the editor to reject the empty value which it indicates by setting the input field color to red. Making a numeric attribute mandatory should be accompanied by specifying a default attribute value for it in the object class concerned.

The binary editor

Binary content, e.g. an image or a PDF file, is usually included on a page by means of a reference attribute. The image widget, for example, has such a reference attribute for storing the ID of the image object to display. This allows an editor to edit a page without having to worry about which other pages they might change by replacing an image.

The binary editor, however, lets you exchange the binary content itself, meaning that all occurrences of this content on other pages are changed as well. No new CMS object is created, the values of the reference attributes pointing to this content aren’t modified and don’t become outdated. You can thus update your quarterly report, for example, and all references to it will point to the new version. Including a binary editor is easy:

To prevent editors from inadvertently modifying other pages, we recommend to not include binary attributes on content pages and restrict their use to details views. The example app uses the binary editor to allow exchanging images using the content browser:

By default, the binary editor won’t let you remove the contents of a binary attribute. To enable deletion, pass the data-scrivito-editors-allow-delete option to the scrivito_tag, and a small trash can icon will be displayed in the upper right corner. Clicking this icon causes the binary data of the corresponding attribute to be deleted. To display an image with the option to delete its content, use the following code:

Note that if your application relies on the presence of binary data, making the data deletable requires adapting the application accordingly.