개인 프로젝트를 진행하며 관리자가 글을 쓸 때, 블로그 형식으로 사용자에게 보여주기 위해 처음으로 에디터를 도입해봤다.
내가 사용한 에디터는 TinyMce로 비교적 사용하기 쉽지만 에디터 내부에 이미지를 삽입하는 기능을 원한다면 따로 코드를 추가 해야한다.
api key 발급하기
우선 TinyMce 에디터를 사용하기 위해선 api key를 발급 받아야한다.
오른쪽에서 구글과 깃허브중 원하는 계정으로 회원가입을 하면 된다.
회원가입 완료 후 자동으로 이 화면이 뜬다. 원하는 편집기를 선택하고 오른쪽에 있는 파란 버튼을 누르거나 스크롤을 내려보면 API Key가 나온다. 복사하기.
Html의 Head에 스크립트 코드 추가
TinyMCE 스크립트를 사용하는 경우, 해당 script 태그를 HTML 파일의 head 태그 안에 넣으면 된다. 브라우저가 페이지를 렌더링하기 전에 TinyMCE 에디터를 초기화할 수 있도록 하기 위해서다.
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
이 부분에서 no-api-key를 지우고 복사해온 API Key를 넣어주기.
5버전이 비교적 사용하기 편해보여서 5버전으로 사용했다.
body안에 TinyMce를 적용할 텍스트 필드를 만들어준다.
관리자가 사용하는거라 css는 최소한만 줬기 때문에 그냥 한 곳에 썼다.
제목 값도 넘겨야 하기 때문에 추가. 이미지를 포함해서 글 내용은 모두 mcontents로 넘기기 때문에 더이상 추가할 게 없다.
- form: 데이터를 서버로 전송하기 위한 기본 구조를 제공.
- method="post": 데이터를 숨겨서 서버로 보냄(주소창에 노출되지 않음).
- action="submit.jsp": 데이터를 처리할 서버 파일 경로.
- name="mcontent": 서버에서 데이터를 식별하기 위한 이름.
- button type="submit": 폼 데이터를 전송하는 버튼.
<form method="post" action="submit.jsp">
<!--
<form>: 사용자가 입력한 데이터를 서버로 전송하기 위한 HTML 태그.
method="post": 데이터를 서버로 전송하는 HTTP 방식 중 POST 방식을 사용.
POST는 보안성이 상대적으로 높고, 데이터를 URL에 노출하지 않음.
action="submit.jsp": 데이터를 처리할 서버 파일의 경로를 지정.
여기서는 'submit.jsp'에서 데이터를 처리함.
-->
<textarea name="content"></textarea>
<!--
<textarea>: 여러 줄의 텍스트를 입력받기 위한 HTML 태그.
name="content": 서버로 전송되는 데이터의 키(key) 역할.
서버에서 데이터를 처리할 때 'content'라는 이름으로 값에 접근 가능.
(예: JSP에서 request.getParameter("content")로 접근)
-->
<button type="submit">제출</button>
<!--
<button>: 버튼을 생성하는 HTML 태그.
type="submit": 클릭 시, <form> 태그의 데이터를 지정된 action 경로로 전송.
-->
</form>TinyMce 적용하기
<script>
tinymce.init({
selector: "textarea", // TinyMCE를 적용할 textarea 선택
plugins: "advlist autolink link image lists charmap preview paste", // 플러그인 설정
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image", // 툴바 설정
menubar: false, // 메뉴바 비활성화
width: 900,
height: 800, // 에디터 높이 설정
paste_data_images: true, // 클립보드에서 복사한 이미지를 Base64로 처리
automatic_uploads: false, // 이미지 자동 업로드 비활성화
// 이미지 업로드를 Base64로 처리
images_upload_handler: function (blobInfo, success, failure) {
const reader = new FileReader(); // FileReader를 사용하여 파일을 Base64로 변환
reader.onload = function () {
success(reader.result); // Base64 데이터를 TinyMCE에 전달
};
reader.onerror = function () {
failure('이미지를 처리하는 동안 문제가 발생했습니다.');
};
reader.readAsDataURL(blobInfo.blob()); // 파일을 Base64로 읽기
},
// 붙여넣기 이미지를 Base64로 처리
paste_postprocess: function(plugin, args) {
console.log("붙여넣기 처리 중:", args.node.innerHTML);
}
});
</script>Base64 방식을 사용하면 이미지 데이터를 텍스트 형식으로 변환해서 서버와 상호작용 없이 바로 HTML에 포함시킬 수 있다. TinyMCE에서 Base64 방식으로 이미지를 처리하는 방법은 paste_data_images 옵션을 true로 해서 활성화처리 해주기. 그러면 이미지가 Base64 형식으로 에디터에 삽입된다.
일단 글쓰기 화면은 정상적으로 되고있다. 서버에 값이 제대로 넘겨지는지 확인은 다음 시간에~
