개발자(開發者) a developer

Requirement

• Movable Type 3.2
• PHP, FCKeditor의 미디어 브라우져/업로더 이용시

Features

• 일반 textarea(FCKeditor창이 아닌)창의 크기를 동적으로 변경할 수 있습니다.
• FCKeditor창의 크기를 커스터마이징할 수 있습니다.
• 이모티콘과 업로드한 파일을 저장할 UserFiles 폴더의 경로를 커스터마이징할 수 있습니다.
• MT시스템의 템플릿을 이용해 FCK에디터의 템플릿 기능을 쉽게 이용할 수 있습니다.
• MT시스템의 템플릿을 이용해 FCK에디터의 스타일 기능을 쉽게 이용할 수 있습니다.
• alogblogMTinterface의 "classic, sky, peach" 스타일에 맞춘 FCK 스킨을 이용할 수 있습니다.
• FCKeditor의 미디어 브라우져/업로더를 쉽게 이용할 수 있습니다.

Installation

아래 내용을 차분히 따라 하면 됩니다. 실제 FCKeditor 사용만을 위해선 1번의 설치후에 5,9번 단계의 간단한 확인 조치만 하면 가능합니다. 나머지 단계는 FCKeditor의 템플릿/스타일 기능을 MT내에서 편하게 사용할 수 있도록 하기 위한 별도의 추가 조치입니다.

1. 이 플로그인을 받아, (mt home) 폴더 밑에서 $ tar xvfz alogblogMTinterface_fck-3.2.04.tar.gz 등과 같은 명령을 통해 풀어줍니다.
   
2. (mt home) 폴더 밑에서 $ perl   tools/add-default-templates 명령을 실행합니다.
   ( *** 만약 터미널 환경에서 이 명령을 실행할 수 없는 상황인 경우엔, 직접 이 명령이 하는 일련의 과정을 수행해주면 가능합니다. )
   
   
3. (mt home)/mt-static/FCKeditor 폴더로 가서 $ chmod -R 777 UserFiles 등의 명령으로 모든 권한을 부여합니다.
   

Trial for verification

FCKeditor를 디폴트로 설정

"Create New Entry"을 눌러 새 엔트리 작성 화면을 열어 봅니다. 아마 FCKeditor가 나타나지 않을 겁니다. 그건 새로운 엔트리의 "Text Formatting" 이 "Convert Line Breaks"로 디폴트로 되어 있기 때문입니다. 디폴트로 FCKeditor를 사용하길 원한다면 블로그 설정에서 "New Entry Default"탭 메뉴에서 FCKeditor를 디폴트 텍스트 포맷팅으로 정해주면 됩니다.

링크/이미지/플래시 브라우져와 업로더

링크 브라우져라는 것은 엔트리 내에 a태그 즉 링크를 삽입할 때, 그 해당 자원의 주소href의 대상을 내 블로그 서버에 있는 어떤 자원을 가리키고자 할 때 사용하는 것입니다. 이미지/플래시도 마찬가지지만 각각의 파일타입에 맞게 제한되는 것만 다릅니다.

먼저 "이미지 삽입" 메뉴버튼을 클릭해 봅니다. 그럼 팝업창이 뜹니다. 여기에서 소위 "업로더"와 "브라우져" 두가지의 조금 다른 방식으로 파일을 서버에 올릴 수 있습니다. Uploader의 경우에는 특정한 서브폴더를 지정할 수가 없고 그냥 UserFiles밑의 특정 폴더밑에만 바로 올립니다. 만약 자신의 별도로 서브폴더를 나눠서 사용하지 않는 상황에서, 이미 올린 파일이 아니라, 지금 새로 올리면서 그 파일을 링크/이미지/플래시의 주소로 이용하고자 할 경우에 편리합니다.

