여분필드에 스마트 에디터 사용하기 > 게시판스킨 강좌

본문 바로가기
사이트 내 전체검색

아이디비번찾기

게시판스킨 강좌

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

여분필드에 스마트 에디터 사용하기

페이지 정보

작성자 관리자 작성일15-10-17 15:40 조회2,684회

본문

게시판에 글을 작성할 때 기본적으로 내용 필드에만 스마트 에디터가 적용되어 있는데

여분 필드를 활용해서 입력 항목을 추가할 때 스마트 에디터로 입력할 수 있게 하는 방법입니다

 

 

수정 파일 : write.skin.php (basic 스킨 기준)


* 빨간색 부분이 추가되었습니다. (여분 필드 1번 사용)

* 게시판 설정에서 dhtml 사용에 체크해야 합니다.

하단 스크립트 부분에 추가된 내용 중에 아랫줄은 입력 체크 부분으로 필수 입력 해제하려면 삭제.

​<?php echo chk_editor_js("wr_1"); ?>



<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if ($w == 'u') {

    $wr_1 = get_text($write['wr_1'], 0);

}

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>

<section id="bo_w">

    ...............................................

    ...............................................

    ..................중략.......................

    ...............................................


        <tr>
            <th scope="row"><label for="wr_content">내용<strong class="sound_only">필수</strong></label></th>
            <td class="wr_content">
                <?php if($write_min || $write_max) { ?>
                <!-- 최소/최대 글자 수 사용 시 -->
                <p id="char_count_desc">이 게시판은 최소 <strong><?php echo $write_min; ?></strong>글자 이상, 최대 <strong><?php echo $write_max; ?></strong>글자 이하까지 글을 쓰실 수 있습니다.</p>
                <?php } ?>
                <?php echo $editor_html; // 에디터 사용시는 에디터로, 아니면 textarea 로 노출 ?>
                <?php if($write_min || $write_max) { ?>
                <!-- 최소/최대 글자 수 사용 시 -->
                <div id="char_count_wrap"><span id="char_count"></span>글자</div>
                <?php } ?>
            </td>
        </tr>

        <tr>
            <th scope="row"><label for="wr_1">에디터2</label></th>
            <td class="wr_content">
                <?php echo editor_html("wr_1", $write['wr_1'], $is_dhtml_editor); ?>
            </td>
        </tr>

        <?php for ($i=1; $is_link && $i<=G5_LINK_COUNT; $i++) { ?>
        <tr>
            <th scope="row"><label for="wr_link<?php echo $i ?>">링크 #<?php echo $i ?></label></th>
            <td><input type="text" name="wr_link<?php echo $i ?>" value="<?php if($w=="u"){echo$write['wr_link'.$i];} ?>" id="wr_link<?php echo $i ?>" class="frm_input" size="50"></td>
        </tr>
        <?php } ?>

        <?php for ($i=0; $is_file && $i<$file_count; $i++) { ?>
        <tr>
            <th scope="row">파일 #<?php echo $i+1 ?></th>
            <td>
                <input type="file" name="bf_file[]" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="frm_file frm_input">
                <?php if ($is_file_content) { ?>
                <input type="text" name="bf_content[]" value="<?php echo ($w == 'u') ? $file[$i]['bf_content'] : ''; ?>" title="파일 설명을 입력해주세요." class="frm_file frm_input" size="50">
                <?php } ?>
                <?php if($w == 'u' && $file[$i]['file']) { ?>
                <input type="checkbox" id="bf_file_del<?php echo $i ?>" name="bf_file_del[<?php echo $i;  ?>]" value="1"> <label for="bf_file_del<?php echo $i ?>"><?php echo $file[$i]['source'].'('.$file[$i]['size'].')';  ?> 파일 삭제</label>
                <?php } ?>
            </td>
        </tr>
        <?php } ?>

        <?php if ($is_guest) { //자동등록방지  ?>
        <tr>
            <th scope="row">자동등록방지</th>
            <td>
                <?php echo $captcha_html ?>
            </td>
        </tr>
        <?php } ?>

        </tbody>
        </table>
    </div>

    <div class="btn_confirm">
        <input type="submit" value="작성완료" id="btn_submit" accesskey="s" class="btn_submit">
        <a href="./board.php?bo_table=<?php echo $bo_table ?>" class="btn_cancel">취소</a>
    </div>
    </form>

    <script>
    <?php if($write_min || $write_max) { ?>
    // 글자수 제한
    var char_min = parseInt(<?php echo $write_min; ?>); // 최소
    var char_max = parseInt(<?php echo $write_max; ?>); // 최대
    check_byte("wr_content", "char_count");

    $(function() {
        $("#wr_content").on("keyup", function() {
            check_byte("wr_content", "char_count");
        });
    });

    <?php } ?>
    function html_auto_br(obj)
    {
        if (obj.checked) {
            result = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
            if (result)
                obj.value = "html2";
            else
                obj.value = "html1";
        }
        else
            obj.value = "";
    }

    function fwrite_submit(f)
    {
        <?php echo get_editor_js("wr_1"); ?>
        <?php echo chk_editor_js("wr_1"); ?>
        <?php echo $editor_js; // 에디터 사용시 자바스크립트에서 내용을 폼필드로 넣어주며 내용이 입력되었는지 검사함   ?>

        var subject = "";
        var content = "";
 

        ................................

        ................................

        생략...........................



wr_1 필드 타입을 varchar(255) 에서 text 로 변경.

에디터는 다량의 태그가 들어가기 때문에 반드시 늘려줘야 합니다.


34e0b88677fcca8eb8813f8a96a37848_1509889403_7915.gif 

로그인 후 댓글을 남겨주세요.
게시판스킨 강좌 목록
번호 제목
공지 게시판 스킨 강좌 공지사항입니다.
1 게시판 기본 스킨 목록 페이지 살펴보기 1 - list.skin.php 댓글1
2 게시판 기본 스킨 목록 페이지 살펴보기 2 - 상세 설명
3 게시판 기본 스킨 글쓰기 페이지 살펴보기 1 - write.skin.php
4 게시판 기본 스킨 글쓰기 페이지 살펴보기 2 - 상세 설명
5 게시판 기본 스킨 내용보기 페이지 살펴보기 1 - view.skin.php
6 게시판 기본 스킨 내용보기 페이지 살펴보기 2 - 상세 설명
7 게시판 기본 스킨 코멘트 페이지 살펴보기 1 - view_comment.skin.php
8 게시판 기본 스킨 코멘트 페이지 살펴보기 2 - 상세 설명
9 여분필드를 활용한 게시판 스킨 제작 - 기본적인 사용 방법 댓글4
10 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-1 (글쓰기 페이지)
11 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-2 (목록 페이지) 댓글1
12 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-3 (글읽기 페이지)
열람중 여분필드에 스마트 에디터 사용하기
14 DatePicker 달력 플러그인을 활용한 날짜 입력 쉽게하기 댓글1
15 게시판 글쓰기 완료 후 목록 페이지나 메인 페이지로 이동시키기
16 게시판 목록 및 내용보기 페이지에 회원 정보 여분필드 출력 방법
17 이름이나 전화번호 중간 부분을 *** 표시로 숨기기 댓글2
18 게시판 글쓰기 페이지에 다음 주소 API 입력기 사용하기
19 게시판 스킨 목록 페이지에 이전 다음 페이지 링크 만들기
20 게시판 설정에 있는 여분 필드란 무엇인가?
21 여분필드를 활용한 게시판 스킨 제작 - 여분 필드 10개 이상 사용하기 댓글4
22 배열을 사용해서 여분필드 한 개로 연락처 입력란 3등분하기
23 글쓰기 페이지에서 게시물 수정 모드일 때 삭제 버튼 링크 추가하기 댓글1
24 휴대폰번호 중간에 자동으로 하이픈(-) 넣기
25 게시판 목록페이지 상단 분류를 이미지로 변경
26 글 수정 모드에서 첨부된 파일 다운로드 링크 추가
27 게시판이나 최신글 목록에서 비밀글 제목은 숨김 처리
28 input 필드값을 입력받을 때 무조건 숫자만 입력 댓글1
29 글 수정모드에서 첨부된 이미지 썸네일로 미리보기 댓글3
30 제목 또는 내용 없이 글 작성하기 - 설정해 놓은 문구 자동 입력
31 본문에 댓글을 남겼는지 체크해서 활용하기 댓글5
32 코멘트 비밀글 체크박스 삭제시 문제 해결
33 본문 페이지에서 특정 이미지를 선택해서 출력하는 방법
34 글 보기 페이지에 이전글 다음글 제목 날짜 출력 댓글1
35 링크 주소 입력 개수 늘리는 방법
36 기본 gallery 스킨에서 공지사항도 썸네일 이미지 출력
37 새 코멘트가 등록되었을 때 게시판 목록에 new 아이콘 출력 댓글6
38 리스트 정렬 필드를 여분필드값 기준으로 정렬하는 방법
39 신청서나 예약 게시판 등에서 글을 작성할 때 회원 정보에 있는 값 가져오기
40 10개 이상의 여분필드를 사용할 때 게시판 생성 단계에서부터 추가하기 댓글3
41 모바일 게시판에서 상단 하단 파일을 별도로 관리하는 방법
42 최근 댓글이 등록된 게시물 순서대로 리스트 재정렬
43 댓글 목록에서 본문글을 올린 회원이 작성한 댓글은 강조하기
44 게시판 스킨을 분류별로 각각 다르게 사용하는 방법
45 게시판 목록에 있는 분류탭 메뉴를 view 페이지에서도 그대로 출력
46 여분필드를 활용한 게시판 스킨 제작 - 댓글 쓰기 페이지에 적용하는 방법
47 게시판 글쓰기 버튼 항상 보이게 처리
48 목록에서 첨부파일 아이콘 출력할 때 이미지 파일은 구분해서 출력
49 목록페이지 상단에 내글 보기 버튼 생성
50 게시판 목록에서 첨부 파일 다운받기
51 댓글 바로가기 링크 주소 얻기 댓글1
52 유튜브 동영상 썸네일 이미지 자동 출력 댓글1
53 [그누보드5.3] 게시판에 회원 이미지 출력하는 방법
54 게시판 글 번호 역순으로 정렬 1번부터 시작
게시물 검색


그누스터디는 그누보드, 영카트 초보 사용자를 위한 정보를 공유합니다.

Copyright © GNUSTUDY. All rights reserved.
상단으로