Page History

...

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

설정

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

...

editor.table.template.styles 설정

keyKey

typeType

설명

template name

Object

표 템플릿 스타일을 정의합니다.

template name은 String 타입으로 설정할 수 있습니다.
기존 스타일을 덮어 씌우거나, 새로 지정할 수 있습니다.

row

Object

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

head

Object

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

index

Number

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

ex) 0 → 첫번째 행에 스타일이 적용됩니다.

style

Object

backgroundColor

String

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

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

color

String

텍스트 색상

배경 색상

color

String

글자색을 지정합니다.

ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000'

backgroundColor

String

배경색을 지정합니다.

ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000'

borders

Object

borders를 테두리의 스타일을 정의합니다.

top

Object

border-top 정의

styletype

String

테두리

스타일

스타일을 지정합니다.

지원하는 타입: [none | dotted | dashed | solid | double]

ex) 'solid'

Note
테두리 스타일이 'double'일 경우, 테두리 두께(width)가 최소 3px 이상 일 때 표현됩니다.

width

Number

테두리 두께를 px 단위로 지정합니다.

1~10 사이의 값만 적용됩니다.

Note

테두리 두께

UI에는 테두리의 두께가 최대 1px 로 표현됩니다.
테이블 생성 시에는 설정한 테두리 두께로 표현됩니다.

color

String

테두리 색상색상을 지정합니다.

ex) 'red'
ex) 'rgb(255, 0, 0)'
ex) '#FF0000'

bottom

Object

형태는 top과 같습니다.

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

left

Object

형태는 top과 같습니다.

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

right

Object

형태는 top과 같습니다.

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

highlight

Object

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

형태는 head의 index 대신 isEven을 사용하여 스타일을 적용하며 이외에는 head와 같습니다.

index

isEven

Number

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

1: 짝수Boolean

짝수행에 스타일을 적용할 지 여부입니다.

true: 짝수 행에 스타일을 적용합니다.
false: 홀수 행에 스타일을 적용합니다.

col

Object

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

형태는 row와 같습니다.

defaultStyle

Object

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

형태는 style과 같습니다.

tableStyle

Object

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

형태는 style과 같습니다.

Note

title	참고사항

잘못된 템플릿 설정 시, 템플릿이 보이지 않거나, 일부 스타일이 적용되지 않을 수 있습니다.
스타일 우선순위는 다음과 같습니다.
- headRow > headCol > highlightRow > highlightCol > defaultStyle

editor.table.template.list 설정

keyKey

typeType

설명

설정

popup

ArrayList

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

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

Code Block

language	js

popup: [


    ['Basic', 'Gray Column Header', 'Gray Row Header', 'Dual Header'],


    ['Sideless Zebra', 'Sideless GrayScale', 'GrayScale', 'Striped Black Row Header']

dialog

ArrayList

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

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

Code Block

language	js

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']

Note

title	참고사항

각 배열에 4개 이상의 템플릿 입력 시 4번째까지의 템플릿 스타일만 표현됩니다.
등록되지 않은 템플릿 key 추가 시 표현되지 않습니다.

기본 스타일 종류

Image Added	Image Added	Image Added	Image Added
Basic	Dashed	GrayScale	Zebra
Image Added	Image Added	Image Added	Image Added
Sideless	Sideless Zebra	Sideless GrayScale	Sideless Black
Image Added	Image Added	Image Added	Image Added
Gray Column Header	Dashed Gray Column Header	Dual Header	Dashed Dual Header
Image Added	Image Added	Image Added	Image Added
Gray Row Header	Dashed Gray Row Header	Sideless Black Row	Striped Black Row Header

상세설정 보기

적용 예시

Code Block

language	js

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: {
                    indexisEven: 1true,
                    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']
        ]
    }
}

표 생성 팝업

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

...

Space shortcuts

Page tree

Versions Compared

Old Version 17

New Version Current

Key

editor.table.template.styles 설정

editor.table.template.list 설정

기본 스타일 종류

적용 예시