놀랍습니다. 썰렁하던 MovableType의 editor가 이렇게 변신합니다..ㅡㅜ 감동
간단히 설명 드리면, HTMLArea란 독립의 HTML Editor를 MovableType에 붙여버리는 겁니다.
작업도 매우 간단합니다. 다음과 같이 따라하시면 됩니다. 영문버전 원본설명은
여기 있습니다.
자 그럼 시작해볼까요? ^^
1 . HTMLArea 3.0 rc-1 다운받아서 풀기.
2 . StaticWebPath 밑, 즉 MovableType설치된 디렉토리 밑에다가 htmlarea 란 폴더를 만들고 거기다가 올립니다.
3 . tmpl/cms/header.tmpl 을 열어서 <head>…</head> tag사이에 아래코드를 추가합니다.
마지막쯤에 대충추가하면 됩니다.
<script type="text/javascript">
_editor_url = "<TMPL_VAR NAME=STATIC_URI>htmlarea/";
_editor_lang = "en";
</script>
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/htmlarea.js"></script>
<script type="text/javascript">
HTMLArea.loadPlugin("SpellChecker");
function initDocument() {
var editor1 = new HTMLArea("text");
editor1.registerPlugin(SpellChecker);
editor1.config.pageStyle = "@import url(custom.css);";
editor1.generate();
var editor2 = new HTMLArea("text_more");
editor2.registerPlugin(SpellChecker);
editor2.config.pageStyle = "@import url(custom.css);";
setTimeout(function() {
editor2.generate();
}, 500);
};
</script>
<body>태그는 아래로 대체합니다.
<body onload="initDocument()">
4 . 위에 고친 파일을 header_htmlarea.tmpl 란 이름으로 MTDIR/tmpl/cms에 올립니다.
5 . tmpl/cms/edit_entry.tmpl 파일을 열어서 다음과 같은 행을 교체합니다.
<TMPL_INCLUDE NAME="header.tmpl">
아래 행으로 교체합니다. 거의 제일 첨에 있습니다.
<TMPL_INCLUDE NAME="header_htmlarea.tmpl">
다음으로 quicktags 를 쓰시던 분은 다음과 같이 시작하는 두개의 코드만 지워버리면 됩니다.
<script type="text/javascript">
<!–
if (canFormat) {
with (document) {
write(’<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form. 어쩌고~~
quicktags를 쓰지 않으시는 분은 위에꺼 삭제하시고, 그 부분 3줄밑에 다음을 추가하시면 됩니다. 3줄 밑이면 <textarea …> 다음입니다. ^^ quicktags설치하신 분들은 이미 아래부분이 추가되어있으니깐 그냥 놔두시면 됩니다.
<script type="text/javascript">var edCanvas = document.getElementById(’text’);</script>
6 . 마지막으로 edit_entry.tmpl 파일을 저장하고 MTDIR/tmpl/cms에 위치시킵니다.
7 . HTMLArea에 있는 css파일보다는 이 CSS파일 이 좀더 모양이 예쁩니다.
자~~ 끝났습니다~ 질문 있으신 분은 손~~ MT version2의 경우에도 위치만 틀릴뿐입니다.
음. 다 해놓고 보니 HTMLArea말고도 여러가지가 더 있더군요.
지금은 FCKEditor 테스트 중입니다. 툴바는 요렇게 생겼습니다.
설치는 거의 똑같고 header_htmlarea.tmpl대신 header_fck.tmpl을 만들고 tmpl/cms/edit_entry.tmpl 에서 불러들이면 됩니다. header_fck.tmp은 아래 참고
<script type="text/javascript"
src="<TMPL_VAR NAME=STATIC_URI>FCKeditor/fckeditor.js">
</script>
<script type="text/javascript">
function initDocument() {
var oFCKeditor = new FCKeditor( ‘text’ ) ;
oFCKeditor.Width = 580 ;
oFCKeditor.Height = 700 ;
oFCKeditor.CheckBrowser = true ;
oFCKeditor.ReplaceTextarea() ;
var pFCKeditor = new FCKeditor( ‘text_more’ ) ;
pFCKeditor.Width = 580 ;
pFCKeditor.Height = 400 ;
pFCKeditor.CheckBrowser = true ;
pFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
추가로 fckeditor.js 파일 안에 보시면 this.BasePath을 정확히 지정해주셔야만 제대로 뜹니다.
FCKeditor가 더 크고 약간 느리지만, 더 깔끔하네요. ^^ 이제 이놈 쓸랍니다.
Posted by kaicy on April 2nd, 2005 :: Filed under
Blog Setup Tags ::
mt