<form:textarea path = "content" id = "input_content" placeholder = "내용을 입력해주세요"/>

이렇게 구성된 textarea에 CKEditor5를 적용해보자.

 

CKEditor 5 - Download Latest Version

 

CKEditor 5 - Download Latest Version

Download a ready-to-use CKEditor 5 Build. Install, download or serve a ready-to-use rich text editor of your choice.

ckeditor.com

3가지 방법 중 하나 선택.

나는 CDN 방식이 편해서 CDN을 이용 할 예정.

CDN 사용 하는 방법은 간단하다. body 태그 안에 저 CDN을 복사 후 붙여넣기 하면 설정은 끝난다.

<body>
...
<script src="https://cdn.ckeditor.com/ckeditor5/31.0.0/classic/ckeditor.js"></script>
...
</body>

 요런식으로. 

 

 

그리고 CKEditor5를 적용하기 위한 script를 작성하자.

<body>
...
<script src="https://cdn.ckeditor.com/ckeditor5/31.0.0/classic/ckeditor.js"></script>
<script>
	ClassicEditor
    	.create(document.querySelector('#여기에 textarea id를 입력하자.'))
        .catch(error =>{
        	console.error(error);
	});
</script>
...
</body>

Editor 테마 종류는 6가지가 있다. (Classic, Inline, Ballon block, Balloon, Document, Custom)

내가 원하는 종류 중 한가지를 선택해서 적용하면 된다.

나는 Class를 사용할거라 script를 ClassEditor로 설정했다. 다른 테마로 설정하려면 

<script>
	InlineEditor
    	.create ~~~
</script>

이렇게 설정하면 된다. 자세한 내용은 

Classic editor - CKEditor 5 Documentation << 클릭.

 

querySelector 괄호 안에 textarea의 id를 입력하면 된다. input은 적용되나 모르겠다 안해봐서.

예를 들어 querySelector('#input_content') 이런 식으로 설정하면 된다.

 

적용이 된 모습

자세한 내용은 CKEditor 5 builds documentation

 

CKEditor 5 builds documentation

Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included.

ckeditor.com

 

끝~

'기타' 카테고리의 다른 글

JavaScript) Set을 Array 형태로 변경  (0) 2023.02.06
CKEditor5 텍스트 넣기  (0) 2021.12.06

게시물 글쓰기 버튼

 

위의 사진처럼 form태그 안에 버튼을 2개 생성 후

돌아가기버튼은 게시물 리스트로, 하나는 게시물등록으로 설정하는 과정에서 발생한 에러?

분명 돌아가기버튼에 submit은 안넣었는데 돌아가기버튼을 클릭하면 submit으로 동작한다. 

 

<form:form modelAttribute = "board" action = "write.do" method = "post">
	<form:input path ~~/>
	<form:input path ~~/>
    
    <button type = "submit">등록</button> 
    <button onclick = "location.href='list.do'">돌아가기</button>
</form:form>

대충 이런식으로 코딩

 

검색해보니 한번에 알았다.

 

원인

form태그 속 사용되는 Button은 기본적으로 type이 submit으로 설정되있다는 것이였다.

 

해결방법

돌아가기의 type을 button으로 지정해줬다.

<form:form modelAttribute = "board" action = "write.do" method = "post">
	<form:input path ~~/>
	<form:input path ~~/>
    
    <button type = "submit">등록</button> 
    <button type = "button" onclick = "location.href='list.do'">돌아가기</button>
</form:form>

 

말끔히 해결!

'Spring 개발.. > 오류' 카테고리의 다른 글

Input[password] 안의 글씨가 안보이는 경우  (0) 2021.11.25

input[password]를 이용하여 입력받는데 안보이는 경우이다.

 

input[password] 속 내용물이 안보임.

 

원인

프로젝트에서 따로 설정한 폰트가 password의 ****를 지원해주지 못하는 것 같다.

 

해결방법

input[password] 의 글씨체를 따로 설정해놓기.

style 태그 안에 넣어주면 된다.

input[password]{
	font-family:'Malgun gothic', dotum, sans-serif;
}

이 구문을 넣어줄 경우 placeholder의 글씨체도 위에 설정한 글씨체로 바뀌므로

placeholder의 글씨체는 내가 원하는 글씨체로 안나온다.

다시 placeholder 글씨체를 다시 내가 원하는 글씨체로 바꿔준다.

마찬가지로 style 태그 안에 넣기.

::placeholder{
		font-family: 'OTWelcomeRA';
}

내가 쓰는 글씨체 - OTWelcomeRA (간단하고 이쁨)

 

 

결과

 

아주 잘된다!

 

'Spring 개발.. > 오류' 카테고리의 다른 글

form 태그 속 여러 개의 Button 태그 클릭 시 모두 submit으로 동작 되는 현상  (0) 2021.11.25

GitHub : HwanHwan2 (github.com)

+ Recent posts

티스토리툴바