그 팝업창에서 "서버 보기"를 클릭하면 소위 "브라우져" 기능을 이용하는 게 됩니다. 말그대로 해당 파일타입관련한 폴더 밑에다 새로운 서브 폴더를 생성할 수도 있고, 거기에 파일을 올릴 수도 있습니다. 이때 새로운 폴더생성이 되지 않거나, 파일 업로드가 안되면 100에 98, 폴더 퍼미션 문제입니다.

이제 시험삼아 이미지 폴더에 테스트 용으로 올려놓은 cat 이미지 파일과 플래시 파일을 한번 엔트리에 삽입해 봅니다.

FCKeditor의 템플릿/스타일 기능 사용을 위한 준비

지금껏 설치하고 설정한 단계만으로도 충분히 위지윅 기능을 바탕으로 에디터를 사용할 수 있습니다. 만약 지금까지의 단계로도 머리가 조금 복잡하다면, 이하 내용은 당장에 안보셔도 전혀 상관이 없습니다. 이 에디터를 익숙해질 정도로 사용하신 후, FCKeditor의 템플릿과 스타일 기능에도 관심이 생길 때, 아래 내용을 습득하셔도 됩니다.

지금까지의 사항만으로 위지윅 기능과 미디어 브라우져/업로더를 이용하여 편리한 블로깅 환경을 만들 수 있지만, 이것만으로는 FCKeditor의 고급기능과 또 이를 뒷받침하기 위한 이 플러그인의 기능을 다 이용하는 것은 아닙니다. 템플릿과 스타일 지정을 MT의 템플릿 메뉴에서 커스터마이징할 수 있다는 점이 이 플러그인의 최대 특징입니다. 아래 내용을 따라 준비를 합니다.

1. 먼저 System Overview 아래의 "List Weblogs" 페이지로 가서 현재 생성되어 있는 모든 블로그를 선택한 후에, "Add Default Template(s)" 액션을 실행합니다.
2. 현재 블로그의 "List Template" 페이지로 가보면, 세 개의 FCKeditor 관련 템플릿을 볼 수 있습니다. 그 각각을 열고 Rebuild 를 해줘서 output file을 만들어 줍니다.
3. 현재 블로그의 스타일스트 관련(styles-site.css) 템플릿을 열고 그 맨 첫줄에 @import url(fck_editorarea.css); 를 한줄 추가/리빌딩합니다.

* 어쩜 MT의 인덱스 템플릿 목록창에 난데없이 세개의 FCKeditor관련 템플릿이 있어서 의아해 하실수 있을지 모르겠습니다. 이 3개의 템플릿은 이미 설치과정에서 "디폴트" 템플릿으로 MT에 기록시켰고 또 현재 생성되어 있는 모든 블로그에 추가를 마쳤기 때문에 나타난겁니다. "디폴트" 템플릿이 되었다는 것은, 향후에 새로운 블로그를 생성시, 위의 세 템플릿도 같이 생성되어 진다는 뜻입니다. 물론 TemplateRefesh같은 액션을 적용할 수도 있게 됩니다. 이게 먼 소린지 잘 모르시면 설치과정의 2단계에서 있는 addDefaultTemplate 플러그인 페이지를 보시기 바람니다.

FCKeditor 템플릿:

FCKeditor 메뉴바에 있는 "템플릿" 버튼을 클릭해 봅니다. 나타나는 팝업창에서 "Plugin Document"을 한번 선택해 봅니다. 이 템플릿 기능을 이용하면 해당 창에 있던 기존의 내용은 사라지므로, 항상 처음에 템플릿 기능으로 사용해야 합니다. 제가 만들어놓은 플러그인 문서에 맞는 템플릿이 창에 삽입이 되어 나타나면 설정이 잘되어 있다는 뜻입니다.

일반적인 신변위주의 블로그 엔트리의 경우 특별한 문서 템플릿이 필요없지만, 현재 보고 계신 제 플러그인 페이지처럼 특정한 목적을 위해 사용할 경우 보통의 워드프로세서같은 곳에서 흔히 사용하는 템플릿 기능이 많이 요구되어 지는데, 이때 사용하는 것입니다.

