HTML2011. 5. 8. 21:30

FCK editor를 써볼 기회가 생겼습니다.

 

예전에 잠깐 본적은 있지만 혼자서 붙이고 수정하고 하는건 처음이라서 저와 같은 분들을 위해 이것 저것 써놓도록 하겠습니다.

 

자~ 처음에는 당연히 FCKditor를 받아야겠지욤??

 

다운 받는 사이트는 http://sourceforge.net/projects/fckeditor/files 욜로 가십니다.

 

가시면 하단 부분에 최신파일들이 등록된것을 알수있습니다.

 

항상 최신이 좋은건 아니지만 그래도 버그들이 하나 둘씩 수정되서 나왔겠지욤 ^^;

 

 

 

 

저는 FCKeditor_2.6.4.1.zip 을 받고  그 아래 FCKeditor.java에가서 fckeditor-java-2.4.2-src.zip 을 받았습니다.

 

이제 총알을 다운 받았으니 eclipse에서 DynamicWeb Project를 하나 만들어 봅시다.

 

참고로 저는

 

eclipse = eclipse-jee-ganymede-SR2-win32

JDK = jdk1.5.0_17

tomcat = 5.5

 

를 사용하고있습니다.

 

이클립스 왼쪽에 보시면 Project Explorer 안에서 우클릭 New -> Other 을 눌르시면 아래 처럼 저놈이 뜹니다.

 

 

 

Dynamic Web Project 를 선택 후 Next를 눌러주시면 아래 처럼 화면이 뜹니다.

 

 

 

여기서 본인이 원하는 Project name 을 써주시고 Target Runtime, version, Configuration 을 잡아주세요.

지금은 FCK editor를 설명중이니 위 쎄팅은 넘어가겠습니다.

 

Project name를 써주신후 넥스트 ~ 

 

 

 

 

Java Source Directory 를 src에서 java로 변경 후 Finish 클릭~ 하시면 아래처럼 프로젝트가 생성됩니다.

 

 

 

 

자 그럼 이제 부터 받을 총알들을 끼워 넣을 차례입니다.

 

FCKeditor_2.6.4.1.zip 파일의 압축을 풀면 fckeditor라는 폴더를 복사해서  WebContent 아래에 복사합니다

여기서 폴더를 직접열어서 붙이는 방법과 이클립스에서 바로 붙이는 방법 편안한대로 하시면 됩니다~

 

저는 윈도키+e 버튼을 눌러 해당 프로젝트를 차자가는 불편보다는 바로 이클립스에서 복사한것을 붙였습니다.

 

그럼 아래처럼 생기겠지욤?

 

 

 

여기서 끝이 아닙니다.

 

이젠 fckeditor-java-2.4.2-src.zip 압축을 푸시면 docs, src, web 폴더가 보이실겁니다.

 

web -> _samples 을 복사하신 후 fckeditor에 엎어 치시고, web->WEB-INF도 복사하신 후 WebContent에 엎어 치십니다.

 

그럼 아래 화면처럼 _samples에 jsp가 추가 되며, WEB-INF lib폴더에 commons-fileupload.jar, FCKeditor-2.3.jar가 추가 되며,

web.xml이 바뀝니다.

 

여기서 저는 fckeditor폴더를 통채로 복사했기에 web.xml을 조금 수정해야 합니다.

<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
  </servlet-mapping>
 
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
  </servlet-mapping>

 

이부분을

 

<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
  </servlet-mapping>
 
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
  </servlet-mapping>

 

요렇게 수정해야겠지욤!!!

 

여기서 현재 프로젝트가 진행중이시면 web.xml에 필요한 부분만 카피해서 쓰시길 바랍니다 ^^ 

 

 

 

 

 

자 이제 직접 사용하기 위해서 몇가지 소스를 고쳐 보겠습니다.

 

WebContent\fckeditor\fckconfig.js 파일을 열고

 

1. FCKConfig.DefaultLanguage  = 'en' ; ->  FCKConfig.DefaultLanguage  = 'kr' ;

    로 수정 해주세요!!!

 

2. var _FileBrowserLanguage = 'jsp' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'jsp' ; // asp | aspx | cfm | lasso | php

    로 수정해주세요!!!

 

