그누보드 PC와 모바일 환경별 DHTML 에디터 분기 처리 방법

• 목록
• 스크랩

그누보드 PC와 모바일 환경별 DHTML 에디터 분기 처리 방법

그누보드 운영 시 접속 환경에 맞춰 PC와 모바일에 서로 다른 에디터를 적용하여 모바일 사용성을 높이는 방법을 알아봅니다.

그누보드 PC와 모바일 환경별 DHTML 에디터 분기 처리 방법

그누보드 기본 설정은 PC와 모바일에서 동일한 에디터를 사용하지만, 모바일 화면 크기에 맞춰 툴바를 간소화하거나 모바일 전용으로 최적화된 에디터 스킨을 사용해야 할 때 접속 환경별로 에디터를 분기 처리할 수 있습니다.

1. 모바일 에디터 사용 설정

config.php 파일에서 모바일 기기에서의 DHTML 에디터 사용 여부를 활성화합니다. define('G5_IS_MOBILE_DHTML_USE', true); 설정이 되어 있는지 확인합니다.

2. common.php 경로 분기 처리

common.php 파일 내에서 에디터 라이브러리 경로를 정의하는 부분을 찾아 아래와 같이 수정합니다. is_mobile() 함수를 사용하여 모바일 접속 시 특정 에디터 폴더를 지정할 수 있습니다.

if ($config['cf_editor']) {
    if (is_mobile()) 
        $config['cf_editor'] = '모바일용_에디터_폴더명';
    define('G5_EDITOR_LIB', G5_EDITOR_PATH . "/{$config['cf_editor']}/editor.lib.php");
} else {
    define('G5_EDITOR_LIB', G5_LIB_PATH . "/editor.lib.php");
}

3. 에디터 폴더 구성

plugin/editor/ 폴더 내에 모바일 전용으로 편집한 에디터 폴더(예: smarteditor2_mobile)를 생성하고, 해당 폴더 안에 툴바 아이콘 등이 최적화된 에디터 파일을 배치합니다.

주의사항 및 확인 방법

• 파일 수정 전 반드시 원본 파일을 백업하십시오.
• 모바일용 에디터 폴더명은 common.php에 기재한 이름과 정확히 일치해야 합니다.
• 적용 후에는 PC와 모바일 환경에서 각각 글쓰기 화면에 접속하여 에디터가 정상적으로 로드되는지 확인하십시오.

에디터 분기 처리 코드 수정 방법

config.php와 common.php 파일을 수정하여 접속 환경별 에디터 경로를 분기합니다. 수정 전 반드시 원본 파일을 백업하십시오.

1. 모바일 에디터 활성화

config.php 파일에 아래 설정을 추가하여 모바일 기기에서의 DHTML 에디터 사용을 활성화합니다.

define('G5_IS_MOBILE_DHTML_USE', true);

2. common.php 경로 분기

common.php 내 에디터 라이브러리 정의 부분을 찾아 아래와 같이 수정합니다.

if ($config['cf_editor']) {
    if (is_mobile())
        $config['cf_editor'] = '모바일용_에디터_폴더명';
    
    define('G5_EDITOR_LIB', G5_EDITOR_PATH . "/{$config['cf_editor']}/editor.lib.php");
} else {
    define('G5_EDITOR_LIB', G5_LIB_PATH . "/editor.lib.php");
}

3. 모바일 전용 폴더 구성

plugin/editor/ 경로에 common.php에 기재한 이름과 동일한 폴더(예: smarteditor2_mobile)를 생성하고 최적화된 에디터 파일을 배치합니다.

함께 보면 좋은 글

• 그누보드 PC와 모바일 기기별 서로 다른 테마 적용하기
• 그누보드에서 소셜 로그인 상태를 확인하고 분기 처리하는 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 PC와 모바일 환경별 DHTML 에디터 분기 처리 방법