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



사용방법

플러그인 파일 불러오기

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<script src="formEditor.min.js의 url"></script>
<link rel="stylesheet" href="formEditor.min.css의 url">

툴바에 버튼 추가하기

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

툴바에 추가

//...
'editor.toolbar': [
	// 폼요소 삽입 버튼들
    'formEditor_textField', 'formEditor_textarea', 'formEditor_selectBox', 
    'formEditor_radio', 'formEditor_checkbox', 'formEditor_button', 
    'formEditor_hidden', 'formEditor_datalist', 'formEditor_fieldset', 'formEditor_form'
	//...
],
// ...

폼요소 삽입 버튼 목록

KEYICON설명
formEditor_textField

텍스트 필드를 삽입합니다. (<input type="text">)

formEditor_textarea

텍스트 영역을 삽입합니다. (<textarea>)

formEditor_selectBox

선택 박스를 삽입합니다. (<select>)

formEditor_radio

라디오 버튼을 삽입합니다. (<input type="radio">)

formEditor_checkbox

체크 박스를 삽입합니다. (<input type="checkbox">)
formEditor_button

버튼을 삽입합니다. (<button>)
formEditor_hidden

히든 필드를 삽입합니다. (<input type="hidden">)
formEditor_datalist

데이터 목록을 삽입합니다. (<input list="">)
formEditor_fieldset

필드셋을 삽입합니다. (<fieldset>)
formEditor_form

폼을 삽입합니다. (<form>)


폼요소 속성 버튼 목록

KEYICON설명
formEditor_textFieldProperties

텍스트 필드의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_textareaProperties

텍스트 영역의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_selectProperties

선택 박스의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_radioButtonProperties

라디오 버튼의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_checkboxProperties

체크 박스의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_buttonProperties

버튼의 속성을 설정하는 다이얼로그를 엽니다.

formEditor_hiddenFieldProperties

히든 필드의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_datalistInputProperties

데이터 목록 입력필드의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_datalistProperties

데이터 목록의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_labelProperties

레이블의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_fieldsetProperties

필드셋의 속성을 설정하는 다이얼로그를 엽니다.

formEditor_formProperties

폼의 속성을 설정하는 다이얼로그를 엽니다.


폼요소 편집 버튼 목록

KEYICON설명
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

선택된 폼요소를 삭제합니다.


플러그인 설정하기

폼요소 벌룬 설정

폼요소 벌룬에 나타날 버튼의 목록을 직접 설정할 수 있습니다.

설정 전 (기본 설정)설정 후


//...
'formEditor.config': { 
    'balloon': { 
        // 벌룬이름 : [ 나타날 버튼 이름 배열 ]
        'formEditor_text': ['formEditor_textFieldProperties', 'formEditor_delete'], 
        'formEditor_textarea': ['formEditor_textareaProperties', 'formEditor_delete'], 
        'formEditor_select': ['formEditor_selectProperties', 'formEditor_delete'], 
        'formEditor_radio': ['formEditor_radioButtonProperties', 'formEditor_delete'], 
        'formEditor_checkbox': ['formEditor_checkboxProperties', 'formEditor_delete'], 
        'formEditor_button': ['formEditor_buttonProperties', 'formEditor_delete'], 
        'formEditor_hidden': ['formEditor_hiddenFieldProperties', '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']
    } 
},
// ...


BALLOON NAME설명
formEditor_text텍스트 필드에 나타나는 벌룬입니다.
formEditor_textarea텍스트 영역에 나타나는 벌룬입니다.
formEditor_select선택 박스에 나타나는 벌룬입니다.
formEditor_radio라디오 버튼에 나타나는 벌룬입니다.
formEditor_checkbox체크 박스에 나타나는 벌룬입니다.
formEditor_button버튼에 나타나는 벌룬입니다.
formEditor_hidden히든 필드에 나타나는 벌룬입니다.
formEditor_datalist데이터 목록에 나타나는 벌룬입니다.
formEditor_datalistInput데이터 목록 입력필드에 나타나는 벌룬입니다.
formEditor_label레이블에 나타나는 벌룬입니다.
formEditor_fieldset필드셋에 나타나는 벌룬입니다.
formEditor_form폼에 나타나는 벌룬입니다.