반응형

처음부터 게시판에 웹에디터를 추가한다면 앞의 강좌처럼 하면 되지만 많은 경우 기존에 사용하고 있는 게시판에다가 웹에디터를 추가하는 경우가 많다. 이런 경우 웹에디터를 추가하면 웹에디터에서 사용하는 css나 js때문에 기존 화면 UI가 깨지는 경우가 많이 발생한다. 

 

그래서 이번 시간에는 기존 게시판의 UI는 건드리지 않으면서 새로운 웹에디터를 추가할 수 있는 방법으로 iframe을 사용해보려고 한다. 우선 글쓰기 화면을 수정해 보자.

 

/write.php

 

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";

if(!$_SESSION['UID']){
    echo "<script>alert('회원 전용 게시판입니다.');history.back();</script>";
    exit;
}

$bid=$_GET["bid"];//get으로 넘겼으니 get으로 받는다.
$parent_id=$_GET["parent_id"];

if($bid){//bid가 있다는건 수정이라는 의미다.

    $result = $mysqli->query("select * from board where bid=".$bid) or die("query error => ".$mysqli->error);
    $rs = $result->fetch_object();

    if($rs->userid!=$_SESSION['UID']){
        echo "<script>alert('본인 글이 아니면 수정할 수 없습니다.');history.back();</script>";
        exit;
    }

    $fquery="select * from file_table where status=1 and bid=".$rs->bid." order by fid asc";
    $file_result = $mysqli->query($fquery) or die("query error => ".$mysqli->error);
    while($frs = $file_result->fetch_object()){
        $fileArray[]=$frs;
    }

}

if($parent_id){//parent_id가 있다는건 답글이라는 의미다.

    $result = $mysqli->query("select * from board where bid=".$parent_id) or die("query error => ".$mysqli->error);
    $rs = $result->fetch_object();
    $rs->subject = "[RE]".$rs->subject;
}

    //기존에 삽입한 이미지가 있다면 정보를 불러온다.
    if($bid){
        $results = $mysqli->query("select GROUP_CONCAT(fid) as fids from file_table_summer where bid=".$bid) or die("query error => ".$mysqli->error);
        $fs = $results->fetch_object();
    }
?>
        <form method="post" action="write_ok.php" onsubmit="return sendform();" enctype="multipart/form-data">
            <input type="hidden" name="bid" value="<?php echo $bid;?>">
            <input type="hidden" name="parent_id" value="<?php echo $parent_id;?>">
            <input type="hidden" name="file_table_id" id="file_table_id" value="">
            <input type="hidden" name="summer_fid" id="summer_fid" value="<?php echo $fs->fids;?>">
            <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">제목</label>
                <input type="text" name="subject" class="form-control" id="exampleFormControlInput1" placeholder="제목을 입력하세요." value="<?php echo $rs->subject;?>">
            </div>
            <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">내용</label>
            <!-- summernote 추가분 -->
            <div class="mb-3">
                <iframe id="summer" src="summernote.php?content=<?php echo urlencode(htmlspecialchars_decode($rs->content));?>" style="width:100%; height:520px; border:none" scrolling = "no"></iframe>
                <textarea id="content" name="content" style="display: none;"></textarea>
            </div>
            </div>
            <div class="mb-3">
                <input type="file" name="upfile[]" id="upfile" multiple class="form-control" aria-label="Large file input example">
            </div>
            <!-- 첨부된 이미지 표시 -->
            <div class="row row-cols-1 row-cols-md-6 g-4" id="imageArea">
                <?php
                    foreach($fileArray as $fa){
                ?>
                <div class="col" id="f_<?php echo $fa->fid;?>">
                    <div class="card h-100">
                        <img src="/data/<?php echo $fa->filename?>" class="card-img-top" >
                    <div class="card-body">
                        <button type="button" class="btn btn-warning" onclick="file_del(<?php echo $fa->fid;?>)">삭제</button>
                    </div>
                    </div>
                </div>
                <?php }?>
               
            </div>
            <!-- 첨부된 이미지 -->
            <br />
            <button type="submit" class="btn btn-primary">등록</button>
        </form>