3. 2번 하단에

    var _FileBrowserExtension = _FileBrowserLanguage == 'perl' ? 'cgi' : _FileBrowserLanguage ;
    var _QuickUploadExtension = _QuickUploadLanguage == 'perl' ? 'cgi' : _QuickUploadLanguage ;

    var _ConnectorServletName = '/Fckeditor/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector';
    var _SimUploadServletName = '/Fckeditor/fckeditor/editor/filemanager/upload/simpleuploader';

    를 추가해 주세요!!!

 

4. 3번 하단에

 

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.LinkBrowserWindowWidth = FCKConfig.ScreenWidth * 0.7 ;  // 70%
FCKConfig.LinkBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;
FCKConfig.LinkUploadAllowedExtensions = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ;   // empty for all
FCKConfig.LinkUploadDeniedExtensions = "" ; // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ;  // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ;       // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|flv)$" ;  // empty for all
FCKConfig.FlashUploadDeniedExtensions = "" ;     // empty for no one

 

요놈들을

 

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + _ConnectorServletName ;
FCKConfig.LinkBrowserWindowWidth = FCKConfig.ScreenWidth * 0.7 ;  // 70%
FCKConfig.LinkBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + _ConnectorServletName ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + _ConnectorServletName ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = _SimUploadServletName ;
FCKConfig.LinkUploadAllowedExtensions = "" ;   // empty for all
FCKConfig.LinkUploadDeniedExtensions = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ; // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = _SimUploadServletName + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png)$" ;  // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ;       // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = _SimUploadServletName + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla)$" ;  // empty for all
FCKConfig.FlashUploadDeniedExtensions = "" ;     // empty for no one

 

요렇게 변경 합니다 ~

요기까지만 설정하셔도 FCKeditor가 구동 되실겁니다.

 

다음은 다운로드시 한글깨짐 현상때문에 설정하는 것입니다.

 

WebContent\fckeditor\editor\dialog\fck_image\fck_image.js을 여시면 Ok()함수를 찾아서 아래 소스를 제일 상단에 추가해주세요!!!

 

var imgUrl = GetE('txtUrl').value;
var idx = imgUrl.lastIndexOf("/") + 1;
imgUrl = imgUrl.substring( 0, idx ) + encodeURIComponent( imgUrl.substring( idx, imgUrl.length ) );
GetE('txtUrl').value = imgUrl;

 

Ok()함수를 수정하셨으면 그위에있는 LoadSelection()을 찾으셔서

 

GetE('txtUrl').value    = sUrl ; 요놈을 GetE('txtUrl').value    = decodeURIComponent( sUrl ) ; 요렇게 바까 주십니다~

 

그럼 테스트 페이지를 만들어서 함 돌려볼까욤??

 

WebContent 아래

 

wirte.jsp

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/fck_editor/FCKeditor/fckeditor.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
 window.onload = function() {
         var oFCKeditor = new FCKeditor( 'memo' ) ;
         oFCKeditor.BasePath =  "/fck_editor/FCKeditor/";
         oFCKeditor.Width = 800;
         oFCKeditor.Height = 250 ;
         oFCKeditor.ReplaceTextarea() ;
    }
</script>
<form action="view.jsp" method="post">
<textarea name="memo" class="input1" style="width:800px; height:250px;"></textarea>
<input type="submit" value="글쓰기">
</form>
</body>
</html>

 

======================================================================================================================

view.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");

%>
<!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>출력 페이지</title>
</head>
<body>
<table border=1>
<tr>
 <td>글내용</td>
</tr>
<tr>
 <td>
 <%= request.getParameter("memo")%>
 </td>
</tr>

</table>
</body>
</html>

 

wirte.jsp를 구동시키면


