'세팅' 태그의 글 목록 (3 Page)

'세팅'에 해당되는 글 13건

[Editor] Daum Open Editor 세팅하고 사용하기[Editor] Daum Open Editor 세팅하고 사용하기

Posted at 2018. 3. 26. 13:07 | Posted in API/DAUM 오픈 에디터

첨부파일 : editor.zip

■ 다음 오픈 에디터 세팅하고 사용하기

01. https://github.com/kakao/DaumEditor/tree/gh-pages/download/에 접속해서 다음에디터를 다운받자.

02. 화면 최하단을 보면 How to download 라고 적힌 유의사항이 적힌 부분이 있는데.

※ 이포스팅 에서는 작성시기의 안정화된 버저인 stable(7.4.X) 버전대를 사용하였다.

03. Stable(7.4.X)버전에서 가장 높은 버전대를 찾아 선택하고 클릭한다.

04. 해당 버전의 다운로드 페이지로 이동되면 아래 순서대로 작업을 수행한다.

① Download 버튼을 클릭한다.

② 확인 버튼을 클릭하여 daumeditor.zip 파일을 다운받는다.

05. 이제 다음 에디터 프로젝트를 수행할 폴더를 생성하고 아래 순서대로 작업을 진행한다.

① 다음 에디터 프로젝트를 진행할 editor 라는 폴더를 생성한다.

② 위에서 다운받은 daumeditor.zip 파일의 압축을 해제한다.

③ 압축해제된 폴더의 이름을 daumEditor로 변경하였다.

06. 이제 다음에디터를 불러와서 사용할 board.php 파일 생성한다.

07. 생성한 board.php 파일에 들어갈 소소는 아래와 같다.

board.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Daum 에디터</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function saveContent() {
    if(jQuery("#title").val() == "") {
        alert("제목을 입력해 주세요.");
        jQuery("#title").focus();
        return;
    }

    Editor.save(); // 이 함수를 호출하여 글을 등록하면 된다.
}
</script>
</head>
<body>
<form name="tx_editor_form" id="tx_editor_form" action="view.php" method="post" enctype="multipart/form-data" accept-charset="utf-8">
 <b>제목 :</b> <input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once ("./daumEditor/editor.html");      // 다음 에디터를 include 한다.
?>
<div align="right"><input type="button" value="등록" onClick="saveContent();"/></div>
</div>
</form>
</body>
</html>

08. 다음으로 작성된 값을 출력할 view.php를 생성한다.

09. view.php에 들어갈 소스는 아래와 같다.

view.php

<?php

echo "<pre>";

print_r($_POST);

echo "</pre>";

10. 이제 위에서 압축을 해제하 명칭을 변경한 daumEditor 폴더의 editor.html 파일을 수정한다.

11. editor.hml 파일을 수정한다. 아래 코드는 원래 적혀있던 주석들은 다 삭제해 두었다.
① 상대경로로 잡혀 있는 부분은 전부 절대경로로 변경하고 파란색 글씨로 표기하였다.

② 샘플로 들어가 있거나 board.php에서 미리 지정한기능 혹은 필요없어 삭제해도 되는 부분은 빨간색으로 표기하였다.

editor.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</div>

</li>

</div>

</li>

<a href="javascript:;" title="외부컨텐츠" class="tx-text">외부컨텐츠</a>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

<a href="javascript:;" class="tx-icon" title="가운데정렬 (Ctrl+.)">가운데정렬</a>

</div>

</li>

<a href="javascript:;" class="tx-icon" title="오른쪽정렬 (Ctrl+/)">오른쪽정렬</a>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</div>

</li>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<!--

<div class="tx-side-bi" id="tx_side_bi">

<div style="text-align: right;">

<img hspace="4" height="14" width="78" align="absmiddle" src="http://localhost/editor/daumEditor/images/icon/editor/editor_bi.png" />

</div>

-->

<p></p>

</div>

<p>파일을 업로드하는 중입니다.</p>

</div>

</li>

파일: <span id="tx_attach_up_size" class="tx-attach-size-up"></span>/<span id="tx_attach_max_size"></span>

</li>

</ul>

</div>

