setup/개발 관련2010. 4. 7. 16:01

#FCKeditor 적용하기
방법 1> php include
적용하려는 파일에 아래 소스를 적용한다.
경로>http://localhost/fckeditor_load.php : fckeditor_load.php(본인이 만든 파일)

소스예>
<?php include "/fckeditor/fckeditor.php"; ?>

fckeditor가 삽입될 위치에 다음의 소스를 삽입한다.

<?php
$objFCK= new FCKeditor('content');         // textarea name
$objFCK->BasePath = '/fckeditor/';
$objFCK->Value      = $content ;              // 로딩시 출력할 내용
$objFCK->Width      = 400;                       // 가로 크기

$objFCK->Height     = 300;                       // 세로 크기
$objFCK->Create();
?>

방법2> javascript
소스예> http://okkks.tistory.com/703


방법3> javascript
소스예>
<form>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var objFCK= new FCKeditor('FCKeditor1');

objFCK.BasePath = "/fckeditor/";
objFCK.Create();
</script>
</form>


방법4>ajax
var div = document.getElementById("FCKeditor1");
var objFCK= new FCKeditor("FCKeditor1");
div.innerHTML = objFCK.CreateHtml();


[null을 체크하려면?]

<script type="text/javascript">
<!--
var objFCK = FCKeditorAPI.GetInstance('FCKeditor1') ;
var div = document.createElement("DIV");

div.innerHTML = objFCK.GetXHTML();

if( div.innerText == '' )
{
 alert("글 내용을 입력하세요.^^");
 objFCK.Focus();
 return;
}
//-->
</script>

<script type="text/javascript">
<!--
var objFCK = FCKeditorAPI.GetInstance('content') ;
var content = objFCK.GetXHTML(true);

if(content == ""){
 alert('글 내용을 입력하세요.^^');
 return false;
}
//-->
</script>

Posted by 은둔고수
setup/개발 관련2010. 4. 7. 15:42


#FCKeditor 설정하기 2
별도의 개인 설정 파일을 만들지 않고 해당 설정 파일을 직접 수정한다.

설정에 사용하는 파일들 :
1. fckconfig.js 수정
경로 : /fckeditor/fckconfig.js
2. config.php
경로 : /fckeditor/editor/filemanager/connectors/php/config.php
참고> asp 기반이라면
경로 : /fckeditor/editor/filemanager/connectors/asp/config.asp


[언어 설정]
- fckconfig.js
FCKConfig.DefaultLanguage = 'kr' : 언어설정(기본 en)

[툴바 설정]
- fckconfig.js
FCKConfig.ToolbarSets["Default"] = [생략]
FCKConfig.ToolbarSets["Basic"] = [생략]
위 2가지가 있으며 Default 내용을 본인이 원하는대로 수정해서 사용한다.(기본 툴바 : Default)

[업로드 설정]
- fckconfig.js
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
참고> asp 기반이라면 php 대신 asp로 변경

- config.php
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/fck_upload/' ;     // 웹상 경로
$Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].'/fck_upload/' ;
참고>업로드 디렉토리에 대한 쓰기 권한이 있어야 한다.
리눅스(Linux)라면 퍼미션을 777로 한다.


[Enter 모드 설정]
FCKConfig.EnterMode = 'p' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br




참고> 굵은글씨 부분은 본인의 설정에 맞춘다.

Posted by 은둔고수
setup/개발 관련2010. 4. 7. 14:51


#FCKeditor 설정하기 1-2
설정을 하는 방법에는 설치한 경로내에 있는 설정파일들을 직접 열어서 수정한다.
하지만 버전이 업데이트 되는 경우 그 때마다 설정파일을 새로 찾아 수정을 해야 하는 번거로움을 줄이고자
개인 설정 파일을 만들어서 설정 내용들을 별도로 관리하는 방법을 이용한다.

FCKeditor가 불러올 때 기본 설정을 먼저 불러온 후 개인 설정을 불러와서 해당 설정 부분만을 다시 변경하는
방법이다.


