Synchronizing text input

Synchronizing text input (i.e. synchronizing the Alternative text input field with the alt tag of an inserted image) is a feature already preconfigured for common behaviour. Altering this configuration is usually not required. However, when customizing Insert templates and behaviour, it might be desired to set up custom synchronization of an input field with the HTML code already inserted.

Text input may be synchronized by specifying the data-insert-attach attribute to a DOM node in an Insert template. Using a JSON structure, a primary synchronization source as well as additional fall-back sources may be referenced using the following schema:

{
  "id": "{{ id }}",
  "attributes": {
    "<attribute 1 name>": ["<primary attachment key>", "<fallback attachment key 1>", …],
    "<attribute 1 name>": ["<primary attachment key>", "<fallback attachment key 1>", …],
    …
  },
  "content": ["<primary attachment key>", "<fallback attachment key 1>", …]
}

The id is provided by Insert and allows finding the synchronization target. attributes specifies the node’s attributes that shall be synchronized, while content refers to synchronizations targets that will replace the node’s content. For example, the image template:

{
  "id": "{{ id }}",
  "attributes": {
    "alt": ["alt", "description"],
    "title": ["title"]
  }
}

Preferably, an image’s alt attribute is synchronized with the alt input field. However, if there is no alt input field, the description input field’s content shall be used for filling the alt attribute. (An image may also be placed per the Insert image template by uploading an image to a generic file field where no specific alt input field exists, but a description field may be available.)

The attachment keys provided by Insert are:

• alt, title and description for image fields
• filename and description for file fields