CKEditor 5 / 설정하고 사용하는 방법
CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다.
Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content.
CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 예는 모두 Classic editor를 기준으로 한다.
CDN으로 사용하기
CDN 링크는 https://ckeditor.com/ckeditor-5/download/에서 확인한다.
ckeditor.js를 연결하고, textarea에 적용한다. document.querySelector;의 ID는 textarea의 ID이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CKEditor</title>
</head>
<body>
<h1>CKEditor</h1>
<form action="" method="POST">
<textarea name="text" id="editor"></textarea>
<p><input type="submit" value="전송"></p>
</form>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script>
ClassicEditor.create( document.querySelector( '#editor' ) );
</script>
</body>
</html>
한글로 사용하기 위해서는 ko.js를 연결하고 옵션을 추가한다.
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/translations/ko.js"></script>
<script>
ClassicEditor.create( document.querySelector( '#editor' ), {
language: "ko"
} );
</script>
에디터의 크기는 CSS로 정하는 것이 편하다.
<style>
.ck-editor__editable { height: 400px; }
</style>
<style>
.ck-editor__editable { height: 400px; }
.ck-content { font-size: 12px; }
</style>
에디터에 적용되는 CSS는 https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html에서 볼 수 있다.
필요 없는 기능은 removePlugins로 제거한다.
<script>
ClassicEditor.create( document.querySelector( '#editor' ), {
removePlugins: [ 'Heading' ],
language: "ko"
} );
</script>
다운로드하여 사용하기
- CKEditor 5 online builder에 접속한다.
- 원하는 에디터 타입을 선택한다. 여기서는 Classic으로 진행하겠다.
- 에디터에 포함할 플러그인을 선택한다. 별표가 있는 것은 프리미엄으로, 유료 제품이다.
- 선택을 마쳤으면 [Next step]을 클릭한다.
- 위의 것이 사용 가능한 플러그인, 밑에 것이 에디터에서 보이는 플러그인이다.
- 드래그하여 에디터에서 보일 플러그인은 정하고, 순서도 정한다. 나중에 코드로 변경할 수 있지만, 가능하다면 여기서 맞추는 게 편하다.
- [Next step]을 클릭한다.
- 언어를 선택하고 [Next step]을 클릭한다.
- [Start]를 클릭한고 잠시 기다리면...
- 다운로드 할 수 있다.
- 다운로드한 파일의 압축을 풀고 서버에 업로드한다. 연결할 스크립트는 build 폴더 안의 ckeditor.js이다.
- 나머지 코드는 CDN 사용 시의 코드와 같다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<style>
.ck-editor__editable { height: 400px; }
.ck-content { font-size: 12px; }
</style>
</head>
<body>
<h1>CKEditor</h1>
<form action="" method="POST">
<textarea name="text" id="editor"></textarea>
<p><input type="submit" value="전송"></p>
</form>
<script src="ckeditor/build/ckeditor.js"></script>
<script>
ClassicEditor.create( document.querySelector( '#editor' ) );
</script>
</body>
</html>
- 툴바에 보여지는 플러그인은 아래와 같은 방법으로 정할 수 있다.
<script>
ClassicEditor.create( document.querySelector( '#editor' ), {
toolbar: [
'heading',
'|',
'bold',
'italic'
]
} );
</script>
기타
- https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
JavaScript / Object / Location / URL 정보 가져오는 객체
location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/script/script.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...
JavaScript / Object / Math.log(), Math.log10(), Math.Log2()
Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드
.replace() .replace()는 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드입니다. 문법 string.replace( 'string1', 'string2' ) string에서 string1을 찾아 string2로 바꿉니다. 예제 jbStr 문자열에서 Lorem을 찾아 Amet으로 바꾼 후 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | .replace()</title> </head> <body> <script> ...
JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드
.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...
JavaScript / 대화상자 / Alert, Confirm, Prompt
자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...
typeof 연산자 typeof는 변수의 데이터 타입을 반환하는 연산자입니다. 문법 typeof variable variable에는 데이터 또는 변수가 들어갑니다. 괄호를 사용해도 됩니다. typeof(variable) 반환되는 값은 다음과 같습니다. undefined : 변수가 정의되지 않거나 값이 없을 때 number : 데이터 타입이 수일 때 string : 데이터 타입이 문자열일 때 boolean : 데이터 타입이 불리언일 때 object : 데이터 타입이 함수, 배열 등 객체일 때 function : 변수의 ...
JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기
자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법
JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()
encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...
JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수
isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성
.characterSet .characterSet은 문서의 문자 인코딩을 반환하는 속성입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.characterSet : " + document.characterSet + "</p>" ); </script> </body> </html>