만약 이 템플릿 기능을 이용해 나만의 템플릿을 만들어 사용하고 싶다면, MT의 템플릿 메뉴로 가서 "FCKeditor Templates" 라는 이름의 인덱스 템플릿을 열고, 거기에 추가/변경해서 저장/리빌딩해주면 됩니다. 이때 그 출력파일명(fcktemplates.xml)은 변경하면 안됩니다. 열어서 그 내용을 대충 보시면, 어려울건 없습니다. 그 신택스는 매우 직관적이므로 한두번 훑어보면 알 수 있으리라 봅니다.

FCKeditor 스타일

FCKeditor 등과 같은 소위 WYSIWYG에디터의 가장 큰 단점은 바로 폰트의 크기/색상/종류 등을 font태그를 이용해서 마구잡이로 엔트리 내에 하드코딩시킨다는 것입니다. 물론 초보자의 경우엔 별다른 준비없이 간단히 원하는 표현을 즉석에서 사용할 수 있다는 장점으로 작용하지만, 일반적으로는 피해야하는 작성 습관/태그라 할 수 있습니다. 만약 자신이 특정한 표현을 자주 사용한다면 그것을 스타일로 지정해두고, FCKeditor의 스타일 메뉴로 해결하는 것이 좋습니다. 이때 원하는 스타일을 담고 있는 스타일시트는 당연히 FCKeditor에서도 참조하고, 또 실제 출력된 페이지에서도 참조할 것입니다. 이 역할을 MT내에서 쉽게 할 수 있도록 이미 설치과정에서 지겨움을 참고 끝마쳤으므로 실제 사용시엔 그냥 위의 템플릿과 동일한 과정으로 MT의 템플릿 목록에서 "FCKeditor CSS" 와 "FCKeditor CSS Mapping" 템플릿을 열어서 커스터마이징하면 됩니다. 맵핑 파일의 경우에도 마찬가지로 매우 직관적이라 쉽게 그 문법을 이해할 수 있을 것입니다.

테스트 엔트리 Publishing

이 플러그인에는 HTMLArea에 포함되어 있는 작은 형태의 이모티콘도 같이 넣었습니다. 이런 저런 다양한 아이템을 엔트리에 추가해보고(반드시 하나 이상의 스타일 적용해 볼 것) 그것을 퍼블리싱합니다. 이때 결과 페이지에서 특히 스타일이 FCKeditor상에 나타난 것이랑 같게 적용이 되나를 확인합니다. 이는 설치단계의 8번이랑도 연관이 됩니다. 혹 스타일이 제대로 결과 페이지에 나타나지 않는다면... 위 설치단계를 다시 한번 확인하세요.

선택적 개인화(customization)

FCKeditor 창의 높이

FCKeditor 창의 높이도 동적으로 변경할 수 있도록 관련 API를 찾아 보았지만 없어서, 대신에 MT의 각 블로그 아래의 플러그인 설정에서 본문/확장문 각각 창의 높이를 설정할 수 있도록 했습니다. 텍스트 포맷팅을 "none이나 Convert Line Break"로 사용시엔 동적으로 변경가능합니다.

이모티콘

이모티콘은 특히 W~G에디터에선 쉽고 비교적 자주 사용하는 아이템입니다. 이 이모티콘은 그 특성상 특정한 블로그에 전용하다기 보단, MT인스턴스로 생성한 모든 블로그에 공통된 자원입니다. 일단 기본으로 위의 설치 과정을 따르면 (path/to/mt)/mt-static/FCKeditor/emoticons/ 폴더 아래에 이모티콘 파일들이 존재합니다. 만약 여러분의 MT설치 특성상 그 설치 경로가 꽤 깊거나 혹은 이미 기존의 다른 폴더를 공통의 이미지파일 폴더로 사용하고 있어서 이를 계속 유지하고 싶은 경우에 이를 설정해 줄 수 있습니다. 먼저 위 디폴트 경로 아래에 있는 파일들을 원하는 다른 곳에 옮긴 후에 그 변경된 경로를 MT의 "System Overview"내의 플러그인 설정란에서 지정해주면 됩니다.(이모티콘은 모든 블로그에 공통된 자원이기 때문에, 이 경로설정을 개개의 블로그밑이 아닌 시스템밑의 플러그인 설정란에서 하는 것입니다.)

