상세 컨텐츠

본문 제목

ckeditor 글자수 체크하기

Programming/html

by luckey 2020. 12. 3. 20:34

본문

ckeditor 에서 작성된 글자 최대 개수또는 이미지 최대 업로드 개수를 제한.
복사+붙여넣기 는 제어가 되지 않으나, 수정시 경고창이 계속 뜨기 때문에 귀찮게 할 수 있음.
글자수는 태그 및 공백제거하고 한글, 영문 구분없이 무조건 1글자로 계산함.

//editor 의 id 값을 넣어줍니다.
var editorStatus = false;
var editor = CKEDITOR.instances.content;

//editor 텍스트가 변경되면 setContentsLength() 를 호출 경고창을 계속 띄운다.
editor.on('change', function (event) {
	setContentsLength(this, 5, 300);
});

function setContentsLength(obj, imgMax, textMax) {
    var str = obj.getData();
    var status = false;
    var results = str.match(/<img/g);
    var imgCnt = 0;
    var textCnt = 0;
    var editorText = f_SkipTags_html(str);
    editorText = editorText.replace(/\s/gi,"");
    editorText = editorText.replace(/&nbsp;/gi, "");
    
    if(results != null) {
        imgCnt = results.length;
        $('.img-length').text(imgCnt+"장");
        if(imgCnt > imgMax) {
            status = true;
        }
    }
    
    if(textCnt > textMax) {
    	status = true;
    }
    
    if(status) {
        var msg = "등록오류\n글자수는 최대 "+textMax+"까지 등록이 가능합니다.\n현재 글자수 : "+textCnt+"자";
        if(obj.name == "ideaDetail3") {
            msg = "등록오류\n글자수는 최대 "+textMax+"자, 이미지는 "+imgMax+"장까지만 사용이 가능합니다.\n총 글자수 : "+textCnt+"자, 총 이미지수 : "+imgCnt+"장";
        }
		alert(msg);
    }
    
    //추후 form submit할때 체크할 데이터(true 일 경우 데이터 넘기지 않음-오류)
    editorStatus = status;
}

//태그제거용
function f_SkipTags_html(input, allowed) {
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
    commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}

관련글 더보기

댓글 영역