사이냅 에디터에서 제공하는 표 템플릿 스타일 기능을 이용하면 더 빠르고 편리한 표 편집이 가능합니다.


설정

key설명
editor.table.template.styles표 템플릿 스타일을 설정합니다.
editor.table.template.list보여줄 템플릿을 설정합니다.


editor.table.template.styles 설정

keytype설명
template nameObject표 템플릿 스타일을 정의합니다.
















row

Object

행들의 스타일을 정의합니다.


head

Object

머리행의 스타일을 정의합니다.


index

Number

인자로 받은 인덱스에 스타일을 적용할지 여부를 판단합니다.

style

Object

css로 표현할 수 있는 스타일을 정의합니다.

기존의 스타일 이외에도 추가할 수 있습니다.


color

String

텍스트 색상

backgroundColor

String

배경 색상

borders

Object

borders를 정의합니다


top

Object

border-top 정의


style

String

테두리 스타일

width

Number

테두리 두께

color

String

테두리 색상

bottomObject

형태는 top과 같습니다.

설정하지 않으면 top이 적용됩니다.

leftObject

형태는 top과 같습니다.

설정하지 않으면 top이 적용됩니다.

rightObject

형태는 top과 같습니다.

설정하지 않으면 left → top 순서대로 적용됩니다.

highlight

Object

강조행의 스타일을 정의합니다.

형태는 head와 같습니다.


indexNumber

인자로 받은 인덱스에 따라 스타일을 적용할지 여부를 판단합니다.
0: 홀수,

1: 짝수

col

Object

열들의 스타일을 정의합니다.

형태는 row와 같습니다.

defaultStyle

Object

기본 셀 스타일을 정의합니다.

형태는 style과 같습니다.

tableStyle

Object

기본 표 스타일을 정의합니다.

형태는 style과 같습니다.



editor.table.template.list 설정

keytype설명설정
popupArrayList

표 생성 팝업에서 보여줄 표 템플릿 리스트를 정의합니다.

이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다.

popup: [
    ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
    ['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']
]

dialogArrayList

표 속성 다이얼로그의 [스타일 & 제목 셀] 탭에서 보여줄 표 템플릿 리스트를 정의합니다.

이중 배열로 한 줄에 최대 4개의 템플릿을 보여줄 수 있습니다.

dialog: [
    ['Basic', 'Dashed', 'GrayScale', 'Zebra'],
    ['Sideless', 'Sideless Zebra', 'Sideless GrayScale', 'Sideless Black'],
    ['Gray Column Header', 'Dashed Gray Column Header', 'Dual Header', 'Dashed Dual Header'],
    ['Gray Row Header', 'Dashed Gray Row Header', 'Sideless Black Row Header', 'Striped Black Row Header']
]


적용 예시


var synapEditorConfig = {
    'editor.table.template.styles': {
        'Dark Mode': {
            defaultStyle: {
                color: 'rgb(220, 220, 220)',
                backgroundColor: 'rgb(30, 30, 30)',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'rgb(60, 60, 60)'
                    }
                }
            }
        },
        'Rainbow': {
            row: {
                head: {
                    index: 0,
                    style: {
                        backgroundColor: 'red',
                        borders: {
                            top: {
                                type: 'solid',
                                width: 1,
                                color: 'black'
                            }
                        }
                    }
                },
                highlight: {
                    index: 1,
                    style: {
                        backgroundColor: 'yellow',
                        borders: {
                            top: {
                                type: 'solid',
                                width: 1,
                                color: 'black'
                            }
                        }
                    }
                }
            },
            defaultStyle: {
                color: 'white',
                backgroundColor: 'blue',
                borders: {
                    top: {
                        type: 'solid',
                        width: 1,
                        color: 'black'
                    }
                }
            }
        }
    },
    'editor.table.template.list': {
        popup: [
            ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],
            ['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header'],
            ['Dark Mode', 'Rainbow']
        ],
        dialog: [
            ['Basic', 'Dashed', 'GrayScale', 'Zebra'],
            ['Sideless', 'Sideless Zebra', 'Sideless GrayScale', 'Sideless Black'],
            ['Gray Column Header', 'Dashed Gray Column Header', 'Dual Header', 'Dashed Dual Header'],
            ['Gray Row Header', 'Dashed Gray Row Header', 'Sideless Black Row Header', 'Striped Black Row Header'],
            ['Dark Mode', 'Rainbow']
        ]
    }
}


표 생성 팝업표 속성 다이얼로그 - [스타일 & 제목 셀] 탭