UserFiles

"UserFiles"이라는 이름은 FCKeditor에서 디폴트로 사용하는 폴더명입니다. 이 폴더 밑에 File,Image,Flash등의 서브 폴더가 생기고 그 각각의 아래에 해당 파일들을 업로드하는 식입니다. 위의 설치과정을 따르면 이 경로가 "path/to/mt/mt-static/FCKeditor/UserFiles/"로 됩니다. 이 의미는 무엇일까요? 하나의 MT인스턴스로 생성한 모든 블로그가 공통된 저 경로밑에 파일들을 업로드하고 관리한다는 소립니다. 머 그렇게 사용할 수도 있겠지만, 또 다른 경우에는 각각의 블로그마다 각기 다른 곳(이를테면 바로 각각의 블로그 루트 경로 아래에)에 UserFiles폴더를 두고 각기 독자적으로 관리하고 싶은 경우가 왜 없겠습니까? 이럴땐 마찬가지로 원하는 폴더를 만들어 주고(꼭 UserFiles라는 이름일 필요도 당연히 없겠죠, 다만 관례상 그런 이름을 사용하면 차후에라도 이 폴더가 FCKeditor랑 관련있는 거구나...정도 할순 있겠죠) 그 경로를 MT메뉴의 플러그인 설정란에서 해주면 됩니다. 당연히 이 경로는 블로그마다 설정해주는 개념이므로 각 블로그밑의 플러그인 설정페이지로 가야 되겠죠?

FCKeditor의 툴바 등 기타 변경

이미 에디터의 툴바를 제가 적절히 커스터마이징해서 배포하고 있지만, 사람 취향이 제각각, 분명 난 다르게 툴바를 배치/선택하고 싶다!라는 생각이 없을수 없겠죠. 만약 그런 위험한(^^) 생각을 하셨다면 (mt home)/alt-tmpl/cms/header.tmpl 파일 내에서 적절한 키워드로 찾아서 수정하시면 됩니다.

예를 들면, 폰트 종류/크기 등의 메뉴를 좀더 다양하게 늘려주고 싶다는 생각은 누구나 본능적으로 하게 될거라 봅니다. 버뜨! 참으세요. 앞서 말씀드렸다시파, font태그를 지저분하게(?) 삽입하는 것은 배보다 배꼽이 더 큰 불량 엔트리로 가는 길이기 때문입니다. 가능하다면 자주 사용하는 스타일을 MT템플릿상에서 간편히 만들어 효율적으로 사용하십시요. 이 방법만이 차후에 업데이트 혹은 이런 저런 이유로 재설치시 등마다, 또 다시 FCKeditor 소스를 침투해서 방황하는 무모한 짓을 번번히 되풀이 하지 않는 유일한 길입니다. 그럼에도 불구하고(^^;;;) 초심자를 위해 폰트의 종류/크기 등을 변경하고 싶다면 그 또한 타당성이 있어보입니다. 혹 그런 경우엔 앞선 header.tmpl 파일과 (mt home)/mt-static/FCKeditor/ 폴더 밑의 소스를 뒤져서 헤쳐나가시면 됩니다.

FCKeditor의 source/config 레벨에서 좀더 특화된 customization을 감행하실 경우엔 충분한 지식을 가지고 하시길 바람니다. 또한 그로 인한 어떤 문제에 대해 저에게 도움을 요청하진 말아 주십시요.^^

Trobuleshooting