Posted by 아이맥스
PHP2011. 5. 8. 20:41
1. 우분투 최신버젼을 다운받아서 시디로 굽웠다. (http://www.ubuntu.com)
2. 고정아이피를 할당받아 설치하였고 계정등록후 su 비밀번호를 등록.
sudo passwd root

3. 아래 보고 따라한다 ㅋ (퍼옴)

접기

1. nginx

nginx는 다음과 같이 쉽게 설치 가능합니다.

root@ubuntu:~# apt-get install nginx

근데 php를 올려야 XE같은 프로그램을 사용할 수 있겠죠?

2. php5

root@ubuntu:~# apt-get -y install php5-cli php5-cgi php5-mysql

3. mysql

apt-get을 이용하여 설치하겠습니다.

root@ubuntu:~# apt-get -y install mysql-server mysql-client

약간의 설정을 위해서 mysql을 정지합니다.

root@ubuntu:~# service mysql stop
root@ubuntu:~# mysqld --skip-grant-tables --skip-networking &
root@ubuntu:~# mysql mysql
mysql> UPDATE user SET password=PASSWORD('설치시 입력했던 비밀번호를 입력하세요') WHERE USER="root" AND Host="localhost";
mysql> quit
root@ubuntu:~# service mysql start

4. nginx + php

root@ubuntu:~# vi /etc/nginx/sites-available/default

에서,

location ~ \.php$ {
fastcgi_pass 127....
...fastcgi_params;
}
부분을 찾아 주석해제 해준다.

또 includefastcgi_params; 부분을
include fastcgi_params;로 띄어쓰기 오타 교정을 해준다.
또 fastcgi_param SCRIPT_FILE..... 부분에서
/scripts가 아니라 /var/www/nginx-default로 바꾼다. 띄어쓰기 하지 말것. 그리고 폴더 뒤에 /도 붙이지 말것!!!

이렇게 하면 nginx 부분 세팅은 끝났다.

이제 마지막으로 spawn_fcgi만 세팅하면 된다.

root@ubuntu:~# cd /usr/local/src
root@ubuntu:/usr/local/src# wget http://www.lighttpd.net/download/lighttpd-1.4.18.tar.bz2
root@ubuntu:/usr/local/src# tar -xvjf lighttpd-1.4.18.tar.bz2
root@ubuntu:/usr/local/src/lighttpd-1.4.1.8# cd lighttpd-1.4.18
root@ubuntu:/usr/local/src/lighttpd-1.4.1.8# ./configure
root@ubuntu:/usr/local/src/lighttpd-1.4.1.8# make
root@ubuntu:/usr/local/src/lighttpd-1.4.1.8# cp src/spawn-fcgi /usr/bin/spawn-fcgi
여기서 가장 중요한건 make install을 하지 말것! 당신은 lighttpd를 설치하기 위해 온것이 아니니까 말이죠.
만약 configure: error: no acceptable C compiler found in $PATH 이런 오류가 나오면 apt-get -y install gcc를 실행할것.

이제 스크립트 몇개만 작성하면 되겠다.
root@ubuntu:~# vi /usr/bin/php-fastcgi

내용은 아래와 같이.
#!/bin/sh
/usr/bin/spawn-fcgi -a 127.0.0.1 -p 9000 -u www-data -f /usr/bin/php5-cgi

저장하고 퍼미션 조정해준다.
root@ubuntu:~# chmod 0755 /usr/bin/php-fastcgi

또하나의 init 스크립트를 작성해야 한다.
root@ubuntu:~# vi /etc/init.d/init-fastcgi

내용은 아래와 같이 할 것.
#!/bin/bash
PHP_SCRIPT=/usr/bin/php-fastcgi
RETVAL=0
case "$1" in
    start)
      $PHP_SCRIPT
      RETVAL=$?
  ;;
    stop)
      killall -9 php
      RETVAL=$?
  ;;
    restart)
      killall -9 php
      $PHP_SCRIPT
      RETVAL=$?
  ;;
    *)
      echo "Usage: php-fastcgi {start|stop|restart}"
      exit 1
  ;;
esac
exit $RETVAL

자 이제 역시 퍼미션 조정을 해주고 실행되게 바꾼다.
root@ubuntu:~# chmod 755 /etc/init.d/init-fastcgi
root@ubuntu:~# update-rc.d init-fastcgi defaults

자 이제 reboot 명령어로 재부팅하여 php 연동을 확인하자.
기본 폴더는, 여기까지 매뉴얼대로 따라왔다면, /var/www/nginx-default 이다.

5. gd, mcrypt 설치하기

다시 보다가 생각했습니다.

XE 등을 설치하려면 gd 라이브러리가 있어야 하고 phpmyadmin을 사용하려면 mcrypt가 있어야겠죠.

