ckeditor 문자 입력 개수 편집기 화면에 출력
ckeditor4 버전에서 입력한 글자 개수 또는 html 입력 개수를 화면에 표시 하는 기능이 있습니다. "Word Count & Char Count Plugin" 이라고 불리는 플러그인인데 ckeditor 외부 플러그인으로 설치하면 사용할 수 있습니다.
1. Word Count 플러그인 설치
이름은 Word Count 플러그인 이지만 설치할 때 notification 플러그인도 같이 설치해줘야 합니다.
각각의 플러그인을 다운로드 받았으면 ckeditor 폴더 하위에 있는 plugins 폴더에 wordcount, notification 을 만들고 다운로드 받은 폴더에 있는 plugin.js 파일을 옮겨 줍니다.
이때 다운로드 받은 파일 안의 lang 폴더에 보면 ko.js 라는 파일이 있는데 한글 버전으로 사용한다면 같이 설치 되어야 합니다. 아래와 같이 소스 코드에 파일이 들어가 있어야 합니다.
ckeditor/plugins/wordcount/lang/ko.js
ckeditor/plugins/wordcount/plugin.js
ckeditor/plugins/notification/lang/ko.js
ckeditor/plugins/notification/plugin.js
 |
| plugins 폴더에 설치 된 모습 |
2. Word Count 플러그인 설정
ckeditor 폴더 내의 config.js 파일 config.extraPlugins 부분에 wordcount,notification 설정을 추가 합니다.
 |
| 이미 다른 플러그인을 사용 중이라 끝 부분에 wordcount,notification 추가 했습니다 |
3. Word Count 플러그인 세부 설정
플러그인 설치가 끝났다면 wordcount 설정을 세부적으로 조정합니다. config.wordcount를 통해 화면에 보여주는 글자의 카운트나 제한량, Byte로 표시할 건지, 공백을 카운트 할 건지 같은 세부적인 조정이 가능합니다.
 |
| config.wordcount 설정 추가 |
세부 설정 기능 설명
// 남은 개수 표시 여부(최대 단어/문자/단락 개수가 설정된 경우)
showRemaining: false,
// 단락 수를 개수 표시할지 여부
showParagraphs: true,
// 단어 수를 개수 표시할지 여부
showWordCount: true,
// 문자 개수를 표시할지 여부
showCharCount: false,
// 바이트를 문자로 계산할지 여부(한국어, 중국어 등 멀티바이트 언어에 필요함)
countBytesAsChars: false,
// 공백을 문자로 계산할지 여부
countSpacesAsChars: false,
// Char Count에 Html 문자를 포함할지 여부
countHTML: false,
// 문자 개수에 줄 바꿈을 포함할지 여부
countLineBreaks: false,
// 제한에 도달하면 새로운 콘텐츠 입력을 방지할지 여부입니다
hardLimit: true,
// 제한에 도달한 경우에만 경고할지 여부입니다. 그렇지 않으면 한도를 초과하는 콘텐츠는 붙여넣거나 입력할 때 삭제됩니다.
warnOnLimitOnly: false,
// 허용되는 최대 단어 수, 무제한의 경우 기본값은 -1입니다
maxWordCount: -1,
// 허용되는 최대 문자 수, 무제한의 경우 기본값은 -1입니다
maxCharCount: -1,
// 허용되는 최대 단락 수, 무제한의 경우 기본값은 -1입니다
maxParagraphs: -1,
// '붙여넣기' 경고를 표시하는 기간, 알림을 자동으로 닫지 않는 경우 기본값은 0입니다.
pasteWarningDuration: 0,