나의컴생활: fckeditor와 equation의 플러그인설치에 대해

꽤 괸찮은 웹에디터중 하나가 fckeditor이다 그중에 fckeditor2.6.4.1과

웹에서 수식 편집기로 꽤 괸찮은 것으로 CodeCogs Equation 이 있다.

이둘을 함치고 나면 정말 꽤 괜찮은 수식가능 웹에디터가 탄생한다.

참고로 이 글을 그것을 위해 필요한 내용을 정리한것이다.

이글을 쓰는 나는 영어를 못한다. 그래서 영어로 그들과 대화하여 한글화에 도움을 준다든가 설명서를 작성에 도움을 주지는 못하지만 그래도 그럭저럭 영어를 몰라도 대충 글을 요지를 보구 이해를 하는 편이라 영어로 된 설명서를 번역보다는 내가 아는 방법으로 설명하겠당. 자세한 사항은 모두 해당 사이트에 가서 영어로 된것을 구글의 해석기를 돌리면 그래도 꽤 괞찮은 설명서가 될것이다.

그리고 마지막으로 아마도 지금 제가 글을쓰는 것중에서 버전에 따라 라이센스를 바꾸어 버린것이 있다는 사실이다. 웹에디터의 경우는 ckeditor라는 이름으로 바꾸면서 일부 바뀌고 웹수식편집기의 경우 아예 이후 버전은 다운받을 수도 없는거 같다. 혹시 다운받아지거나 라이센스에 대해 정확한 해석이 가능하고 그것을 누구나 이용가능하다는 정확한 판단이 서면 업그레이드한 것을 작성하겠지만 그렇지 않다면 나는 지금 알고 이번전들에서 멈출것이다.

먼저 각기 웹에디터와 웹수식 편집기는 앞에서 링크된 주소에 가서 다운받으시기를 바랍니다.

만일 다운받기 힘들다면 이미 적용된 버전을 다운받을 수 있다

여기서 fckeditor_2.6.4.1.tar.gz 이것은 이미 적용된것이다. 따라서 그냥 설치하면 된다.
따로 수정할 것은 추후 나오는 파일관리부분을 수정해주어야한다. 그것은 당신의 서버에 영향을 주거나 전체적인 게시판이나 기타 프로그램과 관련된것이기 때문에 내용을 잘보고 수정하기 바란다. 아래에는 만일 이곳에서 제공하는 것이 의심스럽거나 뭔가 직접해보고 싶은 분을 위해 설명을 첨부해본다.

다운 받고 설치하고 기타 등등은 다 해당 파일설명서를 참조해서 하기 바란다.

그럼 이제 둘을 함치는 것만을 설명한다.

1. 웹에디터의 플러그인 형식으로 웹수식편집기가 들어가야한다.

그러기 위해서는 파일이 일부 추가 되거나 수정되어야하다.

먼저 플러그인에 다운 받은 웹수식편집기의 앞축을 푼다. 장소는 아래이다.

fckeditor/editor/plugins

그곳에 예를 equation이란 디렉토리를 만들고 풀었다고 가정한다.

그럼 해당 디렉토리에 들어가서 다른 부분은 손을 댈것이 없을거 같구.

fckplugin.js파일을 만들어서 넎어주면 된다.

들어갈 내용은

#######################################################

FCKCommands.RegisterCommand( 'equation' , new FCKDialogCommand( 'equation' , '수식편집기' ,FCKPlugins.Items['equation'].Path +'editor.php' , 640, 460 ) ) ;

// Create the "Find" toolbar button.
var equationItem = new FCKToolbarButton( 'equation', '수식편집기' ) ;
equationItem.IconPath = FCKPlugins.Items['equation'].Path + 'images/equation.gif' ;

FCKToolbarItems.RegisterItem( 'equation', equationItem ) ; // 'My_Find' is the name used in the Toolbar config.

var FCKEquation = new Object() ;
var dialog=null;
var EQUATION_ENGINE='http://codecogs.izyba.com';
var EQUATION_ENGINE_NOW='';//'/cgi-bin/mimetex.cgi';//자체 생성기 변환기가 있으면 적어주기 바람.

FCKEquation.Add = function( text )
{
    var oEQ = FCK.InsertElement( 'IMG' ) ;
    this.SetupEquation( oEQ, text ) ;
}

FCKEquation.SetupEquation = function( img, text )
{
    var parts = text.match( /\\f([\[\$])(.*?)\\f[\]\$]/ );
    if(EQUATION_ENGINE_NOW)
        img.src = EQUATION_ENGINE_NOW+'?'+escape(parts[2]) ;
    else
        img.src = EQUATION_ENGINE+'/gif.latex?'+escape(parts[2]) ;
    img.title='Equation';
    //img._fckequation = escape(text);
    img.alt = text ;
    dialog.Cancel();
    //FCKTools.Cancel();
}