보통 우분투는 php5-gd를 설치하면 의존성이 있던데,
제 경우엔 mirror를 kr로 바꿔서 그런 의존성이 없군요. (/etc/apt/sources.list에서 미러를 모두 http://kr.archive.ubuntu.com/ubuntu/로 바꾸면 속도도 빨라지고 좋네요.)

여튼, gd 설치
root@ubuntu:~# apt-get -y install php5-gd

mcrypt 설치
root@ubuntu:~# apt-get -y install php5-mcrypt

접기


4. 웹브라우저로 확인했을‹š 502 에러가 나오면 로그파일을 보고 원인을 찾으면 된다.


참고 URL
http://folderfile.net/?mid=textyle&category=3062&vid=xe


설치하고 나니 nginx의 버젼이 최신이 아니더라
그래서 제거를 하고 지웠더니 의존성 에러가 걸리더라.
그래서 업데이트 했다.

아래는 apt-get 사용법

더보기



업데이트하고 나니 막 설치를 하더니
버젼은 그대로다. 그냥 써야게다 ㅋ

가 아니라 다시 삽질했다.
공식홈페이지를 참조해서 

How do I use software from a PPA?

To start installing and using software from a Personal Package Archive, you first need to tell Ubuntu where to find the PPA.

Important: The contents of Personal Package Archives are not checked or monitored. You install software from them at your own risk.

Adding the PPA to Ubuntu 9.10 (Karmic) and later

If you're using the most recent version of Ubuntu (or any version from Ubuntu 9.10 onwards), you can add a PPA to your system with a single line in your terminal.

Step 1: On the PPA's overview page, look for the heading that reads Adding this PPA to your system. Make a note of the PPA's location, which looks like:

ppa:gwibber-daily/ppa

Step 2: Open a terminal and enter:

sudo add-apt-repository ppa:user/ppa-name

Replace ppa:user/ppa-name with the PPA's location that you noted above.

Your system will now fetch the PPA's key. This enables your Ubuntu system to verify that the packages in the PPA have not been interfered with since they were built.

Step 3: Now, as a one-off, you should tell your system to pull down the latest list of software from each archive it knows about, including the PPA you just added:

sudo apt-get update

Now you're ready to start installing software from the PPA!

On older (pre 9.10) Ubuntu systems

Step 1: Visit the PPA's overview page in Launchpad. Look for the heading that reads Adding this PPA to your system and click the Technical details about this PPA link.

Step 2: Use the Display sources.list entries drop-down box to select the version of Ubuntu you're using.

Step 3: You'll see that the text-box directly below reads something like this:

deb http://ppa.launchpad.net/gwibber-daily/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/gwibber-daily/ppa/ubuntu jaunty main

Copy those lines.

Step 4: Open a terminal and type:

sudo gedit /etc/apt/sources.list

This will open a text editor containing the list of archives that your system is currently using. Scroll to the bottom of the file and paste the lines you copied in the step above.

Save the file and exit the text editor.

Step 5: Back on the PPA's overview page, look for the Signing key heading. You'll see something like:

1024R/72D340A3 (What is this?)

Copy the portion after the slash but not including the help link; e.g. just 72D340A3.

Step 6: Now you need to add that key to your system so Ubuntu can verify the packages from the PPA. In your terminal, enter:

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 72D340A3

Replace 72D340A3 with whatever you copied in the step 5.

This will now pull down the PPA's key and add it to your system.

Step 7: Now, as a one-off, you should tell your system to pull down the latest list of software from each archive it knows about, including the PPA you just added:

sudo apt-get update

Now you're ready to start installing software from the PPA!

Read more about Personal Package Archives in our help wiki.


설치 완료!
근데 php 5.3.x 가 깔렸는데
그 버젼에선 젠트옵티마이저가 안된다.
그래서 php 5.2.x로 다운그레이드 해야겠다 ㅠㅠ

역시 구굴링


아.. php5.2.10을 설치했는데 
php 속도가 0.0105550289154 가 나왓다.
5.3.x에서는 0.007~이 나왔었는데 ㅠㅠ

그래서 다시 젠드옵티마이저 포기하고 5.3으로 가야겠다.
아놔 삽질

Posted by 아이맥스
PHP2011. 5. 8. 17:41

<ImageButton android:layout_height="44dip"
       android:layout_width="fill_parent"

       android:padding="2dip"
       android:scaleType="centerCrop"
       android:src="@drawable/ppsal_submit"
       android:background="@null"
 />

Posted by 아이맥스