이 페이지의 구성
WYSIWYG Editor(v3.2 신규)
요소기술 - 위지윅 에디터(WYSIWYG Editor) 방지
개요
게시판, 자료실의 메모장에서 사용자가 자유롭게 컨텐츠를 편집할 수 있는 기능의 컴포넌트을 제공한다. 텍스트 및 HTML 편집 기능을 지원하고, 이미지 업로드 및 이미지를 편집기에 보여주는 기능이 있어야 한다. 웹 에디터는 웹 브라우저에서 게시판, 공지사항, 자료실, 사진첩과 같이 입력기능이 있는 곳에서 사용할 수 있다.
본 기능은 전자정부 표준프레임워크 공통컴포넌트 요소기술 중 개인정보보호정책의 등록 화면에 구성되어 있다.
설명
기존 사용하던 htmlarea를 ckeditor로 변경한다.
관련소스
| 유형 | 대상소스 | 설명 | 비고 |
|---|---|---|---|
| JS | webapp/html/egovframework/com/cmm/utl/ckeditor | 에디터 소스 |
환경설정
pom.xml 선언
<dependency>
<groupId>com.ckeditor</groupId>
<artifactId>ckeditor-java-core</artifactId>
<version>3.5.3</version>
</dependency>
사용방법
taglib 선언
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
ckeditor:replace 선언(body 태그안에 선언해야 함)
<form:textarea path="indvdlInfoDc" rows="75" cols="14" cssClass="txaClass2"/>
...
<ckeditor:replace replace="indvdlInfoDc" basePath="${pageContext.request.contextPath}/html/egovframework/com/cmm/utl/ckeditor/" />
에디터 설정 변경
인터페이스 색상 에디터 인터페이스의 색상을 ‘uiColor’ property를 이용하여 변경할 수 있다.
<code html>
CKEDITOR.replace( 'textarea_id', {
uiColor: '#14B8C4'
});
</code>
엔터키 설정 에디터에서 엔터나 쉬프트+엔터를 눌렀을 때 입력되는 내용을 변경할 수 있다. property : enterMode(엔터), shiftEnterMode(쉬프트+엔터) option : ENTER_P (
), ENTER_BR (
), ENTER_DIV (
CKEDITOR.replace( 'textarea_id', {
enterMode: CKEDITOR.ENTER_DIV
});
엔터키 설정 에디터 인터페이스의 언어를 ’language’ property를 이용하여 변경할 수 있다. 각 언어별 설정은 /ckeditor/lang 디렉토리 안에 존재한다.
<code html>
CKEDITOR.replace( 'textarea_id', {
// Load the Korean interface.
language: 'ko'
});
</code>
툴바 설정 에디터의 도구모음을 원하는 것만 설정해서 사용할 수 있다. 설정 방법은 두가지 방법을 제공하고 있다.
config.toolbar
CKEDITOR.replace( 'textarea_id', {
toolbar: [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },//이름과 도구모음그룹을 정의
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // 이름없이 도구모음그룹을 정의
'/', // 줄바꿈 - 다음 그룹이 새로운 라인에 배치 됨
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]
});
config.toolbarGroups
CKEDITOR.replace( 'textarea_id', {
toolbarGroups: [
{ name: 'document', groups: [ 'mode', 'document' ] }, // 이름과 두 개의 하위 그룹으로 구성
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
'/', // 줄바꿈 - 다음 그룹이 새로운 라인에 배치 됨
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'links' }
]
});
※ 설정관련 샘플페이지 호출 URL : /html/egovframework/com/cmm/utl/ckeditor/samples/index.html