const set = new Set();
set.add('1');
set.add('2');
set.add('3');Set 객체 생성 후
console.log(set);출력 해보면
console.log(...set);출력 해보면
...을 인자 앞에 붙이면 반복 가능한 객체를 하나씩 펼쳐서 리턴한다고 한다.
이 방법을 전개 구문( 또는 전개 연산자) 라고 한다.
이 전개 구문을 활용해여 Set을 Array 형태로 바꾸려면 배열 안에 전개 구문을 사용하면 된다.
console.log([...set]);출력 해보면
배열 형태로 출력이 된다.
| CKEditor5 텍스트 넣기 (0) | 2021.12.06 |
|---|---|
| CKEditor5 적용법 (0) | 2021.12.06 |
CKEditor5 적용 방법은 CKEditor5 적용법 << 클릭
<form:textarea path = "content" id = "input_content" placeholder = "내용을 입력해주세요."/>
<script>
ClassEditor
.create(document.querySelector('#input_content'))
.catch(error => {
console.error(error);
})
</script>CKEditor5가 적용된 textarea에 텍스트 값을 집어 넣으려고 한다.
1시간을 구글링해서 겨우 찾은 결과.
구문 1개만 추가해주면 된다 .then
<script>
ClassEditor
.create(document.querySelector('#input_content'))
.then( editor => {
editor.setData('하이하이');
})
.catch(error => {
console.error(error);
})
</script>setData() : editor 안에 내용 설정.
(※참고 : set이 있다면 get도 있을터.)
getData() : editor 안의 내용 불러오기.
끝.
이걸 활용해서 게시물 수정할 때 작성했던 내용 가져오는데 썼다.
| JavaScript) Set을 Array 형태로 변경 (0) | 2023.02.06 |
|---|---|
| CKEditor5 적용법 (0) | 2021.12.06 |
<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
나는 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 |