폼 요소 편집기

2.15.0 버전부터 지원합니다.

폼 요소를 삽입하고 해당 속성을 편집할 수 있는 폼 요소 편집기 플러그인입니다.

사용 방법

플러그인 파일 불러오기

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of formEditor.min.js"></script>
<link rel="stylesheet" href="url of formEditor.min.css">

툴바에 버튼 추가하기

폼 요소 삽입 버튼, 속성 다이얼로그 버튼, 편집 버튼을 툴바 영역이나 메뉴 영역에 추가할 수 있습니다.

툴바에 추가

// synapeditor.config.js
//...
'editor.toolbar': [
    // Form element insert buttons
    'formEditor_text', 'formEditor_textarea', 'formEditor_select',
    'formEditor_radio', 'formEditor_checkbox', 'formEditor_button',
    'formEditor_hidden', 'formEditor_datalist', 'formEditor_fieldset', 'formEditor_form'
    //...
],
// ...

폼 요소 삽입 버튼 목록

키	아이콘	설명
formEditor_text		텍스트 필드를 삽입합니다. (<input type="text">)
formEditor_textarea		텍스트 영역을 삽입합니다. (<textarea>)
formEditor_select		셀렉트 박스를 삽입합니다. (<select>)
formEditor_radio		라디오 버튼을 삽입합니다. (<input type="radio">)
formEditor_checkbox		체크박스를 삽입합니다. (<input type="checkbox">)
formEditor_button		버튼을 삽입합니다. (<button>)
formEditor_hidden		히든 필드를 삽입합니다. (<input type="hidden">)
formEditor_datalist		데이터 리스트를 삽입합니다. (<datalist>)
formEditor_fieldset		필드셋을 삽입합니다. (<fieldset>)
formEditor_form		폼을 삽입합니다. (<form>)

속성 버튼 목록

키	아이콘	설명
formEditor_textProperties		텍스트 필드 속성을 설정하는 다이얼로그를 엽니다.
formEditor_textareaProperties		텍스트 영역 속성을 설정하는 다이얼로그를 엽니다.
formEditor_selectProperties		셀렉트 박스 속성을 설정하는 다이얼로그를 엽니다.
formEditor_radioProperties		라디오 버튼 속성을 설정하는 다이얼로그를 엽니다.
formEditor_checkboxProperties		체크박스 속성을 설정하는 다이얼로그를 엽니다.
formEditor_buttonProperties		버튼 속성을 설정하는 다이얼로그를 엽니다.
formEditor_hiddenProperties		히든 필드 속성을 설정하는 다이얼로그를 엽니다.
formEditor_datalistProperties		데이터 리스트 속성을 설정하는 다이얼로그를 엽니다.
formEditor_datalistInputProperties		데이터 리스트 필드 속성을 설정하는 다이얼로그를 엽니다.
formEditor_labelProperties		라벨 속성을 설정하는 다이얼로그를 엽니다.
formEditor_fieldsetProperties		필드셋 속성을 설정하는 다이얼로그를 엽니다.
formEditor_formProperties		폼 속성을 설정하는 다이얼로그를 엽니다.

폼 요소 편집 버튼 목록

키	아이콘	설명
formEditor_bold		선택한 폼 요소에 '굵게'를 적용합니다.
formEditor_italic		선택한 폼 요소에 '기울임꼴'을 적용합니다.
formEditor_underline		선택한 폼 요소에 '밑줄'을 적용합니다.
formEditor_strike		선택한 폼 요소에 '취소선'을 적용합니다.
formEditor_fill		선택한 폼 요소에 '채우기 색상'을 적용합니다.
formEditor_borderColor		선택한 폼 요소에 '테두리 색상'을 적용합니다.
formEditor_lineThickness		선택한 폼 요소에 '선 두께'를 적용합니다.
formEditor_lineStyle		선택한 폼 요소에 '선 스타일'을 적용합니다.
formEditor_fontFamily		선택한 폼 요소에 '글꼴'을 적용합니다.
formEditor_fontSize		선택한 폼 요소에 '글꼴 크기'를 적용합니다.
formEditor_fontColor		선택한 폼 요소에 '글꼴 색상'을 적용합니다.
formEditor_align		선택한 폼 요소에 '정렬'을 적용합니다.
formEditor_delete		선택한 폼 요소를 삭제합니다.

플러그인 구성

폼 요소 풍선팝업 설정

폼 요소 풍선팝업에 표시될 버튼 목록을 직접 구성할 수 있습니다.

설정 전(기본값)	설정 후

// synapeditor.config.js
//...
'formEditor.config': {
    'balloon': {
        // balloon name : [array of button names to display]
        'formEditor_text': ['formEditor_textProperties', 'formEditor_delete'],
        'formEditor_textarea': ['formEditor_textareaProperties', 'formEditor_delete'],
        'formEditor_select': ['formEditor_selectProperties', 'formEditor_delete'],
        'formEditor_radio': ['formEditor_radioProperties', 'formEditor_delete'],
        'formEditor_checkbox': ['formEditor_checkboxProperties', 'formEditor_delete'],
        'formEditor_button': ['formEditor_buttonProperties', 'formEditor_delete'],
        'formEditor_hidden': ['formEditor_hiddenProperties', 'formEditor_delete'],
        'formEditor_datalist': ['formEditor_datalistProperties', 'formEditor_delete'],
        'formEditor_datalistInput': ['formEditor_datalistInputProperties', 'formEditor_delete'],
        'formEditor_label': ['formEditor_labelProperties', 'formEditor_delete'],
        'formEditor_fieldset': ['formEditor_fieldsetProperties', 'formEditor_delete'],
        'formEditor_form': ['formEditor_formProperties', 'formEditor_delete']
    }
}
//...

폼 요소 이벤트 설정 기능 사용

폼 요소의 속성 다이얼로그를 사용하여 이벤트를 설정할 수 있습니다.

(이벤트를 설정할 수 있는 다이얼로그: 텍스트 필드 속성, 텍스트 영역 속성, 버튼 속성, 셀렉트 박스 속성, 라디오 버튼 속성, 체크박스 속성, 데이터 리스트 필드 속성)

이 기능을 사용하려면, 에디터의 내용 필터 설정에서 이벤트 속성 삽입이 허용되어야 합니다.

이벤트 속성 삽입을 허용하려면 'editor.contentFilter.allowEventAttribute'를 true로 설정하면 됩니다. (참조: 내용 필터)

주의!

이 옵션을 사용해 발생하는 보안 문제에 대해 제공자는 책임을 지지 않습니다.

editor.contentFilter.allowEventAttribute: false	editor.contentFilter.allowEventAttribute: true

액션

insertFormRunElement

현재 캐럿 위치에 텍스트 필드, 텍스트 영역, 선택 상자와 같은 인라인 폼 요소를 삽입합니다.

매개변수

editor.execCommand('insertFormRunElement', type);

insertFormBlockElement

현재 캐럿 위치에 폼 및 필드셋과 같은 블록 폼 요소를 삽입합니다.

매개변수

editor.execCommand('insertFormBlockElement', type);