FCK.RegisterDoubleClickHandler(function (element) {
    if (element.title == 'Equation'){
        FCKDialog.OpenDialog('equation', '수식편집기', FCKPlugins.Items['equation'].Path +'editor.php' , 640, 460 );
    }
}, 'IMG');

######################################################

이거이다.

여기서 주의 깊게 볼것이
var EQUATION_ENGINE='http://codecogs.izyba.com';
var EQUATION_ENGINE_NOW='';//'/cgi-bin/mimetex.cgi';//자체 생성기 변환기가 있으면 적어주기 바람.
이것인데 위에 있는것은 원소스의 변환기이고 아래 것은 혹시 여러분이 LaTeX의 변환기를 가지고 있다면 넣어주면 되겠다. 나머지는 원안대로 그대로 가세요.

2. 다음은 이 플러그인이 정상적으로 동작하도록 웹수식편집기도 약간 손을 봐야한다.

그것은 equation/js/eq_fck.js

이것의 일부가 플러그인 형식과 약간 동떨어져 있어서 수정한다.

#######################################################

try{
    var dialog = window.parent ;
    var oEditor = dialog.InnerDialogLoaded() ;
}catch(e){
    var oEditor = window.opener;
}
var FCKEquation=null;
var eSelected=null;
var EQUATION_ENGINE_NOW='';
// Loads the equations from the fckeditor, or create a default equations for an example
function LoadSelected()
{
// Look for fckeditor
    if(oEditor && typeof(oEditor.FCKEquation)!='undefined')
    {
    FCKEquation = oEditor.FCKEquation;
        oEditor.dialog = dialog;
        EQUATION_ENGINE_NOW = oEditor.EQUATION_ENGINE_NOW;
        if(FCKEquation)
            eSelected = oEditor.FCKSelection.GetSelectedElement();

        if ( eSelected && eSelected.tagName == 'IMG' && eSelected.title =='Equation' )    {
            var comm = eSelected.alt;//unescape( eSelected._fckequation );
            var parts = comm.match( /\\f([\[\$])(.*?)\\f[\]\$]/ );

            document.getElementById('latex_formula').value = parts[2];
            try{
                if(parts[1]=='[')
                    document.getElementById('eqstyle2').checked=true;
                else
                    document.getElementById('eqstyle1').checked=true;
            }catch(e){}
            changed = true;
            renderEqn(null);
        }
        else    {
            // Put any default equations in the line below...
            document.getElementById('latex_formula').value = '';
            eSelected == null ;
        }
    }
}

#######################################################

내용을 보면 대략 짐작이 가겠지만 창을 띄우는 방식이 약간 다름으로 거기에 맞추어 주도록 바꾼것이다. 지금 색칠 된 부분이 내가 바꾼것이다.
이렇게 바꾸는 이유는 두가지이다. 첫번째는 수정된 것이 바로 웹에디터에 붙도록 해주는 것이 하나고. 두번째는 웹에디터에서 두번 크릭시 바로 수식편집기로 연결해서 열리도록 하는것이 그것이다.

다음은 equation/js/editor.js

#######################################################

#######################################################

색칠된 부분이 수정되었는데 이유는 간단한다. 혹시 여러분이 수식 변환기를 직접 설치했다면 그곳으로 걸어서 작업할 수 있도록 한는 것이다. 굳이 수정하지 않아도 동작은 한다. 하지만 수식처리기는 여러분의 서버가 아닌 http://codecogs.izyba.com 에서 처리 될 것이다.리될 것이다.

3. 마지막으로 플러그인을 실제 추가하는 것이 있는데 기본적으로 추가 되도록 하는 방법은 있다.

fckconfig.js 에서

