이윰 > 이윰빌더 시즌4 > 공유자료실

[시즌4] SmartEditor2 - 이윰빌더 전용 웹에디터

이윰MOUNT — 2024-07-25T14:44:17+09:00

**이윰빌더 전용** **스마트에디터2** (smarteditor2\_eyoom) 를 작업하여 배포합니다. (이윰빌더에서만 사용 가능합니다.) 현재 여기 이윰넷 사이트의 한줄게시판, 회원갤러리 게시판에 적용되어 있으니 로그인하여 확인해 보시기 바랍니다. 한줄게시판 : [https://eyoom.net/linear](https://eyoom.net/linear) 회원갤러리 : [https://eyoom.net/gallery](https://eyoom.net/gallery)
1. 글쓰기시 이윰빌더의 동영상, 지도, 이모티콘등의 기능들이 정상적으로 작동되도록 작업되었습니다. 2. 기존 기능과 동일하게 여러 이미지를 한번에 올릴 수 있으며, 마우스를 드래그하여 이미지 순서 변경이 가능합니다. 3. 이미지가 아닌 css로 전체적으로 작업 진행하였으며, 심플한 아이콘으로 깔끔하게 디자인 하였습니다. 4. 다크모드를 지원하는 테마(유료테마)에서는 다크모드를 지원합니다. 5. 관리자 페이지에서는 기본적으로 다크모드를 지원합니다. (이윰빌더 4.7.0 이상) 6. 모바일에서도 사용가능 합니다.
모바일에서 사용하실려면 /config.php 파일에서 모바일 에디터 사용 설정을 true 로 변경합니다. `define('G5_IS_MOBILE_DHTML_USE', true);`
**[기본]** ![!\[image\]](https://eyoom.net/data/editor/2407/3556495142_1721885132.85299.jpg) **[다크모드]** ![!\[image\]](https://eyoom.net/data/editor/2407/3556495142_1721885150.44973.jpg)
**설치방법 및 적용방법** 1. 해당 파일을 다운로드 받으시고 압축을 풀어주시기 바랍니다. (plugin 폴더가 생성됩니다.) 2. 이윰빌더가 설치된 곳에 해당 폴더를 업로드 합니다. /plugin/editor 폴더 내 **smarteditor2\_eyoom** 을 업로드하면 됩니다. (/plugin/editor/smarteditor2\_eyoom) 3. 관리자페이지와 사이트 전체에서 사용을 원하시면 관리자페이지 - 환경설정 - 기본환경설정의 기본환경에서 '에디터 선택'을 **smarteditor2\_eyoom** 로 선택하시면 됩니다. 4. 특정 게시판에서만 적용을 원하시면 관리자페이지 - 게시판관리에서 적용을 원하시는 게시판 수정에서 '게시판 에디터 선택'을 **smarteditor2\_eyoom** 로 선택하시면 됩니다.

[시즌4 게시판] (BS5용) 포인트 경매 게시판 스킨

이윰MOUNT — 2023-04-14T11:11:50+09:00

![!\[image\]](https://eyoom.net/data/editor/2304/1846406784_1681438500.89413.jpg) **포인트 경매 게시판 스킨**입니다. (BS5 테마 전용 스킨) 아래 링크의 SIR 사이트 포인트 경매와 유사하오니 사용법은 따로 설명드리지 않겠습니다. (사용법 설명에 대해 질문하셔도 따로 답변드리지 않습니다.) [https://sir.kr/pauction](https://sir.kr/pauction) ![!\[image\]](https://eyoom.net/data/editor/2304/1846406784_1681438513.46483.jpg) **미리보기 페이지** : [http://theme45.eyoom.net/bbs/board.php?bo_table=point_auction](http://theme45.eyoom.net/bbs/board.php?bo_table=point_auction) **설치방법** 1. 다운로드 후 압축을 풀면 point\_auction.extend.php 파일과 point\_auction 폴더가 있습니다. 2. point\_auction.extend.php 파일은 /eyoom/extend 폴더 내 업로드합니다. 3. point\_auction 폴더는 /theme/적용테마/skin/board 폴더 내 업로드합니다. 4. 관리자페이지 > 게시판관리 > 게시판관리에서 게시판을 만들어 적용합니다. (디자인/양식 탭의 '이윰 게시판 스킨'을 point\_auction 으로 선택합니다.) ![!\[image\]](https://eyoom.net/data/editor/2304/1846406784_1681438527.24181.jpg)

Vditor를 통합해서..

마젠토 — 2023-03-25T21:48:44+09:00

한번에 설치하기 편하게 만들어 봤습니다. 이윰빌더 4.6.0 with 그누보드 5.5.8.2.8 입니다. 통합패키지는 "잘못된 요청입니다."가 저만 나오는 것 같아서, 따로 설치 버전으로 만들었습니다. ``` git clone -b main --single-branch https://github.com/jakekwak/eyoom_builder_4 . mkdir data ``` 설치후에 게시판 셋업만 하면 바로 테스트해볼 수 있습니다. 이전버전과 다른것은 그누보드 코어를 일부 변경해서 마크다운의 특수한 경우 깨어지지 않게 만들었습니다.

관리자 페이지 세미 컬러 모드 적용 방법 (이윰빌더 4.6.0 버전 이상)

이윰MOUNT — 2023-03-24T18:19:32+09:00

안녕하세요. 이윰빌더 4.6.0 버전 이상에서는 관리자 페이지에 화이트모드 / 다크모드를 지원합니다. 아래 이미지와 같이 헤더와 사이드 메뉴에 컬러가 있는 세미컬러 모드로 변경을 원하시면 ![!\[image\]](https://eyoom.net/data/editor/2303/1846406784_1679649330.17613.jpg) /adm/eyoom_adm/theme/eba_basic/css/light_mode.css 파일을 열어 제일 밑 251라인에 아래 소스를 넣어주면 됩니다. ``` /*----- Semi Color Mode -----*/ .header-logo {background-color:#ab0000;border-bottom-color:#12121b} .header-logo > a {color:#fff} .header-logo > a span {color:#fff} @media(max-width:991px) { .header-logo {background-color:#12121b} } .header-bar {background-color:#12121b;border-bottom-color:transparent} .header-left > a {color:#fff} .header-left > a:focus, .header-left > a:hover {color:#fff} .header-left .left-dropdown-btn {color:#fff} .header-left .left-dropdown-btn:hover {color:#fff} .header-nav .navbar-nav .nav-item-txt > a {color:#9596aa} .header-nav .nav-expand > a {color:#9596aa} .sidebar-left {background-color:#12121b;border-right-color:transparent} .sidebar-left-top {background-color:#12121b} .sidebar-top-box h5 {color:#fff} .sidebar-title {color:#4b4d6e} .sidebar-title i {color:#383d4b} .nav-item-icon {color:#545a6e} .nav-item-text {color:#9596aa} .nav-item.active:before {background-color:#7772fd} .nav-item.active .nav-item-icon {color:#fff} .nav-item.active .nav-item-text {color:#7772fd} .nav-item.active .is-sub-nav:after {color:#7772fd} .nav-link {color:#6c757d} .nav-link.is-sub-nav:after {color:#4b4d6e} .nav-link:hover {color:#7772fd} .nav-link:hover .nav-item-text {color:#7772fd} .nav-link.active {color:#7772fd} .nav-link.active:after {color:#7772fd} .nav-link.visible-sub-nav {color:#9596aa} .sub-nav {border-left-color:rgb(55, 54, 71, 0.7)} .sub-nav .sub-nav-link {color:#9596aa} .sub-nav .sub-nav-link.active, .sub-nav .sub-nav-link:focus, .sub-nav .sub-nav-link:hover {color:#7772fd} .sub-nav .sub-nav-link.active:before, .sub-nav .sub-nav-link:focus::before, .sub-nav .sub-nav-link:hover::before {background-color:#fff} .sub-nav .sub-nav-item.active .sub-nav-link {color:#9596aa} .sidebar-left-info .sidebar-left-info-box {border-top-color:rgb(55, 54, 71, 0.7);border-bottom-color:rgb(55, 54, 71, 0.7)} .sidebar-left-info .install-info-title {color:#9596aa} .sidebar-left-info .install-info-cont span {color:#4b4d6e} .sidebar-left-info .install-info-cont strong {color:#7772fd} .sidebar-left-info .install-info-cont small {color:#4b4d6e} .sidebar-left-info .install-info-cont small a {color:#4b4d6e} .sidebar-left-info .site-info-cont {color:#4b4d6e} .close-nav .sidebar-left-info {background-color:#202030} .open-nav .sidebar-left-info {background-color:transparent} .cover-left .sidebar-left-info {background-color:transparent} .cover-left .sidebar-top-box {background-color:#ab0000;border-bottom-color:#12121b} @media(min-width:992px) { .close-nav .nav-item.active .nav-item-icon {color:#fff} .close-nav .nav-item.active .nav-link.is-sub-nav:after {color:#7772fd} } ```

firePHP - PHP 디버깅하기

마젠토 — 2023-03-16T20:39:43+09:00

PHP를 디버깅하기 위해서 `Xdebug`가 필요하지만, 간단하게 디버깅하기 위한 툴입니다. 원 코드는 냑의 thisgun 님이 올려 주셨습니다. https://sir.kr/g5_plugin/7938 그런데, 이번에 php 8.x에서 테스트 해보니 안되서, 되게 만든 버전입니다. 어드민 로그인을 하면 SQL 쿼리 문도 볼 수 있고, 중간 중간에 변수값을 찍어 볼 수 있습니다. ``` ``` > 어드민에서만 fb에 대한 클래스를 읽어 옵니다. 무조건 디버깅용으로 사용할려면 extend 코드에서 코멘트 처리하세요.

마크다운 에디터 Vditor

마젠토 — 2023-03-15T19:12:51+09:00

계속 이상했던 것은 제 컴퓨터안에 있는 폰트가 뭔가 충돌이 났던 것이네요.. 다른 컴퓨터에서 확인하니 이상이 없는 것 같아서.. 릴리스 합니다. 아래 깃헙링크를 참조하세요. (첨부파일은 사이즈가 커서 안올라갑니다) 에디터는 게시판 글만 되니, 게시판내의 에디터 설정을 `vditor3`로 하면 됩니다. https://github.com/jakekwak/eyoom-vditor

[시즌4 게시판] (BS3용) TOAST UI Editor용 베이직 게시판 스킨

이윰MOUNT — 2022-04-27T10:46:00+09:00

**TOAST UI Editor** ([https://eyoom.net/share/137](https://eyoom.net/share/137))를 사용할수 있는 **BS3 테마** 용 **베이직 게시판** 스킨입니다. **설치 방법** 1. 다운로드 후 압축을 풀면 **basic_tuieditor** 폴더가 있습니다. 2. basic_tuieditor 폴더를 /theme/적용할 BS3용 테마/skin/board 폴더 내 업로드합니다. 3. 관리자페이지 > 테마설정관리 > 게시판추가설정의 해당 게시판 수정에서 '이윰게시판 스킨'을 basic_tuieditor 스킨으로 설정하고 저장합니다.

[시즌4 게시판] (BS5용) TOAST UI Editor용 웹진 게시판 스킨

이윰MOUNT — 2022-04-26T22:39:00+09:00

**TOAST UI Editor** ([https://eyoom.net/share/137](https://eyoom.net/share/137))를 적용한 게시판의 경우 해당 에디터로 이미지를 업로드를 한 경우 게시판 목록에서는 썸네일 이미지가 출력이 되지 않습니다. 하지만 글쓰기 시 이미지를 **파일 업로드** 할 경우 게시판 목록에서 이미지가 출력이 됩니다. 그래서 배포되는 기본 게시판인 웹진 게시판을 조금 수정하여 글쓰기 시 **파일 업로드 첫번째 필드**를 대표 이미지로 파일 업로드 하도록 수정하여 배포하오니 필요하신 분은 다운로드 하여 사용하시기 바랍니다. 글쓰기 시 아래 첨부 이미지와 같습니다. ![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650980302.69982.jpg) **설치 방법** 1. 다운로드 후 압축을 풀면 **webzine\_tuieditor** 폴더가 있습니다. 2. webzine\_tuieditor 폴더를 /theme/적용할 테마/skin/board 폴더 내 업로드합니다. 3. 관리자페이지 > 테마설정관리 > 게시판추가설정의 해당 게시판 수정에서 '이윰게시판 스킨'을 webzine\_tuieditor 스킨으로 설정하고 '목록에서 이미지 사용'을 사용에 체크하여 저장합니다.

[시즌4 게시판] (BS5용) TOAST UI Editor용 갤러리 게시판 스킨

이윰MOUNT — 2022-04-26T22:36:01+09:00

**TOAST UI Editor** ([https://eyoom.net/share/137](https://eyoom.net/share/137))를 적용한 게시판의 경우 해당 에디터로 이미지를 업로드를 한 경우 게시판 목록에서는 썸네일 이미지가 출력이 되지 않습니다. 하지만 글쓰기 시 이미지를 **파일 업로드** 할 경우 게시판 목록에서 이미지가 출력이 됩니다. 그래서 배포되는 기본 게시판인 갤러리 게시판을 조금 수정하여 글쓰기 시 **파일 업로드 첫번째 필드**를 대표 이미지로 파일 업로드 하도록 수정하여 배포하오니 필요하신 분은 다운로드 하여 사용하시기 바랍니다. 글쓰기 시 아래 첨부 이미지와 같습니다. ![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650979410.7099.jpg) **설치 방법** 1. 다운로드 후 압축을 풀면 **gallery\_tuieditor** 폴더가 있습니다. 2. gallery\_tuieditor 폴더를 /theme/적용할 테마/skin/board 폴더 내 업로드합니다. 3. 관리자페이지 > 테마설정관리 > 게시판추가설정의 해당 게시판 수정에서 '이윰게시판 스킨'을 gallery\_tuieditor 스킨으로 설정하고 '목록에서 이미지 사용'을 사용에 체크하여 저장합니다.

[시즌4] TOAST UI Editor - 웹에디터

이윰MOUNT — 2022-04-26T18:01:02+09:00

**TOAST UI Editor 3.1.3 버전**을 이윰빌더 게시판에서 사용 가능하도록 작업하여 배포합니다. (**이윰빌더 4.5.1 이상 사용 가능**) 글쓰기시 이윰빌더의 동영상, 지도, 이모티콘등의 기능들이 정상적으로 작동되도록 작업되었습니다. 현재 여기 이윰넷 사이트의 자유게시판, 질문과답변 등의 게시판에 적용되어 있습니다. [**참고**] : 본 웹에디터는 현재 **베이직** 게시판에서 사용이 가능하며, 갤러리 게시판과 웹진 게시판에서 사용하실려면 현재 공유자료실에 배포하고 있는 TOAST UI Editor용 갤러리/웹진 게시판 스킨을 다운받아 사용하시기 바랍니다. 그외 게시판에서는 사용을 하실 경우 이미지 출력에 문제가 있으니 참고하시기 바랍니다. ![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650963633.99328.jpg) 다크모드를 지원하는 테마(유료테마)에서는 다크모드를 지원합니다. ![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650963649.01142.jpg) **설치방법 및 적용방법** 1. 해당 파일을 다운로드 받으시고 압축을 풀어주시기 바랍니다. (plugin 폴더가 생성됩니다.) 2. 이윰빌더가 설치된 곳에 해당 폴더를 업로드 합니다. /plugin/editor 폴더 내 tuieditor를 업로드하면 됩니다. (/plugin/editor/tuieditor) 3. 관리자페이지 - 게시판관리에서 적용을 원하시는 게시판 수정에서 '게시판 에디터 선택'을 tuieditor 로 선택하시면 됩니다. **장점** 가볍고 마크다운 형식을 지원하여 글쓰기에 편리한 기능을 제공합니다. **단점** 마크다운 문법을 처리하기 위하여, 기존 에디터와는 다른 방식으로 입출력을 해석하게 됩니다. 그래서 기존 작성된 게시물이 있는 게시판의 경우 기존 게시물 수정시 여러가지 문제가 발생할수 있습니다. 새로 게시판을 생성하여 사용하실 경우에는 아무 문제가 없습니다. *** 사이트 전체에서 사용하기에는 여러가지 문제가 있습니다. 게시판에서만 개별 설정하여 사용하시기 바랍니다. * 관리자페이지 - 환경설정 - 기본환경설정에서 '에디터 선택'은 tuieditor 가 아닌 다른 에디터를 설정해 놓으시고 * 관리자페이지 - 게시판관리에서 적용을 원하시는 게시판 수정에서 '게시판 에디터 선택'을 tuieditor 로 선택하시면 됩니다. *** 갤러리 또는 웹진 게시판과 같이 목록에서 이미지가 출력되는 경우, 해당 에디터로 업로드한 이미지는 목록에서 출력되지 않습니다. 하지만 파일 업로드한 이미지는 목록에서 출력이 되기 때문에 대표이미지를 파일 업로드로 수정한 tuieditor 용 갤러리, 웹진 게시판을 작업하여 여기 공유자료실에서 무료로 배포하고 있습니다. *** (SIR의 볼피드님께서 배포하신 TOAST UI EDTIOR 2.1.2 (https://sir.kr/g5_plugin/7177) 를 일부 참고하였습니다. 공유해주신 볼피드님께 감사드립니다.)

[시즌4 게시판] (BS5용) 지점안내, 매장안내, 지도 스킨

이윰MOUNT — 2022-04-20T22:00:58+09:00

![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650459747.70562.jpg) **지역별 지점, 매장, 대리점 안내용 지도 게시판 스킨입니다. (BS5 테마 전용 스킨)** 이윰빌더의 지도 기능과 함께 사용하여 뷰페이지에서 각 지역별 지점의 자세한 지도 안내가 가능합니다. ![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650459759.00698.jpg) **미리보기 페이지** : [http://theme45.eyoom.net/bbs/board.php?bo_table=branch](http://theme45.eyoom.net/bbs/board.php?bo_table=branch) **설치방법** 1. 다운로드 후 압축을 풀면 ebb45\_branch\_1.\* 폴더 내 **branch** 폴더가 있습니다. 2. branch 폴더를 /theme/적용할 테마/skin/board 폴더 내 업로드합니다. 3. branch 폴더 내 /js/raphael\_path\_s.korea.js 파일을 열어보면 22번째 라인쯤 var bo\_table = "branch"; 로 설정되어 있습니다. 4. 관리자페이지 > 게시판관리 > 게시판관리에서 게시판을 만들때 게시판 TABLE을 **branch** 로 만듭니다. (다른 테이블명으로 만들때에는 위 3번 항목의 raphael\_path\_s.korea.js 파일에서 테이블명을 변경해 줍니다.) 5. 게시판 분류는 사용으로 체크 후 아래의 분류항목을 넣어줍니다. 6. **서울\|부산\|대구\|인천\|대전\|울산\|광주\|세종\|경기도\|경상남도\|경상북도\|전라남도\|전라북도\|충청남도\|충청북도\|강원도\|제주도** 7. 관리자페이지 > 테마설정관리 > 게시판추가설정의 해당 게시판 수정에서 '이윰게시판 스킨'을 **branch** 스킨으로 설정하고 애드온 기능의 '**지도 추가 기능**' 사용에 체크 후 저장합니다. 8. 관리자페이지 > 환경설정 > 기본환경설정의 지도 API ID 설정 중 '**구글지도 API KEY**'를 입력 저장합니다. * 스킨 내 스크립트는 MIT 라이센스입니다. * 여분필드 6, 7, 8 사용되었으니 참고하여 주세요. ![!\[image\]](https://eyoom.net/data/editor/2204/1846406784_1650459770.36349.jpg)

[시즌4 EB최신글] (BS3용) 믹스 3 최신글 스킨

이윰MOUNT — 2018-09-18T15:40:31+09:00

믹스 3 최신글 스킨입니다. (BS3 테마 전용 스킨)

이미지가 있는 뉴스나 정보를 메인에 출력하기 적합한 최신글 스킨입니다.

- 미리보기 페이지 : http://theme4.eyoom.net/page/?pid=ebl_mix_3&theme=eb4_basic

[설치방법]

다운로드 후 압축을 풀면 ebl4_mix_3 폴더 내 eblatest/ebl_mix_3 폴더가 있습니다.
ebl_mix_3 폴더를 /theme/적용할 테마/skin/eblatest 폴더 내 업로드합니다.
관리자 - 테마설정관리 - EB최신글관리에서 'EB최신글 마스터추가' 버튼을 클릭하여 마스터를 생성합니다.
생성한 EB최신글 마스터의 치환코드를 복사하여 사용중인 테마의 index 파일 (/theme/적용할 테마/index.html.php) 원하시는 위치 (또는, 다른 파일의 원하시는 위치) 에 넣어줍니다.
그리고 해당 마스터의 아이템 관리 - 'EB최신글 아이템 추가'를 클릭하여 아이템 생성 후 설정을 해 줍니다.
최신글 아이템관리 설정 시 아래를 참고하여 주세요.

[EB최신글 아이템관리]

최신글 제목 : 게시판명 입력
대표 연결주소 : 게시판 주소 입력
추출게시판 : 추출할 게시판 선택
최신글 게시물 수 : 6개 또는 8개
분할 출력 칸수 : 1
최신글 대상 : 원글만
이미지 출력 여부 : 사용
이미지 사이즈 : 폭 500, 높이 0
게시물 내용 출력 여부 : 사용
작성자 정보 출력여부 : 사용
회원 프로필 사진 출력여부 : 사용
작성일 출력여부 : 사용
작성일 출력형식 : 24시간 단위
작성일 표기 방식 : Y-m-d

* 나머지 설정 항목은 기본 설정대로 또는 적절하게 조절합니다.

[치환코드를 index 파일에 넣을때 참고]

치환코드를 div 태그로 감싸서 아래와 같이 스타일 설정으로 조절하여 맞춰주시면 됩니다.

```html

```