Ticket editor

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

Example manifest

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

SeeSetting the app location.

Each editor app must have an SVG icon namedicon_ticket_editor.svg. It must meet the same design specs as SVG icons for nav bar and top bar apps. SeeStyles and assets.

您可以使用全球resizeactionwith editor apps, but the dimensions are limited as follows:

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

In addition to objects available inall locationsand theticket sidebar, the following objects, properties, and actions are available in this location:

Limited API functionality when a ticket is in Chat mode

When a ticket is in Chat mode, the following APIs will not produce the expected output:

Object / Property	Action
`ticket.editor.*`	`invoke`

An API call with these APIs is not attempted and invokes aconsole.error.

Invokingticket.editor.insertworks in Chat mode and auto-transpiles rich text into plain text (Markdown syntax) in the chat editor.

Note: API restrictions apply to the Chat feature in theZendesk Agent Workspace.

Events

In addition to thecore events, the following events are available to apps in the ticket editor:

pane.activated

Example:

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

For details, seepane.activatedin the top bar documentation.

ticket.editor.targetChannel.changed
ticket.editor.capabilities.changed

Ticket editor object

Represents the editor in the ticket interface.

Actions

ticket.editor.insert

Inserts a string at the cursor.

Note:When using ticket.editor.insert, HTML comments goes through a HTML sanitizer and normalizer for security reasons and to match the HTML rules for the ticket editor. This involves removing most CSS and some HTML tags which affects table formatting.

invoke

             
              client.invoke('ticket.editor.insert','My printer 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

报价格式适用于反对的段落tains 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 all Zendesk Suite plans is 50 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…')

ticket.editor.hr

Inserts a horizontal rule (horizontal line) at the cursor.

invoke

             
              client.invoke('ticket.editor.hr')

ticket.editor.targetChannel

Provides details about the editor channel that the agent is currently on.

get

             
              client.get('ticket.editor.targetChannel')

returns

             
              {"ticket.editor.targetChannel":{//Target Channel object properties}

SeeTarget Channelproperties.

ticket.editor.capabilities

Provides the rich-text capabilities of the channel based on the editor that the agent is currently using.

get

             
              client.get('ticket.editor.capabilities')

returns

             
              {"ticket.editor.capabilities":{// Capabilities object properties}}

SeeCapabilitiesproperties.

Target channel object

Properties

targetChannel.name

get

             
              client.get('ticket.editor.targetChannel.name')

returns

             
              {"ticket.editor.targetChannel.name":string//email, chat, web, facebook, whatapp, etc..}

This property should only be used for reporting and analytics purposes. Channel to capability mapping may change at any point in the future. When inserting content into the editor, we advise to always reference theCapabilities objectto determine what an app is able to render in the editor, and not rely ontargetChannel.name.

targetChannel.sessionBased

Specifies if the channel is asynchronous or synchronous. This property could be used to drive agent experience functionality in a Zendesk Support app depending on the immediacy of the channel that the agent is on.

Session-based messaging is defined as communication channels that involve real-time conversations between two parties who are simultaneously participating. Example of session-based messaging include Zendesk Chat and Zendesk Talk conversations. Non-session-based messaging refers to channels featuring conversations that can occur in real-time but are usually asynchronous. Examples include email, social messaging, or web form ticketing.

             
              client.get('ticket.editor.targetChannel.sessionBased')

returns

             
              {"ticket.editor.targetChannel.sessionBased":boolean}

targetChannel.sessionActive

If the current channel of the editor is synchronous, then this property specifies if the channel is currently in a live session or not.

get

             
              client.get('ticket.editor.targetChannel.sessionActive')

returns

             
              {"ticket.editor.targetChannel.sessionActive":boolean}

Capabilities object

Properties

capabilities.richText

capabilities.richText

Specifies if the current channel that the editor is on supports rich-text rendering.

get

             
              client.get('ticket.editor.capabilities.richText')

returns

             
              {"ticket.editor.capabilities.richText":boolean}

Additional properties

Additional actions

app.close

app.close

Closes the popover containing the ticket editor app.

invoke

             
              client.invoke('app.close')