[wordpress] Kboard 게시판 썸머노트(Summernote)이용시 이미지 업로드 오류 회피법

워드프레스 게시판 플러그인으로 kboard를 사용하는 경우가 많습니다.

그런데 게시판의 본문 에디터로 썸머노트를 이용할 때 에러를 일으키는 경우가 종종 있습니다.

특히, 본문에 이미지를 삽입할 때 [kboard 미디어 추가] 기능을 이용하지 않고 본문에 직접 복사-붙여넣기를 하거나 썸머노트 이미지 삽입 기능을 이용할 경우 이미지를 TXT형태인 base64로 저장하게되는데 이때 문제가 주로 발생됩니다.

 

에러 상황은 아래와 같습니다.

 

Error Case #1

아래와 같은 에러 메세지 발생

Warning: count(): Parameter must be an array or an object that implements Countable in /www_root/wp-includes/formatting.php on line 3361

 

Error Case #2

게시글에 접속할 경우 게시판 오류가 발생하여 빈 화면으로 출력됨

이 때 최신글 보기로 본문 내용을 가져오거나 할 경우 500번 에러가 발생하기도 함

 

---

솔루션

이러한 문제를 회피 하기 위해서는 썸머노트의 '이미지 추가' 메뉴를 삭제하고 '복사-붙여넣기' 기능을 막는 것 입니다.

 

 워드프레스 theme 디렉토리의 function.php 파일에 아래 코드를 추가해주세요

add_action('wp_head', 'summernote_menu_select');
function summernote_menu_select(){
  // 썸머노트 유틸리티 메뉴 중 이미지 첨부 기능을 제거하기 위함
	?>
	<script>
	jQuery(document).ready(function(){
		var kboard_mod = jQuery('input[name=mod]', '.kboard-form').val();
		if(kboard_mod == 'editor'){
			
			if(kboard_current.use_tree_category == 'yes'){
				kboard_tree_category_parents();
			}
			
			if(kboard_current.use_editor == 'snote'){ // summernote
				jQuery('.summernote').each(function(){
					var height = parseInt(jQuery(this).height());
					var placeholder = jQuery(this).attr('placeholder');
					var lang = 'en-US';
					
					if(kboard_settings.locale == 'ko_KR'){
						lang = 'ko-KR';
					}
					else if(kboard_settings.locale == 'ja'){
						lang = 'ja-JP';
					}
					
					jQuery(this).summernote({
						toolbar: [
							['style', ['style']],
							['fontsize', ['fontsize']],
							['font', ['bold', 'underline', 'clear']],
							['fontname', ['fontname']],
							['color', ['forecolor', 'color']],
							['table', ['table']],
							['para', ['ul', 'ol', 'paragraph']],
							['height', ['height']],
							['insert', ['link', 'video']],
							['view', ['fullscreen', 'codeview', 'help']],
						],
						fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana', 'Nanum Gothic', 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo'],
						fontNamesIgnoreCheck: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana', 'Nanum Gothic', 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo'],
						fontSizes: ['8','9','10','11','12','13','14','15','16','17','18','19','20','24','30','36','48','64','82','150'],
						lang: lang,
						height: height,
						placeholder: placeholder,
						
						// 본문 내 이미지 붙여넣기 기능 제거
						callbacks: {
                            onImageUpload: function (data) {
                                data.pop();
                            }
                        }
					});
				});
			}
		}
	});
	</script>
	<?php
}

 

toolbar를 수정하여 이미지 첨부 메뉴를 삭제하고,

onImageUpload callback을 이용해 이미지 붙여넣기 기능의 동작을 막았습니다.