Ticket editor

The app is displayed as a button in the toolbar of the ticket's rich-text editor. Clicking the button opens the app. A ticket editor app typically adds functionality to the editor.

The rich-text editor is enabled by default for new accounts. It can be enabled in existing accounts by using the admin interface. See Enabling formatting options for agents. This app location is not available in the Markdown editor.

Example manifest

...
"location": {
  "support": {
    "ticket_editor": "assets/iframe.html"
  }
},
...

See Setting the app location.

Each editor app must have an SVG icon named icon_ticket_editor.svg. It must meet the same design specs as SVG icons for nav bar and top bar apps. See Top bar and nav bar icon.

You can use the global resize action with editor apps, but the dimensions are limited as follows:

  • height: 100px - 320px
  • width: 100px - 1000px

In addition to the objects available in all locations, the following object and additional properties and actions are available in this location:

Events

In addition to the core events, the following event is available to apps in the ticket editor:

  • pane.activated

Example:

client.on('pane.activated', function() {
  // handler
});

For details, see pane.activated in the top bar documentation.

Ticket editor object

Represents the editor in the ticket interface.

Actions

ticket.editor.insert

Inserts a string at the cursor.

invoke
client.invoke('ticket.editor.insert', 'My <b>printer</b> is on fire')
ticket.editor.indent

Increases the indentation of the paragraph that contains the cursor.

invoke
client.invoke('ticket.editor.indent')
ticket.editor.outdent

Decreases the indentation of the paragraph that contains the cursor.

invoke
client.invoke('ticket.editor.outdent')
ticket.editor.bold

Bolds a text selection.

invoke
client.invoke('ticket.editor.bold')
ticket.editor.italic

Italicizes a text selection.

invoke
client.invoke('ticket.editor.italic')
ticket.editor.unorderedList

Starts an unordered list at the cursor.

invoke
client.invoke('ticket.editor.unorderedList')
ticket.editor.orderedList

Starts an ordered list at the cursor.

invoke
client.invoke('ticket.editor.orderedList')
ticket.editor.blockquote

Applies quote formatting to the paragraph that contains the cursor.

invoke
client.invoke('ticket.editor.blockquote')
ticket.editor.codespan

Applies the code font to a text selection. The font is usually the browser's default monospace font.

invoke
client.invoke('ticket.editor.codespan')
ticket.editor.codeblock

Applies the code font to the paragraph that contains the cursor.

invoke
client.invoke('ticket.editor.codeblock')
ticket.editor.hyperlink

Applies a link to a text selection, or inserts it at the cursor if no text is selected. The action displays a modal view to specify the link text and URL.

invoke
client.invoke('ticket.editor.hyperlink')
ticket.editor.inlineImage

Inserts an image at the cursor. You can specify the image as a URL or a base64-encoded string.

The maximum file size for each plan are as follows:

  • Essential: 1 MB
  • Team: 7 MB
  • Professional and Enterprise: 20 MB
invoke

URL

client.invoke('ticket.editor.inlineImage', 'http://www.example.com/image.png')

base64-encoded string

client.invoke('ticket.editor.inlineImage', 'data:image/png;base64,iVBORw0KGgoAA…')

Additional properties

Additional actions

app.close

Closes the popover containing the ticket editor app.

invoke
client.invoke('app.close')