1. 개인 설정 파일을 만든다.
    개인 설정 파일 : myfckconfig.js (본인이 원하는 경로에 원하는 이름으로 만든다.)
    경로 : http://localhost/myfckconfig.js
    
     소스예>
     FCKConfig.AutoDetectLanguage = true ;
     FCKConfig.DefaultLanguage  = 'kr' ;

     FCKConfig.ToolbarSets["MyToolbar"] = [
           ['Cut','Copy','Paste','PasteText','PasteWord'],
           ['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
           '/',
           ['OrderedList','UnorderedList','-','Outdent','Indent'],
           ['Link','Unlink','Anchor'], 
           ['Style'],
           ['Table','Image','Flash','Rule','SpecialChar'],
           ['About']
           ] ;

      위 소스 내용처럼 본인이 원하는데로 설정할 수 있다.

      [언어 설정]
      FCKConfig.AutoDetectLanguage = true : 페이지에 설정된 언어로 자동설정(기본 true)
      FCKConfig.DefaultLanguage = 'kr' : 언어설정(기본 en)

      [툴바 설정]
      FCKConfig.ToolbarSets["MyToolbar"] = [생략]
       : MyToolbar 는 본인이 만든 설정 이름이며 내용에는 본인이 원하는 툴바들로 구성할 수 있다.

      [업로드 설정]
      var _FileBrowserLanguage = 'php' ;
      var _QuickUploadLanguage = 'php' ;

      * 기타 설정 참고
      [링크 브라우저 설정 : 기본 true]
      FCKConfig.LinkBrowser = true ;

      [이미지 브라우저 설정 : 기본 true]
      FCKConfig.ImageBrowser = true ;

      [플래시 브라우저 설정 : 기본 true]
      FCKConfig.LinkBrowser = true ;

      [링크 업로드 설정 : 기본 true]
      FCKConfig.LinkBrowser = true ;

      [이미지 설정 자세히 탭 설정 : 기본 true]
      FCKConfig.LinkBrowser = true ;

      [플래시 설정 자세히 탭 설정 : 기본 true]
      FCKConfig.LinkBrowser = true ;

2. 업로드 설정 : php
    /fckeditor/editor/filemanager/connectors/php/config.php 파일을 연 후 다음과 같이 수정한다.
    $Config['Enabled'] = true ;
    $Config['UserFilesPath'] = '/fck_upload/' ;     // 웹상 경로
    $Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].'/fck_upload/' ; 

3. 만들어 놓은 fckeditor를 사용할 fckeditor_load.php 파일에 다음 자바스크립트 소스를 삽입한다.
    소스예>
    <script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
    <script type="text/javascript">
    <!--    
    window.onload=function()
    {
      var objFCK = new FCKeditor('FCKeditor1');

      objFCK.Config["CustomConfigurationsPath"] = "/myfckconfig.js?";     // 개인 설정 파일 경로
      objFCK.BasePath = "/fckeditor/";   // fckeditor 디렉터리 경로
      objFCK.Width = "70%";
      objFCK.Height = "50%";
      objFCK.value = "";
      objFCK.ToolbarSet = 'MyToolbar' ;    // fckeditor 툴바(개인 설정)
 
      var BasePath = '/fckeditor/';
      var Skin = 'office2003';                   // fckeditor 스킨 타입
      var SkinPath = BasePath + 'editor/skins/' + Skin + '/' ;

      objFCK.Config['SkinPath'] = SkinPath ;   // fckeditor 스킨 변경
      objFCK.ReplaceTextarea();
    }
    //-->
    </script>

    <textarea name="FCKeditor1"></textarea>

참고> 굵은글씨 부분은 본인의 설정에 맞춘다.
참고> http://docs.cksource.com/FCKeditor_2.x/Developers_Guide

4. 제대로 적용되었는지 확인을 한다.
    예>http://localhost/fckeditor_load.php : fckeditor_load.php(본인이 만든 파일)


이미지 아이콘을 눌러 이미지 팝업창을 띄운다.



찾아보기 버튼을 눌러 업로드 할 이미지를 선택한 후 서버로 전송 버튼을 누른다.
업로드 성공 메시지를 확인한다.



업로드 성공한 후 미리보기로 확인 및 추가적인 설정을 할 수 있다.



업로드 이미지가 삽입되었다.
참고> 업로드 관련 에러가 발생하는 경우는 설정부분 다시 한번 차근차근 되집어 본다.

Posted by 은둔고수
setup/개발 관련2010. 4. 7. 11:26


#FCKeditor 설정하기 1-1
fckeditor를 실제 소스에 적용해서 화면에 제대로 불러와지는지 확인한다.

1. 소스에 적용하기
    - fckeditor를 사용할 fckeditor_load.php 파일(본인이 만든 파일)을 만든다.
      예>http://localhost/fckeditor_load.php
    - 후 아래의 소스를 삽입한다.

    소스예>
    <script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
    <script type="text/javascript">
    <!--    
    window.onload=function()
    {
      var objFCK = new FCKeditor('content');

      objFCK.BasePath = "/fckeditor/";   // fckeditor 디렉터리 경로
      objFCK.Width = "70%";
      objFCK.Height = "50%";
      objFCK.value = "";
      objFCK.ToolbarSet = "Default";        // fckeditor 툴바
 
      var BasePath = '/fckeditor/';
      var Skin = 'office2003';                   // fckeditor 스킨 타입
      var SkinPath = BasePath + 'editor/skins/' + Skin + '/' ;

      objFCK.Config['SkinPath'] = SkinPath ;   // fckeditor 스킨 변경
      objFCK.ReplaceTextarea();
    }
    //-->
    </script>

    <textarea name="content"></textarea>

    - 설치 경로가 다르다면 굵은글씨 부분을 본인의 설치경로에 맞춰준다.

2. 제대로 적용되었는지 확인을 한다.
    예>http://localhost/fckeditor_load.php : fckeditor_load.php(본인이 만든 파일)

[브라우저에서 확인]

참고> fckeditor가 불러와지지 않는다면 적용한 소스에서 경로 부분을 다시 확인해 본다.

Posted by 은둔고수