@markdown
# JSP & jQuery로 간단한 텍스트 편집기 만들기
____
- HTML, CSS, jQuery 세 부분으로 구성
- 편집기 기능
- 전체선택, 굵게, 기울임, 밑줄
- 글자 정렬, 글꼴, 크기 변경
- 글자 색, 배경색 변경
## HTML 텍스트 편집기 구성
____
- TextArea는 선택한 글자의 변경이 불가능하기 때문에 `<div>`의 `contenteditable` 속성을 사용한다.
<pre><code class="html" style="font-size:14px"><div id="text" contenteditable="true" style="width:400px; height:400px;">텍스트 편집기</div>
</code></pre>
- `contentEditable` 속성을 사용하면, 텍스트 편집 시 `jQuery`의 `execCommand()`로 편집 요소를 제어할 수 있게 된다.
<br>
### 전체 HTML 코드
____
<pre><code class="html" style="font-size:14px"><body>
<div style="background-color:#CCFFFF; width:390px; padding: 10px;">
<button id="selectAll">전체선택</button>
<button id="bold">굵게</button>
<button id="italic">기울임</button>
<button id="underLine">밑줄</button>
<br/>
<button id="justifyLeft">왼쪽정렬</button>
<button id="justifyCenter">가운데정렬</button>
<button id="justifyRight">오른쪽정렬</button>
<br/>
<select id="fontName" width="50px">
<option value="">글꼴 선택</option>
<option value="돋움">돋움</option>
<option value="굴림">굴림</option>
<option value="궁서">궁서</option>
<option value="바탕">바탕</option>
<option value="맑은 고딕">맑은 고딕</option>
</select>
<select id="fontSize" width="50px">
<option value="">글자 크기</option>
<option value="1">4px</option>
<option value="2">8px</option>
<option value="3">10px</option>
<option value="4">12px</option>
<option value="5">16px</option>
<option value="6">20px</option>
<option value="7">30px</option>
</select>
<select id="foreColor" width="50px">
<option value="">글자 색깔</option>
<option value="#f00">빨강</option>
<option value="#00f">파랑</option>
<option value="#0f0">초록</option>
<option value="#ffff00">노랑</option>
<option value="#000">검정</option>
</select>
<select id="hiliteColor" width="50px">
<option value="">글자 배경색</option>
<option value="#f00">빨강</option>
<option value="#00f">파랑</option>
<option value="#0f0">초록</option>
<option value="#ffff00">노랑</option>
<option value="#000">검정</option>
</select>
</div>
<div id="text" contenteditable="true" style="width:400px; height:400px;">텍스트 편집기</div>
</body>
</code></pre>
## CSS 꾸미기
____
- 일반 `<div>` 속성을 `TextArea` 처럼 꾸며주기 위해 아래와 같은 CSS를 지정한다.
- 설정해주게 되면 텍스트 편집 영역을 마우스로 지정할 수 있는 효과를 볼 수 있다.
<pre><code class="html" style="font-size:14px">#text {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
overflow: auto;
padding: 2px;
resize: both;
}
</code></pre>
## jQuery 메소드 사용
_____
- 텍스트 편집기는 `jQuery`에서 제공하는 `execCommand`만을 통해 구현할 수 있다.
### execCommand() 문법
- `document.execCommand("명령이름", false, "값")`
<br>
### execCommand() 명령어 종류
____
- `execCommand()`는 기본 선택되어 있는 영역의 스타일을 변경한다.
- `bold` : 글자 굵게, 매개변수 - true
- `fontName` : 글꼴 변경, 매개변수로 글꼴 이름을 넘겨야함
- `fontSize` : 글자 크기 변경, 매개변수로 글자 사이즈를 넘겨야함(1~7)
- `foreColor` : 글자 색 변경, 매개변수로 글자 색(RGB 값)을 넘겨야함
- `hiliteColor` : 글자 배경색 변경, 매개변수로 글자 색(RGB 값)을 넘겨야함
- `italic` : 글자 기울임, 매개변수 - true
- `justifyCenter` : 가운데 정렬, 매개변수 - true
- `justifyLeft` : 왼쪽 정렬, 매개변수 - true
- `justifyRight` : 오른쪽 정렬, 매개변수 - true
- `selectAll` : 편집기 전체 선택, 매개변수 - true
- `underline` : 밑줄, 매개변수 - true
- `styleWithCSS` : 마크업에서 style 속성을 수정할때 사용, 매개변수로 true 지정
- [execCommand() API 문서 참고](https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand)
<br>
### jQuery 소스코드
_____
<pre><code class="html" style="font-size:14px"><script>
document.execCommand('styleWithCSS', false, true);
document.execCommand('insertBrOnReturn', false, true);
$(document).ready(function() {
$("#text").focus();
$('button').click(function(){
document.execCommand($(this).attr('id'), false, true);
});
$('#bold').click(function() {
document.execCommand('bold', false, true);
});
$('#selectAll').click(function() {
document.execCommand('selectAll', false, true);
});
$('#italic').click(function() {
document.execCommand('italic', false, true);
});
$("#underLine").click(function() {
document.execCommand('underLine', false, true);
});
$("#justifyLeft").click(function() {
document.execCommand('justifyLeft', false);
});
$("#justifyRight").click(function() {
document.execCommand('justifyRight', false);
});
$("#justifyCenter").click(function() {
document.execCommand('justifyCenter', false);
});
$('select').change(function(){
document.execCommand($(this).attr('id'), false, $(this).val());
});
$("#foreColor").change(function(){
document.execCommand('foreColor', false, $(this).val());
});
$("#hiliteColor").change(function(){
document.execCommand('hiliteColor', false, $(this).val());
});
$("#fontName").change(function(){
document.execCommand('fontName', false, $(this).val());
});
$("#fontSize").change(function(){
document.execCommand('fontSize', false, $(this).val());
});
});
</script>
</code></pre>
<br>
### jQuery 소스코드 최적화
____
- 해당 버튼, select box의 ID에 명령어와 같은 이름을 주게 되면 ID 값을 읽어 명령어를 호출 할 수 있다.
- 아래와 같은 짧은 코드로 편집에 필요한 각 기능을 수행할 수 있다.
<pre><code class="html" style="font-size:14px">$('button').click(function(){
document.execCommand($(this).attr('id'), false, true);
});
$('select').change(function(){
document.execCommand($(this).attr('id'), false, $(this).val());
});
</code></pre>
<br>
### 전체 소스코드
____
- Github - [https://github.com/KSLEE7746/TextEditor/blob/master/TextEditor.html](https://github.com/KSLEE7746/TextEditor/blob/master/TextEditor.html)
'웹 프로그래밍' 카테고리의 다른 글
| Spring - 핵심 개념(IoC, DI) (0) | 2017.07.05 |
|---|---|
| Spring - Maven 설치 및 Eclipse 환경설정 하기 (0) | 2017.07.04 |
| Ajax 사용한 Daum 검색 API 사용하기 (0) | 2017.06.21 |
| AJAX 비동기 처리 방식 (0) | 2017.06.20 |
| Tomcat 웹 서버 설치하기 (0) | 2017.05.30 |