FCKConfig.PreloadImages = [ FCKConfig.SkinPath + 'images/toolbar.start.gif', FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif' ] ;
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;
라는 라인 다음에 아래 라인을 추가
FCKConfig.Plugins.Add( 'equation' ) ;

또 다름과같이 추가

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
    '/',
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
    ['equation'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','About']        // No comma for the last row.
] ;

이렇게 되면 환경에서 이용가능하게 된다.

4. 마지막으로 한글화가 필요하겠다. 그래서 만들어 넣었다
위치는 equation/lang/ko_ko.php 파일로 들어 가겠다.

<?php
$lang=array();

$lang['english']='영어';
$lang['french']='프랑스어';
$lang['german']='독일어';
$lang['italian']='이탈리아';
$lang['spanish']='스페인어';

$lang['help']='안녕하세요';

$lang['size_title']='수식의 글씨크기';
$lang['tiny']='Tiny'; // this refers to a font size of tiny
$lang['small']='Small';
$lang['normal']='Normal';
$lang['large']='Large';
$lang['huge']='Huge';

$lang['color']='색';   // Displayed like "Colors...", allowing users to display equations in new colors
$lang['color_title']='수식 색';
$lang['red']='빨강';
$lang['green']='초록';
$lang['blue']='파랑';

$lang['history']='과거기록'; // Displayed like 'History...', shows recent equations a user has typed
$lang['history_title']='지금까지의 사용한 수식목록';

$lang['favorites']='자주이용'; // Displayed like 'Favorites...', shows a used saved (favorite) equations
$lang['favorites_title']='자주이용하는 수식목록';
$lang['favorites_add']='자주이용 목록추가'; // adds an equation to the favorite list
$lang['favorites_delete']='자주이용 목록삭제'; // removes an equation from the favorite list

$lang['inline']='Inline';          // place equations inline within text in the parent document
$lang['inline_title']='Place equations inline with other text (by default equations are placed on a new line)';

$lang['compressed']='Compressed'; // create equations with restricted vertical height
$lang['compressed_title']='Create equations that are vertically compressed, suitable for being inline with other text';

$lang['clear']='깨끗이';
$lang['clear_title']='수식입력창을 깨끗이 한다.';

$lang['render']='변환보기';
$lang['render_title']='선택하면 아래에 입력수식을 보여준다.';

$lang['copy']='문서에 복사';
$lang['copy_clipboard']='클립보드복사';
$lang['click_here']='여기를 크릭';

$lang['intro']='LaTeX으로 수식을 입력하고 변환보기를 크릭하면 이곳에 보여집니다.';

$lang['updated']='마지막 업데이트'; // .. 27/6/2008
$lang['refresh']='(Refresh your browser if you\'ve used an older edition)';
$lang['dev']='Written by Will Bateman with assistance from Steve Mayer.';

// This message appears at the bottom of the screen when the editor is first loaded.
$lang['install']='이 편집기를 당신의 웹사이트에 설치하시려면,';

// Credits
$lang['credits']='Written by <a href="http://www.codecogs.com" target="_blank">Will Bateman</a> and <a href="http://www.mayer.dial.pipex.com/tex.htm" target="_blank">Steve Mayer</a>.';

?>
<select title="Spaces" onchange="insertText(this.options[this.selectedIndex].value); this.selectedIndex=0;">
<option selected="selected" value="" style="color:#8080ff">띄어쓰기</option>
<option value="\,">thin</option>
<option value="\:">medium</option>
<option value="\;">thick</option>
<option value="\!">negative</option>
</select>
<select title="Styles" onchange="insertText(this.options[this.selectedIndex].value, 1000); this.selectedIndex=0;">
<option selected="selected" value="" style="color:#8080ff">글자모양</option>
<optgroup label="Equation Only">
<option value="\mathbb{}" title="\mathbb{}">Blackboard</option>
<option value="\mathbf{}" title="\mathbf{}">Bold</option>
<option value="\boldsymbol{}" title="\boldsymbol{}">Bold Greek</option>
<option value="\mathit{}" title="\mathit{}">Italic</option>

<option value="\mathrm{}" title="\mathrm{}">Roman</option>
<option value="\mathfrak{}" title="\mathfrak{}">Fraktur</option>
</optgroup>
<optgroup label="Text Only">
<option value="\texttt{}" title="\texttt{}">Typewriter</option>
<option value="\textup{}" title="\textup{}">Upright</option>
<option value="\textbf{}" title="\textbf{}">Bold</option>
<option value="\textit{}" title="\textit{}">Italic</option>
<option value="\textrm{}" title="\textrm{}">Roman</option>
<option value="\textsl{}" title="\textsl{}">Slanted</option>
<option value="\textsc{}" title="\textsc{}">SMALL CAPS</option>
<option value="\emph{}"   title="\emph{}">Emphasis</option>
</optgroup>
</select>
<select title="Functions" onchange="insertText(this.options[this.selectedIndex].value); this.selectedIndex=0;">
<option selected="selected" value="" style="color:#8080ff">문자함수…</option>
<option value="\arg">arg</option>
<option value="\deg">degree</option>
<option value="\det">det</option>
<option value="\dim">dim</option>
<option value="\gcd">gcd</option>
<option value="\hom">hom</option>
<option value="\ker">ker</option>
<option value="\partial">partial</option>
<option value="\Pr">Pr</option>
<option value="\sup">sup</option>
<optgroup label="Logs">
<option value="\exp">exp</option>
<option value="\lg">lg</option>
<option value="\ln">ln</option>
<option value="\log">log</option>
<option value="\log_{e}">log e</option>
<option value="\log_{10}">log 10</option>
</optgroup>
<optgroup label="Limits">
<option value="\lim">limit</option>
<option value="\liminf">liminf</option>
<option value="\limsup">limsup</option>
<option value="\max">maximum</option>
<option value="\min">minimum</option>
<option value="\infty">infinite</option>
</optgroup>
<optgroup label="Trig">
<option value="\sin">sin</option>
<option value="\cos">cos</option>
<option value="\tan">tan</option>
<option value="\sin^{-1}">sin-1</option>
<option value="\cos^{-1}">cos-1</option>
<option value="\tan^{-1}">tan-1</option>
<option value="\csc">csc</option>
<option value="\sec">sec</option>
<option value="\cot">cot</option>
<option value="\sinh">sinh</option>
<option value="\cosh">cosh</option>
<option value="\tanh">tanh</option>
<option value="\coth">coth</option>
<option value="\sinh^{-1}">sinh-1</option>
<option value="\cosh^{-1}">cosh-1</option>
<option value="\tanh^{-1}">tanh-1</option>
</optgroup>
<optgroup label="Complex">
<option value="\Re">Real</option>
<option value="\Im">Imaginary</option>
<option value="\imath">i</option>
<option value="\jmath">j</option>
</optgroup>
</select>
<select title="Foreign Characters" onchange="insertText(this.options[this.selectedIndex].value); this.selectedIndex=0;">
<option selected="selected" value="" style="color:#8080ff">문자기호</option>
<option value="\oe">&oelig;</option>
<option value="\OE">&OElig;</option>
<option value="\ae">æ</option>
<option value="\AE">Æ</option>
<option value="\aa">å</option>
<option value="\AA">Å</option>
<option value="\ss">ß</option>
<option value="\S">(§) section</option>
<option value="\P">(¶) paragraph</option>
<option value="\o">o</option>
<option value="\O">O</option>
<option value="\l">l</option>
<option value="\L">L</option>
<option value="\dag">dagger</option>
<option value="\ddag">double dagger</option>
<option value="\copyright">©</option>
<option value="\pounds">£</option>
</select>
<select title="Symbols" onchange="insertText(this.options[this.selectedIndex].value); this.selectedIndex=0;">
<option selected="selected" value="" style="color:#8080ff">기호</option>
    <option value="\pm" title="\pm">(±) plus or minus(더하기빼기)</option>
<option value="\mp" title="\mp">minus or plus(빼기더하기)</option>
<option value="\times">(×) times(곱샘)</option>
<option value="\div" title="\div">(÷) divided by(나누기)</option>
<option value="\ast" title="\ast">(&lowast;) asterisk(당구장)</option>
<option value="\star">(*) star(별)</option>
<option value="\circ" title="\circ">circle(원)</option>
<option value="^{\circ}" title="^{\circ}">degree symbol(온:도)</option>
<option value="\bullet">(•) bullet(원점)</option>
<option value="\cdot">(·) center dot(점)</option>
<option value="\uplus">u plus(합집합더하기)</option>
<option value="\sqcap">square cap(각진교집합)</option>
<option value="\sqcup">square cup(각진합집합)</option>
<option value="\vee">(&or;) vee(논리합)</option>
<option value="\wedge">(&and;) wedge(논리곱)</option>
<option value="\diamond">(&loz;) diamond(다이아몬드)</option>
<option value="\bigtriangleup">big triangle up(삼각형)</option>
<option value="\bigtriangledown">big triangle down(역삼각형)</option>
<option value="\triangleleft">triangle left(왼삼각형)</option>
<option value="\triangleright">triangle right(오른삼각형)</option>
<option value="\lhd">large triangle left(왼삼각형)</option>
<option value="\rhd">large triangle right(오른삼각형)</option>
<option value="\oplus">(&oplus;) circle plus(원안더하기)</option>
<option value="\ominus">circle minus(원안빼기)</option>
<option value="\otimes">(&otimes;) circle times(원안곱하기)</option>
<option value="\oslash">circle slash(원안슬래시)</option>
<option value="\odot">circle dot(원안점)</option>
<option value="\bigcirc">big circle(큰원)</option>
<option value="\dagger">(&dagger;) dagger(십자가)</option>
<option value="\ddagger">(&Dagger;) double dagger(쌍십자가)</option>
<option value="\amalg">coproduct</option>
</select>
색칠 된곳이 내가 임으로 번역해 버린것이다.

이상으로 마친다.

이 글은 스프링노트에서 작성되었습니다.

나의컴생활

2009년 10월 22일 목요일

fckeditor와 equation의 플러그인설치에 대해

댓글 없음:

댓글 쓰기