var config = {

txHost : ""

, txPath : ""

, txService : "sample"

, txProject : "sample"

, initializedId : ""

, wrapper : "tx_trex_container"

, form : "tx_editor_form" + ""

, txIconPath : "http://localhost/editor/daumEditor/images/icon/editor/"

, txDecoPath : "http://localhost/editor/daumEditor/images/deco/contents/"

, canvas: {

exitEditor:{ }

, styles: {

color : "#123456"

, fontFamily : "굴림"

, fontSize : "10pt"

, backgroundColor : "#FFFFFF"

, lineHeight : "1.5"

, padding : "8px"

}

, showGuideArea: false

}

, events : {

preventUnload: false

}

, sidebar : {

attachbox : {

show : true,

confirmForDeleteAll : true

}

, size: {

contentWidth : 700

}

};

EditorJSLoader.ready(function(Editor) {

var editor = new Editor(config);

});

</script>

/* saveContent( )함수 삭제 ( board.php 파일에서 호출 하게 끔 변경 함 ) */

function saveContent() {

Editor.save(); // 이 함수를 호출하여 글을 등록하면 된다.

}

function validForm(editor) {

var validator = new Trex.Validator();

var content = editor.getContent();

if (!validator.exists(content)) {

alert("내용을 입력하세요");

return false;

}

return true;

}

function setForm(editor) {

var i = "";

var input = "";

var form = editor.getForm();

var content = editor.getContent();

var textarea = document.createElement('textarea');

textarea.name = "content";

textarea.value = content;

form.createField(textarea);

var images = editor.getAttachments('image');

for(i = 0; i < images.length; i++) {

if (images[i].existStage) {

alert("attachment information - image[" + i + "] \r\n" + JSON.stringify(images[i].data));

input = document.createElement('input');

input.type = "hidden";

input.name = "attach_image";

input.value = images[i].data.imageurl;

form.createField(input);

}

var files = editor.getAttachments('file');

for(i = 0; i < files.length; i++) {

input = document.createElement('input');

input.type = "hidden";

input.name = "attach_file";

input.value = files[i].data.attachurl;

form.createField(input);

}

return true;

}

</script>

<!--

<textarea id="sample_contents_source" style="display:none;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p style="text-align: center;">

<img src="https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F" class="tx-daum-image" style="clear:none;float:none;"/>

</p>

<p>

<a href="https://t1.daumcdn.net/cfile/blog/207C8C1B4AA4F5DC01"><img src="snapshot/images/icon/p_gif_s.gif"/> editor_bi.gif</a>

</p>

</textarea>

-->

<!--

<script type="text/javascript">

function loadContent() {

var attachments = {};

attachments['image'] = [];

attachments['image'].push({

"attacher": "image"

, "data": {

"imageurl" : "https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F"

, "filename" : "github.gif"

, "filesize" : 59501

, "originalurl" : "https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F"

, "thumburl" : "https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F"

}

});

attachments['file'] = [];

attachments['file'].push({

"attacher" : "file"

, "data" : {

"attachurl" : "https://t1.daumcdn.net/cfile/blog/207C8C1B4AA4F5DC01"

, "filemime" : "image/gif"

, "filename" : "editor_bi.gif"

, "filesize" : 640

}

});

Editor.modify({

"attachments": function() {

var allattachments = [];

for (var i in attachments) {

allattachments = allattachments.concat(attachments[i]);

}

return allattachments;

}(),

"content" : document.getElementById("sample_contents_source")

});

}

</script>

-->

</body>

</html>

12. 이제 board.php를 실행하고 다음에디터가 잘 실행되는 지 확인해 보자.

정상적으로 출력이 된다면 제목과 내용을 작성한뒤 등록버튼을 클릭해보자.

13. 아래와같이 결과가 잘 전송되어 출려되는 모습을 확인 할 수 있다.

저작자표시

'API > DAUM 오픈 에디터' 카테고리의 다른 글

[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작 (0)	2018.04.20

[PHP] PHP QR코드 세팅하기[PHP] PHP QR코드 세팅하기

Posted at 2018. 3. 15. 01:02 | Posted in PHP/PHP Library

■ PHP QR Code 설치하기

-. QR코드를 생성하기 위해서는 PHP GD가 사용 가능한 상태여야 한다.

-. php.ini를 오픈하여 extension=php_gd2.dll 파일이 사용가능한 상태인지 확인해 보자.

사용이 가능하지 않은 상태라면 extension=php_gd2.dll의 주석( ; )을 제거하고 Apache 를 재시작 한뒤 진행해야 한다.

01. https://sourceforge.net/projects/phpqrcode/files/ 사이트에 접속하여 PHP QR Code 라이브 러리를 다운받는다.

02. 잠시 기다리고 있으면 phpqrcode.zip 파일을 다운받을 수 있다.

03. 다운받은 phpqrcode.zip 파일의 압축을 해제한다.

■ PHP QR Code를 사용하여 QR코드 생성하기

# 소스코드

<?php

// 압축을 해제한 phpqrcode 폴더의 grlib.php 파일을 include한다.

include_once "./phpqrcode/qrlib.php";

// 출력 버퍼 사용 시작!!

ob_start("colback");

$codeText = "안녕하세요 반갑습니다.";

// 출력 버퍼의 내용을 변수로 저장한다.

$debugLog = ob_get_contents();

// 출력 버퍼의 내용을 출력하지 않고, 출력 버퍼를 비우고 종료한다.

// 출력 버퍼의 내용은 반드시 비워야 한다.

ob_end_clean();

QRcode::png($codeText);

# 출력결과

위와같이 QR코드가 정상적으로 생성되는것을 확인할 수 있다.

저작자표시

'PHP > PHP Library' 카테고리의 다른 글

[PHP] SimpleSql 라이브러리를 사용한 손쉬운 쿼리사용 (1)	2018.04.16
[PHP] PHP 메일 발송 (5)	2018.04.10
[PHP] PHPExcel 엑셀 파일 업로드 하고 내용 읽기 (0)	2018.03.22
[PHP] PHPExcel 설치하고 엑셀파일 다운받기 (0)	2018.03.21
[PHP] PHP QR코드 이미지 저장하고 띄우기 (0)	2018.03.16

[Ubuntu] 버츄얼 박스로 우분투 설치하기 #2 - Ubuntu 설치[Ubuntu] 버츄얼 박스로 우분투 설치하기 #2 - Ubuntu 설치

Posted at 2018. 3. 12. 23:55 | Posted in Linux/Ubuntu

■ Virtual Box로 Ubuntu 설치하기 #2 - 우분투 설치

■ 버츄얼 박스로 우분투 설치하기 #2 - 우분투 설치하기

출처: http://wickedmagic.tistory.com/593 [사악미소의 현대마법의 공방]

01. 맨처음으로는 언어(Language)를 선택하는 창이 나온다. 한국어를 선택해주자.

02. 다음 화면에서 우분투 설치를 클릭한다.

03. 마찬가지로 한국어를 선택하고 작업을 진행한다.

① 한국어를 선택한다.

② 계속 버튼을 클릭하여 설치를 진행하자.

04. 계속버튼을 클릭해서 작업을 진행한다.

① Ubuntu 설치 중 업데이트 다운로드를 선택하고 작업을 진행하자.

② 계속 버튼을 클릭한다.

05. 우분투를 저장 장치에 설치하는 방법을 선택한다.

① 새로 만든 가상 디스크에 처음으로 우분투를 설치하는 것이므로,

자동으로 설치하는 옵션인 디스크를 지우고 Ubuntu 설치를 눌러서 작업을 진행하자.

② 지금 설치를 클릭한다.

06. 디스크를 지우고 Ubuntu 설치를 선택했다면 아래와 같은 창이 뜬다 계속 버튼을 눌러 다음으로 진행하자.

07. 지역 설정 화면이다. 기본적으로는 Seoul(서울)로 되어 있을테니 계속을 눌러 작업을 진행하자.

08. 키보드 설정을 정하는 구간이다.

① 키보드 배치를 한국어로 선택한다.

② 자판은 한국어 - 한국어(101/104)를 선택했다.

※ 언어설정은 추후 변경이 가능하다.

09. 사용자 정보를 입력하는 구간이다.

① 설치할 우분투의 이름과 암호등의 개인정보를 항목에 맞게 입력한다.

② 계속 버튼을 클릭하여 설치를 진행하자.

10. 그럼 이제 우분투 설치가 진행이 된다. 설치가 다 끝날때까지 기다리자.

11. 설치가 끝나면 컴퓨터를 다시 시작한다는 알림창이 뜬다. 지금 다시 시작을 눌러 재부팅 하자.

12. 이제 컴퓨터가 재부팅 되면 아래와 같이 우분투 로그인 창이 나타나는 것을 확인 할 수 있다.

위에서 작성한 패스워드를 입력하여 로그인해보자.

13.

$ sudo apt-get update

14.

$ sudo apt-get upgrade

저작자표시

'Linux > Ubuntu' 카테고리의 다른 글

[Ubuntu] 우분투 Package 관리 (0)	2018.06.29
[Ubuntu] Terminal 사용하기 (0)	2018.06.27
Wine을 이용하기 (0)	2018.06.26
[Ubuntu] 버츄얼 박스로 우분투 설치하기 #1 - Virtual Box 세팅 (0)	2018.03.12
[Ubuntu] 우분투 16 LTS 다운로드 받기 (0)	2018.03.12

[Ubuntu] 버츄얼 박스로 우분투 설치하기 #1 - Virtual Box 세팅[Ubuntu] 버츄얼 박스로 우분투 설치하기 #1 - Virtual Box 세팅

Posted at 2018. 3. 12. 23:20 | Posted in Linux/Ubuntu

■ Virtual Box로 Ubuntu 설치하기 #1 - 버츄얼 박스 세팅

01. 먼저 버츄얼 박스(Oracle VM VirtualBox)를 실행하고 새로 만들기 버튼을 클릭한다.

02. 설치할 가상머신의 이름과 설정을 세팅한다.

① 먼저 가상 머신의 이름을 작성한다. Ubuntu 라고 적으면 기본적으로 자동으로 세팅이 된다.

② 설정이 완료되면 다음 버튼을 클릭한다.

03. 가상 머신의 메모리를 할당한다. 기본적으로 적용된 권장사양을 사용했다.

※ 메모리 용량은 추후 변경이 가능하니 부담을 가지지 말고 설정하자.

04. 하드디스크를 세팅한다.

① 지금 새 가상 하드 디스크 만들기 를 선택한다.

② 다음 버튼을 클릭한다.

※ 기존에 만들어둔 가상 하드디스크가 하나도 없으므로 이렇게 선택했다.

05. VDI(VirtualBox 디스크 이미지)를 선택한다.

6. 하드 드라이브 용량을 어떻게 사용할지 정하는 부분이다.

① 고정 크기를 선택한다.

② 다음 버튼을 클릭한다.

※ 용량이 부족하다면 동적할당을 선택하는 것을 추천하지만, 속도를 위해서 고정 크기로 설정했다.

07. 새로 만드는 가상 하드디스크의 이름과 크기를 지정해 준다.

① 가상 하드 디스크의 이름을 작성한다.

② 용량은 기본적으로 10GB가 기본적으로 제시되어 있었다.(최소 8GB이상을 선택하는것을 권장한다.)

③ 만들기 버튼을 클릭한다.

※ 하드디스크 용량은 이후 변경이 불가능 하니 잘 생각하고 정하도록 하자.

09. 가상머신의 세팅이 끝났으면 이제 우분투를 설치하기 위한 설정에 들어가자.

① 세팅된 우분투 가상머신을 선택한다.

② 상단의 설정 버튼을 클릭한다.

10. 이제 설치할 가상머신에 사전에 미리 다운받아둔 우분투 ISO파일을 배치한다.

① 왼쪽 카테고리에서 저장소를 클릭한다.

② 저장소 창에서 비어있음을 선택한다.

③ 오른쪽의 CD-ROM 모양의 아이콘을 선택한다.

④ 가상 광 디스크 파일 선택을 클릭한다.

11. 사전에 다운받은 우분투.iso 파일을 찾아서 오픈한다.

① 다운받아둔 Ubuntu.iso 파일을 찾고 선택한다.

② 열기 버튼을 클릭한다.

12. 그럼 이제 버츄얼 머신으로 우분투 설치 준비가 완료되었다.

① 컨트롤러 : IDE에 위에서 선택한 우분투.iso파일이 선택되어 진 것을 확인 할 수 있다.

② 확인 버튼을 클릭한다.

13. 이제 가상머신을 실행하여 우분투를 설치 해보자.

① 세팅한 우분투 가상머신을 선택한다.

② 시작 버튼을 클릭한다.

14. 시동 디스크 선택 하라는 팝업창이 뜬다.

① 기본적으로 설정된 호스트 드라이브 'G:'를 선택

② 시작 버튼을 클릭한다.

15. 그럼 우분투 가상머신 창이 나타난다.

16. 잡기 버튼을 클릭하고 넘어가자.

17. 그럼 이제 우분투 설치로 넘어가는 것을 확인 할 수 있다.

저작자표시

'Linux > Ubuntu' 카테고리의 다른 글

[Ubuntu] 우분투 Package 관리 (0)	2018.06.29
[Ubuntu] Terminal 사용하기 (0)	2018.06.27
Wine을 이용하기 (0)	2018.06.26
[Ubuntu] 버츄얼 박스로 우분투 설치하기 #2 - Ubuntu 설치 (0)	2018.03.12
[Ubuntu] 우분투 16 LTS 다운로드 받기 (0)	2018.03.12

Prev Next

1 2 3 4

'세팅'에 해당되는 글 13건

[Editor] Daum Open Editor 세팅하고 사용하기[Editor] Daum Open Editor 세팅하고 사용하기

'API > DAUM 오픈 에디터' 카테고리의 다른 글

[PHP] PHP QR코드 세팅하기[PHP] PHP QR코드 세팅하기

'PHP > PHP Library' 카테고리의 다른 글

[Ubuntu] 버츄얼 박스로 우분투 설치하기 #2 - Ubuntu 설치[Ubuntu] 버츄얼 박스로 우분투 설치하기 #2 - Ubuntu 설치

'Linux > Ubuntu' 카테고리의 다른 글

[Ubuntu] 버츄얼 박스로 우분투 설치하기 #1 - Virtual Box 세팅[Ubuntu] 버츄얼 박스로 우분투 설치하기 #1 - Virtual Box 세팅

'Linux > Ubuntu' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바