Status

title	릴리즈 2.15.0 이상

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

사용방법

플러그인 파일 불러오기

Code Block

language	xml
theme	Emacs

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

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

툴바에 버튼 추가하기

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

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

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

폼요소 폼 요소 삽입 버튼 목록

KEY	ICON	설명
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>`)

폼요소 폼 요소 속성 버튼 목록

KEY	ICON	설명
formEditor_textFieldProperties		텍스트 필드의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_textareaProperties		텍스트 영역의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_selectProperties		선택 박스의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_radioButtonProperties		라디오 버튼의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_checkboxProperties		체크 박스의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_buttonProperties		버튼의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_hiddenFieldProperties		히든 필드의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_datalistInputProperties		데이터 목록 입력필드의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_datalistProperties		데이터 목록의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_labelProperties		레이블의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_fieldsetProperties		필드셋의 속성을 설정하는 다이얼로그를 엽니다.
formEditor_formProperties		폼의 속성을 설정하는 다이얼로그를 엽니다.

폼요소 폼 요소 편집 버튼 목록

KEY	ICON	설명
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		선택된 폼요소를 폼 요소를 삭제합니다.