• FCKeditor를 플러그인화하면서 종종 에디터가 나타나지 않는 등의 문제가 생겼는데 그런 원인의 대부분이 바로 클라이언트측의 브라우져 환경에 기인하는 것이었습니다. 특히 팝업 필터같은 것을 요즘엔 많이 사용하는데 이것이 FCKeditor의 생성, 미디어 브라우져의 착동 방해 등의 주요원인입니다. 혹 그런 경우에는 필터를 끄거나 혹은 예외목록등을 이용하십시요.
• 만약 FCKeditor의 브라우져를 원할히 사용할 수 없는 경우의 태반은 앞선 UserFiles/ 폴더 이하 서브폴더 등의 생성/저장 등의 권한 부족문제입니다.
• 혹 Firefox/Mozillar 에서 엔트리 저장시 공백 페이지만 나타나고, 원 엔트리 작성 페이지로 돌아오지 않는 경우가 생기는 재수없는(^^) 경우를 겪을 수도 있습니다. 이의 직접적인 원인제공 소스는 잘 모르지만, 확실한 것은 MT의 리다이렉션 방법 때문이라는 것입니다. 물론 디폴트 상태의 MT에서는 문제가 없습니다. 대부분이 HTTP의 Location헤더 방법으로 리다이렉션하기 때문입니다. 그런데 만약 설치한 어떤 플러그인이나 기타 원인으로 리다이렉션을 HTML의 META 태그를 이용해 하는 경우에, Firefox + FCKeditor의 환상적 조합에서 약간의 불협화음을 낸다고 합니다. 이런 재수없는 경우가 혹 발생시엔, 이런 점을 중점으로 먼저 설치한 플러그인을 불활성시켜보는 등의 방법으로 공략하십시요. 특히 제가 만든 Cool IRI라는 매우 훌륭한(?) 플러그인이 바로 그 재수없는 케이스를 발생시켰었습니다. 혹 구버전을 쓰셨던 분중에 FCKeditor를 Firefox상에서 사용하실 분들은 신버전으로 업데이트하십시요. 일반적으로 흔치 않은 에러입니다.

Notes

앞서도 약간 말씀드렸다시피 FCKeditor의 기능에 대한 문의나 그 자체의 에러 등은 제 능력 밖이라는 말씀을 드립니다. 특히나 FCKeditor를 제가 제공한 기능 외에 한층 커스터마이징을 시키는 등에서 발생하는 문제는 더더욱 그러합니다. 물론 제가 공개/배포한 범위 내에서의 문제에 대해선 얼마든지 환영입니다. 이를테면, "Entry Body에서의 FCK는 잘 작동하는데 Extended Entry의 창에서 이런 저런 놈은 저런 이런 문제를 발생시킨다. 왜 그런가? (답: 새 컴퓨터를 구입하세요)" 라는 것이 전형적인 이 플러그인 관련한 질문의 한 예일 것입니다. FCKeditor 등의 W~G 에디터 프로그램은 매우 매우 복잡한 프로그램이면서 특히나 브라우져의 특성에 매우 민감한 것입니다. 이 플러그인을 만들면서 FCKeditor의 Wiki사이트 등을 눈팅하면서 느낀 건, 그 (재수없는 경우) 발생하는 원인 모를(더우기 답은 더 잘모를) 비정상적 작동의 경우의 수가 많다는 점이었습니다. 혹 그러한 경우엔 과감히 이를 눈물을 머금고 포기하시고, EnhancedEntryEditing 과 같은 조금 저수준(^^)의 다른 플러그인를 시도해보시길 바랍니다.

FCKeditor와 Movable Type을 연결해 주는 이 작은 플러그인이 맘에 드신다면, 주변분에게 알리는 간단한 엔트리 하나 로깅하시는 센스.

License

FCKeditor follows its own copyright.
Relased under the Creative Commons License.

Version History

• 3.2.04: FCKeditor 2.1.1 newly added. / Error "Can't call method "preferred_language"..." fixed, thanks dusl for reporting it.
• 3.2.03: Chinese CSS version added.
• 3.2.02: Korean/Japanese CSS version added.
• 3.2.01: for MT 3.2
• 1.0 : Initial but not released, for MT3.17