You may freely arrange the buttons to be displayed on the balloon popup.
Use 'editor.balloon' to determine configure the buttons required to edit texts, images, videos, layers, hyperlinks and tables.
Configuration Method
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'editor.balloon': {
'Name of balloon popup1': ['button1', 'button2', '-', 'button3', 'button4'],
'Name of balloon popup2': ['button5', 'button6', '-', 'button7', 'button8']
}
} |
...
| Name | text | image | video | div | hyperlink | tableCell |
|---|---|---|---|---|---|---|
| Description | text | image | video | layer | hyperlink | table |
Please refer to T oolbar Toolbar Configuration for more available balloon popup names.
Example
...
Balloon Popup Configuration
Default
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'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
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'editor.balloon': {
'tableCell': ['formulaInput', '-', 'fill', 'selectBorder', 'borderColor', 'lineThickness', 'lineStyle', 'fitTableWidth', '-', 'insertRowBefore', 'insertRowAfter', 'insertColBefore', 'insertColAfter', 'deleteRow', 'deleteCol', 'deleteTable', '-', 'contentsAlign', 'verticalAlign', 'cellSize', 'mergeCell', 'splitCell', 'cellProperties', 'tableProperties']
}
} |
| Screen after setting balloon popup for table editing |
|---|
| Result of Applying Table Editing Balloon Popup Configuration |
|
