<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
	<channel>
				<title><![CDATA[썸머노트 이미지 업로드 방식 변경에 관하여]]></title>
		<link>https://www.cosmosfarm.com/threads/rss/document/42063</link>
		<description><![CDATA[<p>늘 고생하시는 제작자님 감사합니다.</p>

<p> </p>

<p>썸머노트 자체 이미지 업로드 기능을 사용했을 경우 base64로 이미지가 업로드 되어 서버에 크게 무리가 가더라구요.</p>

<p>제작자님께서 자체적으로 제작해주신 이미지 업로드 기능도 있지만 썸머노트를 사용할 경우 드래그앤 드랍 기능 때문에 편리해서 일단은 이 부분에 대해 수정을 해보려고 하는데요.</p>

<p> </p>

<p>구글링을 해보니 썸머노트 자체기능인 콜백함수를 이용하던데...</p>

<p> </p>

<p>그래서 올려주신 코드 </p>

<pre>
<code>add_action('wp_head', 'wp_head_2020_03_20');
function wp_head_2020_03_20(){
	?&gt;
	&lt;script&gt;
	jQuery(document).ready(function(){
		var kboard_mod = jQuery('input[name=mod]', '.kboard-form').val();
		if(kboard_mod == 'editor'){
			if(kboard_current.use_tree_category == 'yes'){
				kboard_tree_category_parents();
			}

			if(kboard_current.use_editor == 'snote'){ // summernote
				jQuery('.summernote').each(function(){
					var height = parseInt(jQuery(this).height());
					var placeholder = jQuery(this).attr('placeholder');
					var lang = 'en-US';

					if(kboard_settings.locale == 'ko_KR'){
						lang = 'ko-KR';
					}
					else if(kboard_settings.locale == 'ja'){
						lang = 'ja-JP';
					}

					jQuery(this).summernote({
						toolbar: [
					          ['font', ['bold', 'underline', 'clear']],
					          ['color', ['color']],
					          ['para', ['ul', 'ol']],
					          ['table', ['table']],
					          ['insert', ['link', 'video']],
					          ['view', ['fullscreen', 'codeview']]
					    ],
						lang: lang,
						height: height,
						placeholder: placeholder
					});
				});
			}
		}
	});
	&lt;/script&gt;
	&lt;?php
}</code></pre>

<p> </p>

<p>여기에다가</p>

<p> </p>

<pre>
<code>add_action('wp_head', 'wp_head_2020_03_20');
function wp_head_2020_03_20(){
	?&gt;
	&lt;script&gt;
	jQuery(document).ready(function(){
		var kboard_mod = jQuery('input[name=mod]', '.kboard-form').val();
		if(kboard_mod == 'editor'){
			if(kboard_current.use_tree_category == 'yes'){
				kboard_tree_category_parents();
			}

			if(kboard_current.use_editor == 'snote'){ // summernote
				jQuery('.summernote').each(function(){
					var height = parseInt(jQuery(this).height());
					var placeholder = jQuery(this).attr('placeholder');
					var lang = 'en-US';

					if(kboard_settings.locale == 'ko_KR'){
						lang = 'ko-KR';
					}
					else if(kboard_settings.locale == 'ja'){
						lang = 'ja-JP';
					}

					jQuery(this).summernote({
            callbacks: {
                       onImageUpload: function(image) {
                        uploadImage(image[0]);
                       }
               },
						toolbar: [
					          ['font', ['bold', 'underline', 'clear']],
					          ['color', ['color']],
					          ['para', ['ul', 'ol']],
					          ['table', ['table']],
					          ['insert', ['link', 'video']],
					          ['view', ['fullscreen', 'codeview']]
					    ],
						lang: lang,
						height: height,
						placeholder: placeholder
					});

          function uploadImage(image) {
                 var data = new FormData();
                 data.append("image", image);
                 $.ajax({
                     type: "post",
                     cache: false,
                     contentType:false,
                     processData: false,
                     dataType :'jsonp',
                     url: '/cop/bbs/insertSummberNoteFile.do',
                     data: data,
                     success: function(data) { /wp-content/themes/new/img
                         var image = $('&lt;img&gt;').attr('src', '/cmm/fms/getImage.do?atchFileId='+data[0].atchFileId+'&amp;fileSn=0');
                         $('#nttCn').summernote("insertNode", image[0]);
                     },
                     error: function(data) {
                         alert('error : ' +data);
                     }
                 });
             }
          
				});
			}
		}
	});
	&lt;/script&gt;
	&lt;?php
}</code></pre>

<p> </p>

<p>이런 식으로 콜백 함수를 넣고</p>

<p> </p>

<p>자바 파일에다가 </p>

<p> </p>

<pre>
<code>/**
     * 단순 파일 업로드.
     *
     * @param boardVO
     * @param board
     * @param sessionVO
     * @param model
     * @return
     * @throws Exception
     */
    @RequestMapping("/cop/bbs/insertSummberNoteFile.do")
    public void insertSummberNoteFile(final MultipartHttpServletRequest multiRequest, @ModelAttribute("searchVO") BoardVO boardVO, @ModelAttribute("bdMstr") BoardMaster bdMstr,
            @ModelAttribute("board") Board board, BindingResult bindingResult, SessionStatus status, ModelMap model, HttpServletRequest request,HttpServletResponse response) throws Exception {
        LoginVO user = (LoginVO) EgovUserDetailsHelper.getAuthenticatedUser();
        Boolean isAuthenticated = EgovUserDetailsHelper.isAuthenticated();
        JSONArray reportJsonArray = new JSONArray();
        if (isAuthenticated) {
            List&lt;FileVO&gt; result = null;
            String atchFileId = "";
            final Map&lt;String, MultipartFile&gt; files = multiRequest.getFileMap();
            if (!files.isEmpty()) {
                result = fileUtil.parseFileInf(files, "BBS_", 0, "", "");
                atchFileId = fileMngService.insertFileInfs(result);
                JSONObject obj = new JSONObject();
                System.out.println("&gt;&gt;&gt;&gt;&gt; atchFileId : " +atchFileId);
                obj.put("atchFileId", atchFileId);
                reportJsonArray.add(obj);
            }
                
            JSONObject obj = new JSONObject();
            reportJsonArray.add(obj);
                    
            response.setCharacterEncoding("utf-8");
            response.getWriter().println(request.getParameter("callback") + "(" + reportJsonArray+ ")");
            response.getWriter().close();
        }
    }
</code></pre>

<p> </p>

<p>이 코드를 넣으라고 해서 넣었는데 동작이 안되가지구요.. 머리 끙끙 싸메다가 이런 것까지 여쭤보기에는 정말 죄송하지만 도움을 얻고자 합니다..ㅜㅜ</p>

<p> </p>

<p>혹시 방법이 있을까요..?</p>

<p> </p>

<p> </p>]]></description>
		<copyright>Copyright 2026, 코스모스팜</copyright>
				<item>
			<title><![CDATA[안녕하세요~^^

최신 버전의 KBoard 플러그인에서는

KBoard 미디어 추가 시 드래그 앤 드롭으로 이미지...]]></title>
			<link>https://www.cosmosfarm.com/threads/document/42085</link>
			<description><![CDATA[<p>안녕하세요~^^</p>

<p>최신 버전의 KBoard 플러그인에서는</p>

<p>KBoard 미디어 추가 시 드래그 앤 드롭으로 이미지를 추가하실 수 있습니다.</p>

<p>썸머노트 에디터 이미지 업로드 관련해서는 저희도 연구를 해봐야 할 듯합니다.</p>

<p>좋은 방법을 찾게 되면 다시 안내해드리겠습니다.</p>

<p>고맙습니다.</p>]]></description>
			<author>스레드봇</author>
			<pubDate>Mon, 23 Mar 2020 03:21:53 +0000</pubDate>
			<category>KBoard</category>
		</item>
				<item>
			<title><![CDATA[안녕하세요.. 코드를 보고 있는데요.. 

마지막에 insertNode 하시는 곳의 this 가   실제로 summernote...]]></title>
			<link>https://www.cosmosfarm.com/threads/document/42072</link>
			<description><![CDATA[<p>안녕하세요.. 코드를 보고 있는데요.. </p>

<p>마지막에 insertNode 하시는 곳의 this 가   실제로 summernote 객체가 아닌 것 같습니다. </p>

<p>const self = this; </p>

<p>jQuery(this).summernote({  </p>

<p>형태로 두시고 </p>

<p>sendFile(files[i], self);</p>

<p>개별 this 를 넣어주시면 될 것 같아요. </p>

<p> </p>

<p> </p>]]></description>
			<author>easylogic</author>
			<pubDate>Mon, 23 Mar 2020 01:17:29 +0000</pubDate>
			<category>KBoard</category>
		</item>
				<item>
			<title><![CDATA[Function.php 안의 코드


add_action('wp_head', 'wp_head_2020_03_20');
function wp_head_2020_03_20...]]></title>
			<link>https://www.cosmosfarm.com/threads/document/42069</link>
			<description><![CDATA[<p>Function.php 안의 코드</p>

<pre>
<code>add_action('wp_head', 'wp_head_2020_03_20');
function wp_head_2020_03_20(){
	?&gt;
	&lt;script&gt;
	jQuery(document).ready(function(){
		var kboard_mod = jQuery('input[name=mod]', '.kboard-form').val();
		if(kboard_mod == 'editor'){
			if(kboard_current.use_tree_category == 'yes'){
				kboard_tree_category_parents();
			}

			if(kboard_current.use_editor == 'snote'){ // summernote
				jQuery('.summernote').each(function(){
					var height = parseInt(jQuery(this).height());
					var placeholder = jQuery(this).attr('placeholder');
					var lang = 'en-US';

					if(kboard_settings.locale == 'ko_KR'){
						lang = 'ko-KR';
					}
					else if(kboard_settings.locale == 'ja'){
						lang = 'ja-JP';
					}

					jQuery(this).summernote({
						toolbar: [
              ['font', ['bold', 'underline', 'clear']],
              ['color', ['color']],
              ['para', ['ul', 'ol']],
              ['table', ['table']],
              ['insert', ['link','picture', 'video']],
              ['view', ['fullscreen', 'codeview']]
            ],

            callbacks: {
            onImageUpload:function(files, editor, welEditable){
                for(var i = files.length - 1;i&gt;=0;i--){
                    sendFile(files[i], this);
                }
            }
        },
						lang: lang,
						height: height,
						placeholder: placeholder
					});

          function sendFile(file, el, welEditable){
              var form_data = new FormData();
              form_data.append('file', file);
              $.ajax({
                  data:form_data,
                  type:"POST",
                  url:'./editor-upload.php',
                  cache:false,
                  contentType:false,
                  processData:false,
                  success:function(url){
                      $(el).summernote('editor.insertImage', $.trim(url));
                  },
                  error: function(data) {
                      console.log(data);
                  }
              });
          }

				});
			}
		}
	});
	&lt;/script&gt;
	&lt;?php
}</code></pre>

<p> </p>

<p>editor-upload.php 안의 코드</p>

<pre>
<code>&lt;?php
if ($_FILES['file']['name']) {
    if (!$_FILES['file']['error']) {
        $temp = explode(".", $_FILES["file"]["name"]);
        $newfilename = round(microtime(true)).'.'.end($temp);
        $destinationFilePath = './wp-content/themes/new/images/'.$newfilename;
        if (!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)) {
            echo $errorImgFile;
        }
        else{
            echo $destinationFilePath;
        }
    }
    else {
        echo  $message = '파일 에러 발생!: ' . $_FILES['file']['error'];
    }
}
?&gt;
</code></pre>

<p> </p>

<p>실패..</p>

<p> </p>

<p> </p>

<p>이렇게 하니 아예 사진 기능이 URL 빼곤 반응 자체가 없네요..ㅜㅜ</p>

<p> </p>

<p>구글링 해보니까 방식 자체는 Kboard 자체 사진 기능이랑 되게 비슷한 거 같은데..</p>]]></description>
			<author>Mo1o</author>
			<pubDate>Sat, 21 Mar 2020 15:09:01 +0000</pubDate>
			<category>KBoard</category>
		</item>
				<item>
			<title><![CDATA[https://programmer93.tistory.com/31 여기를 참고해보기도 하고..

 

http://www.areyoucodingenough....]]></title>
			<link>https://www.cosmosfarm.com/threads/document/42068</link>
			<description><![CDATA[<p><a href="https://programmer93.tistory.com/31">https://programmer93.tistory.com/31</a> 여기를 참고해보기도 하고..</p>

<p> </p>

<p><a href="http://www.areyoucodingenough.com/programming/best-solution-insert-images-content-using-summernote/">http://www.areyoucodingenough.com/programming/best-solution-insert-images-content-using-summernote/</a> 여기를 참고해보기도 하고..</p>

<p> </p>

<p>갑갑허네용.. 후..</p>]]></description>
			<author>Mo1o</author>
			<pubDate>Sat, 21 Mar 2020 14:08:02 +0000</pubDate>
			<category>KBoard</category>
		</item>
				<item>
			<title><![CDATA[제작자님 오실 때까지 방법 연구..

 


jQuery(this).summernote({
						toolbar: [
					          [...]]></title>
			<link>https://www.cosmosfarm.com/threads/document/42067</link>
			<description><![CDATA[<p>제작자님 오실 때까지 방법 연구..</p>

<p> </p>

<pre>
<code>jQuery(this).summernote({
						toolbar: [
					          ['font', ['bold', 'underline', 'clear']],
					          ['color', ['color']],
					          ['para', ['ul', 'ol']],
					          ['table', ['table']],
					          ['insert', ['link','picture', 'video']],
					          ['view', ['fullscreen', 'codeview']]
					    ],
              callbacks: {
                onImageUpload: function(image) {
                  editor = $(this);
                  uploadImageContent(image[0], editor);

                  var data = new FormData();
                  data.append('image', image);
                  $.ajax({
                    url: "/wp-content/themes/new/uploadImage.php",
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: data,
                    type: "post",
                    success: function(url) {
                      var image = $('&lt;img&gt;').attr('src', url);
                      $(editor).summernote("insertNode", image[0]);
                    },
                    error: function(data) {
                      console.log(data);
                    }
                  });

                }
              },
						lang: lang,
						height: height,
						placeholder: placeholder
					});</code></pre>

<p> </p>

<p>+ uploading.php 올려서 해보기..</p>

<p> </p>

<pre>
<code>&lt;?php

$return_value = "";

  if ($_FILES['image']['name']) {
    if (!$_FILES['image']['error']) {
      $name = md5(rand(100, 200));
      $ext = explode('.', $_FILES['image']['name']);
      $filename = $name . '.' . $ext[1];
      $destination = '/wp-content/themes/new/images' . $filename;
      $location = $_FILES["image"]["tmp_name"];
      move_uploaded_file($location, $destination);
      $return_value = '/wp-content/themes/new/images' . $filename;
    }else{
      $return_value = 'Ooops! Your upload triggered the following error: '.$_FILES['image']['error'];
    }
  }

echo $return_value;
?&gt;
</code></pre>

<p> </p>

<p>실패..</p>]]></description>
			<author>Mo1o</author>
			<pubDate>Sat, 21 Mar 2020 13:13:35 +0000</pubDate>
			<category>KBoard</category>
		</item>
			</channel>
</rss>