Type: Function

How to get configureAsImageInFrame?


import configureAsImageInFrame from 'fontoxml-families/src/configureAsImageInFrame.js'

Use this family when images can contain other elements which should be rendered.

The meaning that this family indicates is visualized through a border and optionally a background color to delimit the content to which the semantics apply.

Elements belonging to this family cannot be split in two by pressing Enter, and two adjacent elements will not be merged into one. Either would defeat the purpose of semantics.

Use this family for images which can contain other elements which should be rendered. For example an desc element, which contains a description of the image. These images may be represented by a permanent id or a non-permanent id. By setting the option options.isPermanentId to true, the result of the query is interpreted as a permanent id, which will be resolved.

The following visualization options are visualized by the group with image in frame family:

  • backgroundColor

  • showWhen

The following widget areas are available:

  • blockHeaderLeft

  • blockHeaderRight

  • blockBefore

  • blockAfter

  • blockFooter

  • blockOutsideBefore

  • blockOutsideAfter

This family has a number of additional options which affect how it behaves:

  • defaultTextContainer

  • referenceQuery

  • isPermanentId

Note that this family supports the doubleClickOperation option, being the operation which is executed on double-click.


// Configure HTML images without permanent ids
configureAsImageInFrame(sxModule, 'self::img', 'image', { referenceQuery: '@src', isPermanentId: false });

// Configure HTML images with permanent ids
configureAsImageInFrame(sxModule, 'self::img', 'image', { referenceQuery: '@src', isPermanentId: true });

// Configure an other kind of image with the url as its text content
configureAsImageInFrame(sxModule, 'self::img', 'image', { referenceQuery: 'string(.)', isPermanentId: true });


  1. sxModule


    Type: SxModule

  2. selector


    Type: XPathTest

    A selector matching images

  3. markupLabel


    Type: String

    The markupLabel of the image

  4. options


    The general CvkOptions are expanded with two properties: