Synchronizing text input

Synchronizing text input (i.e. synchronizing the "alt" input field with the "alt" tag of an inserted image) is 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 using a generic file field where no specific “alt” input field exists, but a “description” field may be available.)

Default attachment keys are provided by Insert, custom attachment keys may be implemented by extending Insert. See insert.api.js for an example.