자료실

Thumbnail

Tab 형태의 콘텐츠 박스 MH Tab

팔공산
2026.07.20
0
2
4
자료 유형 에디터 컴포넌트
간단한 소개 에디터에서 Tab(책갈피) 형태의 콘텐츠 박스를 만드는 에디터 컴포넌트입니다.
설치 경로 ./modules/editor/components/mh_tab
PHP 지원 범위 PHP 7.4 이상
자료 구분 공개 자료 GPL v2
판매 상태 Rhymix 2 이상
저장소 URL https://github.com/moonhouse-80san/mh_tab
데모 URL https://moonhouse.co.kr/xemy/604879
원본 URL https://moonhouse.co.kr/xemy/604879
의존 자료 ckeditor 에서만 정상 작동을 합니다.
AI 사용 여부 이 자료 전체를 AI가 생성했습니다. 사람이 검토한 부분은 매우 적습니다.

다운로드

쉬운 설치 지원
버전날짜용량다운로드 수
1.2 2026.07.20 16.1KB 4

에디터 컴포넌트 4탄입니다.😊

 

MH Tab 특징

• 탭 박스 — 본문내용에 책갈피 형태의 탭 박스가 생성됩니다.

• 팝업창에서 입력 — 팝업창에서 탭의 제목과 내용을 입력 할 수 있습니다.

• 에디터 창에서 입력 — 에디터 입력 창에서도 이미지나 기타 항목을 입력 추가할 수 있습니다.

image.png

• 탭 순서 변경 — 탭의 순서를 임의로 바꿀 수 있습니다.

• 여러 항목 선택 — 색상, 폰터 크기등을 지정 할 수 있습니다.

 

다운받은 파일 압축을 풀어서 mh_tab 폴더를 ./modules/editor/components/mh_tab 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

 

그럼 게시판 글쓰기 항목에 "탭 박스" 추가됩니다.

image.png

image.png

이 곳에서는 샘플을 보여주기가 어렵고

링크 이곳에서 보세요 

, , ,
목록
팔공산 Lv. 5

팔공산님의 다른 자료 더보기

Thumbnail
에디터 컴포넌트 | 공개
이미지 슬라이드 MH Slide
업로드한 이미지로 다양한 전환효과의 슬라이드쇼를 만드는 에디터 컴포넌트입니다.
Thumbnail
에디터 컴포넌트 | 공개
이미지 확대 MH Zoom
이미지에 마우스를 올리면 옆(또는 지정한 위치)에 확대된 모습을 보여주는 에디터 컴포넌트입니다.
Thumbnail
에디터 컴포넌트 | 공개
접기/펼치기 박스 MH Folding Box
Version 정보 폴딩 기능
Thumbnail
모듈 | 공개
게시판 기능 확장 모듈
기본 기능(게시판 순서, 일자, 조회수, 추천수 변경 등)에 파일 다운로드 수 변경을 추가

댓글 2

  • YJSoft
    17시간 전

    CKEditor 이외 에디터에서 동작하지 않습니다(테스트 에디터: STARIS 에디터)

    그냥 빈칸으로만 나오네요

     

    <div class="mh_tab_wrap" editor_component="mh_tab" mh_instance="mh_tab_group_hju4p7r1" mh_tabs="[{&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;ㅌㅌㅌ&quot;},{&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;ㄴㄴㄴㄴ&quot;}]" active_bg="#3a7abf" active_color="#ffffff" inactive_bg="#f5f5f5" inactive_color="#555555" content_color="#333333" content_bg="#ffffff" title_size="15px" content_size="14px" style="--mh_tab_active_bg: #3a7abf; --mh_tab_active_color: #ffffff; --mh_tab_inactive_bg: #f5f5f5; --mh_tab_inactive_color: #555555; --mh_tab_content_color: #333333; --mh_tab_content_bg: #ffffff; --mh_tab_title_size: 15px; --mh_tab_content_size: 14px;"><input type="radio" class="mh_tab_radio" name="mh_tab_group_hju4p7r1" id="mh_tab_group_hju4p7r1_0" checked="checked"><input type="radio" class="mh_tab_radio" name="mh_tab_group_hju4p7r1" id="mh_tab_group_hju4p7r1_1">
    <div class="mh_tab_nav"><label class="mh_tab_btn" for="mh_tab_group_hju4p7r1_0">탭1</label><label class="mh_tab_btn" for="mh_tab_group_hju4p7r1_1">탭2</label></div>
    <div class="mh_tab_panels">
    <div class="mh_tab_panel" data-tab-title="탭1">ㅌㅌㅌ</div>
    <div class="mh_tab_panel" data-tab-title="탭2">ㄴㄴㄴㄴ</div>
    </div>
    </div>
    <p> </p>

    추천 0
  • 팔공산
    14시간 전
    @YJSoft

    CKEditor에서만 테스트 했습니다.

    다른 에디터에서는 문제가 있는 것 같네요.

     

    [A,I의 답변]

    CKEditor5·TinyMCE·STARIS 같은 에디터별 미리보기 스타일 차이는 각 에디터의 HTML 필터 설정(GHS, valid_elements 등) 영역이라 사이트 관리자 쪽에서 편집기 설정을 조정하지 않는 한 컴포넌트 코드로는 더 손댈 부분이 없어요.

    추천 0