KBoard 미디어 추가 삽입 오류 문의 2

크롬 브라우저에서 에러를 확인해보니

이미지 업로드 후 이미지 하단의 "삽입" 버튼을 누를 때마다 나타납니다.

script.js?ver=5.3.5:67 Uncaught TypeError: Cannot read property 'execCommand' of null
    at kboard_editor_insert_media (script.js?ver=5.3.5:67)
    at kboard_media_insert (?action=kboard_media&board_id=1&media_group=5aab77e6b6cae&content_uid=:145)
    at HTMLButtonElement.onclick (?action=kboard_media&board_id=1&media_group=5aab77e6b6cae&content_uid=:80)

 

이미지 업로드 후 상단 메뉴의 "+선택 삽입" 버튼을 누를 때마다 나타납니다.

Uncaught TypeError: Cannot read property 'execCommand' of null
    at kboard_editor_insert_media (script.js?ver=5.3.5:67)
    at HTMLInputElement.<anonymous> (?action=kboard_media&board_id=1&media_group=5aab77e6b6cae&content_uid=:133)
    at Function.each (jquery-1.11.3.min.js:2)
    at e.fn.init.each (jquery-1.11.3.min.js:2)
    at kboard_selected_media_insert (?action=kboard_media&board_id=1&media_group=5aab77e6b6cae&content_uid=:130)
    at HTMLAnchorElement.onclick (?action=kboard_media&board_id=1&media_group=5aab77e6b6cae&content_uid=:65)

 

플러그인은 케이보드만 빼고 모두 비활성화하고 했는데도 삽입이 안됩니다.

테마도 워드프레스 기본 테마로 해봤는데도 삽입이 안됩니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

    에러 메시지로 보면 TinyMCE 에디터 쪽 문제가 확실하긴 합니다.

    다만 에러가 나는 원인이 다양해서 저희도 직접 확인을 해봐야 도움 드릴 방법을 찾아볼 수 있겠습니다.

    비회원으로 테스트해볼 수 있는 페이지 주소 알려주시겠어요?

    저희 쪽에서는 문제를 찾지 못할 수 있어서 실제 문제 되는 페이지에서 확인해봐야 할 듯합니다.

    그리고 기본 테마에서도 같은 문제가 발생된다고요?

    테마 이름을 알려주시겠어요?

    고맙습니다.

  • 테마는 워드프레스 설치하면 있는 기본 테마들에서도 텍스트 모드에서 위의 오류를 보실 수 있습니다.

    1. 오류를 다시 테스트 해보니까 워드프레스 TinyMCE 에디터에서요, 비주얼/텍스트가 있잖아요, 
    텍스트 모드에서 하면 위와 같이 에러가 납니다.
    비주얼 모드에서는 삽입 잘 되구요.
    텍스트 모드에서는 삽입이 안되게 막아놓으신건가요? 선택, 업로드, 삭제, 창닫기는 잘 됩니다. 삽입만 안됩니다.

    2. 회원들이 워드프레스TinyMCE 에디터를 기본 사용시 비주얼 모드로 하려면 어떻게 해야되나요?

  • 안녕하세요.

    1. 텍스트 모드에서의 문제는 저희가 좀더 깊이 살펴봐야 할 듯합니다.

    원인을 찾아보겠습니다.

     

    2. 아래 코드를 테마의 functions.php 파일에 추가해보세요.

    강제로 비주얼 모드가 표시됩니다.

    add_filter('wp_default_editor', 'my_wp_default_editor', 10, 1);
    function my_wp_default_editor($richedit){
    	return 'tinymce';
    }

     

    wp_default_editor 필터에대한 자세한 설명은 아래 링크를 확인해주세요.

    https://developer.wordpress.org/reference/hooks/wp_default_editor/

    고맙습니다.

  • 텍스트 모드에서 KBoard 미디어 추가는

    FTP로 접속해서 /wp-content/plugins/kboard/template/js/script.js 파일에

    아래의 코드를 찾아서

    function kboard_editor_insert_media(url){
    	if(typeof tinyMCE != 'undefined'){
    		if(typeof tinyMCE.activeEditor != 'undefined'){
    			tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, "<img id=\"last_kboard_media_content\" src=\""+url+"\" alt=\"\">");
    			tinyMCE.activeEditor.focus();
    			tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.dom.select('#last_kboard_media_content')[0], true);
    			tinyMCE.activeEditor.selection.collapse(false);
    			tinyMCE.activeEditor.dom.setAttrib('last_kboard_media_content', 'id', '');
    		}
    	}
    	else if(jQuery('#kboard_content').length){
    		jQuery('#kboard_content').val(function(index, value){
    			return value + (!value?'':' ') + "<img src=\""+url+"\" alt=\"\">";
    		});
    	}
    }

    아래의 코드로 교체해보세요.

    function kboard_editor_insert_media(url){
    	if(typeof tinyMCE != 'undefined' && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden()){
    		tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, "<img id=\"last_kboard_media_content\" src=\""+url+"\" alt=\"\">");
    		tinyMCE.activeEditor.focus();
    		tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.dom.select('#last_kboard_media_content')[0], true);
    		tinyMCE.activeEditor.selection.collapse(false);
    		tinyMCE.activeEditor.dom.setAttrib('last_kboard_media_content', 'id', '');
    	}
    	else if(jQuery('#kboard_content').length){
    		jQuery('#kboard_content').val(function(index, value){
    			return value + (!value?'':' ') + "<img src=\""+url+"\" alt=\"\">";
    		});
    	}
    }

    추후 위의 코드를 업데이트에 반영하겠습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요