이번에 만드는 게시판에 넣을 에디터를 찾아보다가 ckEditor를 발견!
네이버에서 만든 스마트에디터, 다음 에디터 같은 것들은 이미 다른 사이트에 적용되어 있는것같아
새로운 에디터를 찾아봤다!
* 상용으로 쓰는거면 라이센스 잘 읽어보고 쓰기!
CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor
Rock-solid, free WYSIWYG editor with collaborative editing, 200+ features, full documentation and support. Join Microsoft, Mozilla, IBM and 20k+ other companies.
ckeditor.com
많은 사람들이 사용하고 UI도 깔끔한것같아 이 친구로 결정~😉
1. 다운 받기
CKEditor 버전4 랑 버전5가 있는데 버전4에 내가 원하는 기능들이 있는 것 같아 안전하게 버전4로!
여기서 다운 받으면 된다!
CKEditor 4 online builder
Star CKEditor 4 on GitHub
ckeditor.com
1. Choose preset
: 여기서 원하는 기능을 얼마나 넣을지를 대강 정하는데
basic < standard < full 순으로 기능이 많다.
나중에 기능은 직접 사용해보고 뺄 수 있으니 full추천!
* compare plugins in all preset 을 누르면 어떤 기능이 있고 없는지 확인가능!
플러그인 선택 / 디자인 선택 / 언어 선택 후 다운로드!
2. 소스다운받은것을 webapp 밑으로 옮긴다
(파일 불러오는거 패쓰 설정해줘야 인식해주고 가져온다~ 까먹지 말기~~)
root-context.xml
| <resources mapping="/ckeditor/**" location="/ckeditor/" /> |
3. samples/index.html에서 기능 확인해보기
직접 실행해보면서 이 기능은 필요한지 불필요한지 결정!
TOOLBAR CONFIGURATOR을 눌러서 원하는 기능은 빼고 Get toolbar config를 누른다
그럼 소스 코드가 뜨는데 config.js에 추가해주면 됨
4. jsp파일 아무거나 만들어서 되나 test해보자!
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page session="false" %>
<%@ page import="java.util.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.net.*"%>
<%
//파일 기본경로
String defaultPath = request.getSession().getServletContext().getRealPath("/");
//파일 기본경로, 상세경로
String filePath = defaultPath + "ckEimg" + File.separator;
%>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/ckeditor/ckeditor.js"></script>
<script>
window.onload = function(){
ck = CKEDITOR.replace("editor");
};
</script>
</head>
<body>
<h1>editor check</h1>
<textarea name="content" id="editor"></textarea>
</body>
</html>
5. 나오는거 확인
'개발공부 > 웹개발' 카테고리의 다른 글
| ckeditor4 사용방법(이미지 업로드) (0) | 2021.01.07 |
|---|---|
| git 개념정리 및 명령어 (계속 추가 예정) (0) | 2021.01.07 |
| [mysql] 위 아래 행 한번에 구하기 (이전,다음게시판 구하기) (0) | 2020.11.25 |
| [jstl] 받아온 list를 c:foreach로 안돌리고 바로 값 찾는 방법 (0) | 2020.11.25 |
| [웹개발] web서버, was서버 연결하는 mod_jk (JkMount 패스설정) (0) | 2020.11.25 |
