여분필드에 스마트 에디터 사용하기 - 게시판스킨강좌, 그누보드5강좌

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

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

수정 파일 : 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(html_purifier($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 = "";
 

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

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

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

- 내용 추가됨

그누보드 5.3 기본 스킨에서는 위 내용 중 에디터 출력 부분을 이렇게 변경하세요.

나머지 수정 부분들은 모두 동일합니다.

<div class="write_div">
    <label for="wr_1" class="sound_only">에디터2</label>
    <div class="wr_content smarteditor2">
        <?php echo editor_html("wr_1", $write['wr_1'], $is_dhtml_editor); ?>
    </div>
</div>

view.skin.php 파일에서 출력은

<?php echo get_view_thumbnail($view['wr_1']); ?>

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

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