Synap Editor Documentation
Page tree
Skip to end of metadata
Go to start of metadata

You may freely arrange the buttons to be displayed on the balloon popup.

Use 'editor.balloon' to configure the buttons required to edit texts, images, videos, layers, hyperlinks and tables.

Configuration Method

synapeditor.config.js (default)
{
	'editor.balloon': {
        'Name of balloon popup1': ['button1', 'button2', '-', 'button3', 'button4'],
        'Name of balloon popup2': ['button5', 'button6', '-', 'button7', 'button8']
    }
}

Available Balloon Popup Names

NametextimagevideodivhyperlinktableCell
Descriptiontextimagevideolayerhyperlinktable

Please refer to Toolbar Configuration for more available balloon popup names.


Example Balloon Popup Configuration

Default 

synapeditor.config.js 
{
	'editor.balloon': {
        'text': ['fontFamilyWithText', 'fontSizeWithText', '-', 'bold', 'italic', 'underline', 'strike', 'fontColor', 'fontBackgroundColor'],
        'image': ['objVertAlignBottom', 'link', 'unlink', 'openLink', 'alt', 'caption', '-', 'imageProperties', 'rotateDrawingObjectLeft', 'rotateDrawingObjectRight', 'imageOriginSize', 'tuiImageEditor', 'deleteImage'],
        'video': ['objVertAlignBottom', 'videoProperties', 'deleteVideo'],
        'div': ['drawingObjectBorderColor', 'drawingObjectLineThickness', 'drawingObjectLineStyle', '-', 'drawingObjectFill', 'divProperties', 'deleteDiv'],
        'hyperlink': ['link', 'unlink', 'openLink'],
        'tableCell': ['formulaInput', '-', 'fill', 'selectBorder', 'borderColor', 'lineThickness', 'lineStyle', 'cellSize', 'mergeCell', 'splitCell', 'fitTableWidth', '-', 'contentsAlign', 'verticalAlign', 'deleteRow', 'deleteCol', 'cellProperties', 'tableProperties', 'deleteTable']
    }
}

Table Editing Balloon Popup Configuration

synapeditor.config.js 
{
	'editor.balloon': {
        'tableCell': ['formulaInput', '-', 'fill', 'selectBorder', 'borderColor', 'lineThickness', 'lineStyle', 'fitTableWidth', '-', 'insertRowBefore', 'insertRowAfter', 'insertColBefore', 'insertColAfter', 'deleteRow', 'deleteCol', 'deleteTable', '-', 'contentsAlign', 'verticalAlign',  'cellSize', 'mergeCell', 'splitCell', 'cellProperties', 'tableProperties']
    }
}
Result of Applying Table Editing Balloon Popup Configuration

  • No labels