<script>

    function sendform(){
        var contents=$('#summer').get(0).contentWindow.$('#summernote').summernote('code');//iframe에 있는 summernote함수를 작동시킨다.

        if ($('#summer').get(0).contentWindow.$('#summernote').summernote('isEmpty')) {
          alert('내용을 입력하세요.');
          return false;
        }

        $("#content").html(contents);

        return true;
    }

    $("#upfile").change(function(){

        var files = $('#upfile').prop('files');
        for(var i=0; i < files.length; i++) {
            attachFile(files[i]);
        }

        $('#upfile').val('');

    });  

    function attachFile(file) {
        var formData = new FormData();
        formData.append("savefile", file);
        $.ajax({
            url: 'save_image.php',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            dataType : 'json' ,
            type: 'POST',
            success: function (return_data) {
                if(return_data.result=="member"){
                    alert('로그인 하십시오.');
                    return;
                }else if(return_data.result=="size"){
                    alert('10메가 이하만 첨부할 수 있습니다.');
                    return;
                }else if(return_data.result=="image"){
                    alert('이미지 파일만 첨부할 수 있습니다.');
                    return;
                }else if(return_data.result=="error"){
                    alert('첨부하지 못했습니다. 관리자에게 문의하십시오.');
                    return;
                }else{
                    fid = $("#file_table_id").val() + return_data.fid + ",";
                    $("#file_table_id").val(fid);
                    var html = "<div class='col' id='f_"+return_data.fid+"'><div class='card h-100'><img src='/data/"+return_data.savename+"' class='card-img-top'><div class='card-body'><button type='button' class='btn btn-warning' onclick='file_del("+return_data.fid+")'>삭제</button></div></div></div>";
                    $("#imageArea").append(html);
                }
            }
        });

    }



    function file_del(fid){

        if(!confirm('삭제하시겠습니까?')){
        return false;
        }
           
        var data = {
            fid : fid
        };
            $.ajax({
                async : false ,
                type : 'post' ,
                url : 'file_delete.php' ,
                data  : data ,
                dataType : 'json' ,
                error : function() {} ,
                success : function(return_data) {
                    if(return_data.result=="member"){
                        alert('로그인 하십시오.');
                        return;
                    }else if(return_data.result=="my"){
                        alert('본인이 작성한 글만 삭제할 수 있습니다.');
                        return;
                    }else if(return_data.result=="no"){
                        alert('삭제하지 못했습니다. 관리자에게 문의하십시오.');
                        return;
                    }else{
                        $("#f_"+fid).hide();
                    }
                }
        });

    }

</script>

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";
?>

기존에 웹에디터를 사용하기 위해 추가했던 각종 css파일과 js파일 그리고 스크립트등을 모두 삭제했다. 그리고 iframe을 이용해 하나의 파일을 삽입한걸 볼 수 있다. 이제 저 파일을 만들어보자.

 

/summernote.php

 

<?php
$content = urldecode($_GET['content']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
 
</head>
<body>
 
  <div id="summernote"><?php echo $content;?></div>
  <script>
    //summernote 추가분
    $(document).ready(function() {
        var $summernote = $('#summernote').summernote({
            codeviewFilter: false,
            codeviewIframeFilter: true,
            lang: 'ko-KR',
            height: 450,
            callbacks: {
                onImageUpload: function (files) {
                    if(files.length>5){
                        alert('5개까지만 등록할 수 있습니다.');
                        return;
                    }
                    for(var i=0; i < files.length; i++) {
                        sendFile($summernote, files[i]);
                    }
                   
                }
            }
        });
    });

    function sendFile($summernote, file) {
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: 'summerimagesave.php',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            dataType : 'json' ,
            type: 'POST',
            success: function (data) {
                if(data.result=="fail"){
                    alert(data.msg);
                    return;
                }else{
                    filename="/data/"+data.filename;
                    $('#summernote').summernote('insertImage', filename, function ($image) {
                        $image.css('width', '90%');
                        $image.css('padding', '10px');
                    });
                    var fidval=data.fid+","+parent.$("#summer_fid").val()//부모창의 id값을 호출
                    parent.$("#summer_fid").val(fidval);
                }
            }
        });

    }
  </script>
</body>
</html>

 

기존에 write.php에서 사용하던 부분을 대부분 가져왔다. 이제 이 파일은 write.php에 영향을 미치지 않고 단독으로 쓰이게 된다. 여기까지 하고 화면을 확인해보자.

 

이렇게 보이면 성공이다. 위 소스를 그대로 갖다 붙여도 위 사진처럼 안보일수도 있다. 그럴때는 width나 height를 적당히 조절해보자. 

 

summnernote.php에서 중요한 부분은 이미지를 삽입한 후에 결과값을 부모창인 write.php로 넘겨주는 부분이다.

 

var fidval=data.fid+","+parent.$("#summer_fid").val()//부모창의 id값을 호출
parent.$("#summer_fid").val(fidval);

 

이부분이다. 

 

이렇게 하고 이미지 삽입하는 걸 테스트해보자. 지난 시간에 한것과 똑같은 결과가 나올 것이다. 이렇게 하면 화면도 안깨지고 간단하게 웹에디터를 추가할 수 있다.

 

반응형
저작자표시

'PHP강좌 > 게시판만들기강좌' 카테고리의 다른 글

php+mysql 게시판 만들기 강좌 #31. 회원 게시판 - 인덱스를 걸어보자.  (0) 2023.04.04
php+mysql 게시판 만들기 강좌 #30. 회원 게시판 - 섬머노트로 추가한 이미지를 썸네일로 보여주기  (2) 2023.04.04
php+mysql 게시판 만들기 강좌 #28. 회원 게시판 - 웹에디터에 이미지 첨부하기 심화과정 이미지 삭제 정보 처리  (3) 2022.12.14
php+mysql 게시판 만들기 강좌 #27. 회원 게시판 - 웹에디터에 이미지 첨부하기(내용 수정)  (0) 2022.12.14
php+mysql 게시판 만들기 강좌 #26. 회원 게시판 - 웹에디터 적용하기 feat. summernote  (1) 2022.12.14

+ Recent posts

티스토리툴바