FCKeditor_2.6.4 을 다운로드 받았습니다.
기존에도 하위버젼을 사용한적은 있지만, 제가 셋팅한것도 아니고 해서...
겸사겸사 사용을 해 보았습니다.
이미지 업로드 부분에서 많이 애를 먹었는데요.
결국 찾아냈습니다.
다들 잘 설치하여 사용하시나봅니다 -_-; 저만 모르는건가봐요 ㅠㅠ
하지만 태연사진이 잘 업로드 된걸 보면, 뿌듯합니다.
으하하하하하.
1. FCK 에디터 사이트로 이동합니다.
2. 상단메뉴의 DownLoad를 선택합니다.
3. 최신자료의 버젼이 출력되고, 어떤 파일로 다운로드 받을것인지를 선택합니다.
아래 보시면 알겠지만, 최신버젼은 2.6.4 입니다. 전 zip으로 받았습니다.
FCKeditor 2.6.4 버전을 다운로드 받게됩니다.
5. 압축을 푸신뒤, 원하는 경로에 해당 폴더를 통채로 넣으시면 되구요^^
저는 그냥 Editor라는 이름으로 변경하여, Root 하위 경로로 넣었습니다.
6. 기본 설정을 변경해줘야 하는데요.
일단 Config.asp 의 설정입니다. 해당 경로는 아래와 같습니다.
Root\Editor\editor\filemanager\connectors\asp\config.asp
' Path to user files relative to the document root.
' This setting is preserved only for backward compatibility.
' You should look at the settings for each resource type to get the full potential
Dim ConfigUserFilesPath
ConfigUserFilesPath = "/userfiles/"
굵게 표시한 부분이 바로 이미지 업로드시 저장될 경로입니다.
저는 위의 탐색기 이미지에서 보시는것과 같이, Root 하위에 Userfilesm(기본셋팅값)으로 명명하였습니다.
7. 그리고 fckconfig.js 파일의 설정 또한 변경해 주어야 합니다.
Root\Editor\fckconfig.js
FCKConfig.DefaultLanguage = 'ko' ;
이 부분은 기본언어를 설정하는 부분입니다. 기본셋팅값은 en으로 되어있습니다.
8. 또 변경해야 하는것이, 사용하실 언어의 설정입니다. 저는 asp로 개발할것입니다.
var _FileBrowserLanguage = 'asp'; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage ='asp'; // asp | aspx | cfm | lasso | perl | php | py
일단 저는 이정도 셋팅을 마치고 업로드 테스트를 마치고 나니, 정상적으로 업로드 되는것을 확인하였습니다.
아래는 에디터를 출력한 페이지의 모습이구요.
이미지 업로드 버튼을 누르면,
찾아보기 하고난뒤, [서버로 전송] 클릭.
성공적으로 업로드 되었다는 메시지가 출력됩니다.
기본설정에서는 동일한 이름의 파일을 업로드 할 경우, 파일명을 변경하라는 메시지가 출력됩니다.
정상적으로 등록이 되면, 이미지의 설정을 마무리하는 탭메뉴로 이동합니다.
예를 누르시면, 아래의 이미지와같이 정상적으로 이미지가 등록되는것을 확인하실 수 있습니다.
<p><img height="333" width="250" alt="" src="/userfiles/bcadc7f6_dnwjdguswn_cau57.jpg" /></p>
이러한 소스코드를 확인하실 수 있습니다. 제가 설정한 userfiles 폴더에 잘 저장이 되었군요^^
FCKEditor초기 세팅방법
최근 FCKEditor를 2.4X버전에서 플래시로 업로드 하는 문제 땜시 2.64로 업데이트를 했다.
업데이트를 하면서 초기설정을 어떻게 변경해야하는지 기억이 안나서 한참을 해맸다. ㅠㅠ
이제 문서로 작성해두면 다음업그레이드에서는 별 문제없이 할수 있으리라고 생각한다.
1. fckconfig.js수정사항
FCKConfig.DefaultLanguage = 'en' ;
-> FCKConfig.DefaultLanguage = 'ko' ;
FCKConfig.ToolbarSets
-> 기존설정을 만들어 놓은것 복사
asp프로그램을 사용한다고 체크
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
-> var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
-> var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
이부분 설정하는 방법을 잊어버려서 프로그램이 안되서 한참을 해맸다. 반드시 사용하는 프로그램으로 변경해야한다. 이부분만 변경하면 일반적으로 사용하는데는 문제가 없다.
링크브라우저 삭제
FCKConfig.LinkBrowser = true ;
-> FCKConfig.LinkBrowser = false ;
이미지 브라우저 삭제
FCKConfig.ImageBrowser = true ;
-> FCKConfig.ImageBrowser = false;
플래시 브라우저 삭제
FCKConfig.FlashBrowser = true ;
-> FCKConfig.FlashBrowser = false;
링크 업로드 삭제
FCKConfig.LinkUpload = true ;
-> FCKConfig.LinkUpload = false;
이미지 설정 자세히 탭 삭제
FCKConfig.ImageDlgHideAdvanced = false ;
-> FCKConfig.ImageDlgHideAdvanced = true ;
플래시 설정 자세히 탭 삭제
FCKConfig.FlashDlgHideAdvanced = false ;
-> FCKConfig.FlashDlgHideAdvanced = true ;
2. config.asp수정사항
ConfigUserFilesPath = "/userfiles/"
-> ConfigUserFilesPath = 해당업로드 root로 설정
// 한글파일업로그에 문제갈 발생해서 항상 새로운 파일명으로 저장하도록 수정한다.
sFileName = SanitizeFileName( sFileName )
-> sFilename = 새로운 파일이름
위의 내용을 수정하고 에디터를 업그레이드하면 문제없이 사용할 수 있다.
참고 : http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
----------------------------------------------------------------------------------------------------------------
처음 FCKEditor를 적용하면서 정리를 해봤는데..많은 부분이 부족한듯 --;; 시간나면 다시한번 정리를 하겠습니다.
- FCKEditor 이미지 업로드 및 삽입방법
- 기존내용 수정 및 추가
● FCKEditor 홈페이지 : http://www.fckeditor.net
다운로드 - 언어별 fckeditor를 다운로드 받을 수 있습니다.
Demo - editor features , multi language , toolbar selection , skin support
다운로드 페이지에서 FCKeditor 2.2 zip파일을 다운로드 받아 적용해보았습니다.
fckeditor 적용 참조페이지
< 적용방법 >
1. 압축을 푼후 fckeditor폴더를 서비스웹사이트 root폴더에 푼다.
sample 페이지와 testcase페이지들은 바로 확인할 수 있습니다.
sample파일 : 서비스URL입력 + /FCKeditor/_samples/ 폴더 밑 default.htm파일
- FCKEditor홈페이지의 Demo와 동일한 내용.
testcase파일 : 서비스URL입력 + /FCKeditor/_testcases/ 폴더 밑 001.htm~010.htm 파일
- 001.htm~010.htm분석하면 fckeditor를 적용하는데 한결 용이해질것입니다.
2. 에디터가 들어가는 페이지에 인클루드한다.
게시판의 경우 글쓰는 페이지.
[!-- #INCLUDE VIRTUAL="/FCKeditor/fckeditor.asp" --]
3. 편집기가 들어가는 위치에 다음의 코드를 삽입한다.
[%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/FCKeditor/"
oFCKeditor.Create "FCKeditor1"
%]
FCKeditor1"은 처리페이지에서 사용하는 변수명이 된다.Request.Form("FCKeditor1")
4. 브라우져를 통해 확인한다.
/_samples/asp/폴더 밑에 있는 예제파일을 통해 에디터 적용방법 및 데이타 받는 방법을 참조할 수 있다.
< 기타 설정 >
◆ 설정사항
설정파일 - /FCKEditor/fckeditor.asp에서
Private Sub Class_Initialize()
sBasePath = "/FCKeditor/" 'FCKeditor 경로
sWidth = "100%" '너비
sHeight = "200" '높이
sToolbarSet = "Default" '툴바 스타일
sValue = "" '처음 editor로딩시 편집창에 보여지는 텍스트
Set oConfig = CreateObject("Scripting.Dictionary")
End Sub
위의 값들을 환경에 따라 수정한다.
(이 값들을 수정하면 fckeditor가 들어가는 모든 창에 일괄적용될 것이다.)
또는 fckeditor가 들어가는 곳의 삽입코드부분(위 적용방법 3번코드)을 수정하여
각각의 fckeditor를 환경설정할 수 있다.
[%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/FCKeditor/"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "250" '<- 높이변경
oFCKeditor.ToolbarSet = "Default" '<-메뉴스타일 변경
oFCKeditor.Value = "이곳에 내용을 입력하세요!!" '<-초기 텍스트 변경
oFCKeditor.Config("UseBROnCarriageReturn") = true '<-Enter키 사용시 br적용
oFCKeditor.Create "FCKeditor1"
%]
oFCKeditor.Config함수를 이용해서 키값에 value를 넣어 수정
◆ Enter키 사용시 br태그 적용방법 (default - p태그)
/FCKEditor/fckconfig.js에서 FCKConfig.UseBROnCarriageReturn 항목값을 true로 변경
◆ FCKeditor 제공하는 기본 언어/메뉴/스킨 변경
/FCKeditor/_sample폴더 밑에 sample파일 참조
<%
Dim sBasePath
sBasePath = "/FCKeditor/"
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = sBasePath
%>
1. 언어변경 : sample2.asp 참조
oFCKeditor.Config("DefaultLanguage")
2. 메뉴변경 : sample3.asp 참조
oFCKeditor.ToolbarSet = Request.QueryString("Toolbar")
value = Default , Basic
3. 스킨변경 : sample4.asp 참조
oFCKeditor.Config("SkinPath") = sBasePath + "editor/skins/" & Request.QueryString("Skin") + "/"
value = default.office2003,silver
◆ 도구모음 중 불필요한 도구 제거하기
/FCKeditor/fckconfig.js 파일에서
FCKConfig.ToolbarSets["Default"] 항목의 값중에 필요없는 도구를 제거한다.
◆ 아이콘 경로가 현재위치(/FCKeditor)부터 적용되어 있는걸 URL을 포함시키는 방법.
/FCKeditor/fckconfig.js 파일에서
[아이콘 경로]
FCKConfig.site_root_url = "url입력";
FCKConfig.SmileyPath = FCKConfig.site_root_url + FCKConfig.BasePath + 'images/smiley/msn/' ;
이미지 및 플래시 경로 변경도 비슷할듯 테스트 해봐야...
◆ FCKeditor 값 전송시 처리방법
replace함수를 써서 " -> ' 으로 변환한다.
content = replace(Request.Form("FCKeditor1"),"""","'")
ps) FCKeditor는 입력값이 html변환시 내용중 "은 "로 변환되어 전송받은 페이지에서 정상적으로 보여지나, 입력값중에 태그에 의해 자동생기는 "은 전송받은 페이지에서 그대로 넘겨받아 해당페이지의 태그 속성값과 충돌이 생겨 깨진다. 이를 위해 넘기는 "은 '으로 변환한다.
◆ 전송받은 페이지에서 한글깨짐 처리방법
[%@ CodePage='949' Language="VBScript"%] 삽입
덧글