꽤 괸찮은 웹에디터중 하나가 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
#######################################################
var changed=false;
var orgtxt='';
var EQUATION_ENGINE='http://codecogs.izyba.com';
// Clears the main editor window
function cleartext() {
var id=document.getElementById('latex_formula'); id.value = ""; id.focus();
changed=false;
document.getElementById('copybutton').className='greybutton';
document.getElementById('renderbutton').className='greybutton';
document.getElementById('clipboardbutton').className='greybutton'; }
function textchanged() {
var txt=getEquationStr();
if(txt!=orgtxt)
{
orgtxt=txt;
document.getElementById('copybutton').className='lightbluebutton';
document.getElementById('clipboardbutton').className='lightbluebutton';
document.getElementById('renderbutton').className='bluebutton';
changed=true;
}
}
function formatchanged()
{
var action=false;
var format=document.getElementById('format');
if(format) { var type=format.value;
switch(type) {
case 'gif' : action=false; break;
case 'png' : action=false; break;
case 'pdf' : action=true; break;
case 'swf' : action=true; break;
}
}
document.getElementById('dpi').disabled=action;
document.getElementById('dpi').readonly=action;
changed=true;
renderEqn();
}
// Tries to inserts text at the cursor position of text area
// wind = document <- when inserting text into the current equation editor box
// wind = window.opener.document <- when inserting text into a parent window box
function addText(wind, textbox, txt)
{
myField = wind.getElementById(textbox);
// IE
if (wind.selection) {
myField.focus();
sel = wind.selection.createRange();
sel.text = txt;
}
// MOZILLA
else
{
var scrolly=myField.scrollTop;
if (myField.selectionStart || myField.selectionStart == '0')
{
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = startPos + txt.length;
myField.value = myField.value.substring(0, startPos) + txt
+ myField.value.substring(endPos, myField.value.length);
pos = txt.length + endPos - startPos;
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
myField.focus();
myField.setSelectionRange(startPos + pos,startPos + pos);
}
else myField.value += txt;
myField.scrollTop=scrolly;
}
}
function insertText( txt, pos, inspos )
{
var insert_pos=(inspos==null)?pos:inspos;
textchanged()
// pos = optional parameter defining where in inserted text to put the caret
// if undefined put at end of inserted text
// if pos=1000 then using style options and move to just before final }
// startPos = final position of caret in complete text
if (pos==1000) {pos=txt.length-1};
if (pos==undefined) { txt+=' '; pos=txt.length;}; // always insert a space after
// my textarea is called latex_formula
myField = document.getElementById('latex_formula');
if (document.selection) {
// IE
myField.focus();
var sel = document.selection.createRange();
// find current caret position
var i = myField.value.length+1;
theCaret = sel.duplicate();
while (theCaret.parentElement()==myField
&& theCaret.move("character",1)==1) --i;
// take account of line feeds
var startPos = i - myField.value.split('\n').length + 1 ;
if ((txt.substring(1,5) == "left" || txt.substring(insert_pos-1,insert_pos)=='{') && sel.text.length) {
// allow highlighted text to be bracketed
if(txt.substring(1,5) == "left") ins_point=7;
else ins_point=insert_pos;
if(inspos==null) pos = txt.length + sel.text.length + 1;
else if(inspos<pos) pos+=sel.text.length;
sel.text = txt.substring(0,ins_point) + sel.text + txt.substr(ins_point);
} else { sel.text = txt; }
// put caret in correct position to start editing
var range = myField.createTextRange();
range.collapse(true);
range.moveEnd('character', startPos + pos);
range.moveStart('character', startPos + pos);
range.select();
}
else
{
// MOZILLA
if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = startPos + txt.length;
if ((txt.substring(1,5) == "left" || txt.substr(insert_pos-1,1)=='{') && endPos > startPos) {
// allow highlighted text to be bracketed
if(txt.substring(1,5) == "left") ins_point=7;
else ins_point=insert_pos;
if(inspos==null) pos = txt.length + endPos - startPos + 1;
else if(inspos<pos) pos+=endPos - startPos;
txt = txt.substring(0,ins_point) + myField.value.substring(startPos, endPos) + txt.substr(ins_point);
}
myField.value = myField.value.substring(0, startPos) + txt + myField.value.substring(endPos, myField.value.length);
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
// put caret in correct position to start editing
myField.focus();
myField.setSelectionRange(startPos + pos,startPos + pos);
}
else myField.value += txt;
}
myField.focus();
}
/* ----------- Handle rendering example equation --------------------------- */
// Returns the complete string that describes this particular equation with font sizes etc.
function getEquationStr()
{
var val=document.getElementById('latex_formula').value;
val=val.replace(/^\s+|\s+$/g,"");
val=val.replace(/\s+/g," ");
var size = document.getElementById('fontsize');
if(size) { var txt=size.options[size.selectedIndex].value;
if(txt!='') val=txt+' '+val; }
if(document.getElementById('compressed').checked) val='\\inline '+val;
if(document.getElementById('dpi')) { var dpi=document.getElementById('dpi').value;
if(dpi!='100') val='\\'+dpi+'dpi '+val; }
if(document.getElementById('bg')) { var bg=document.getElementById('bg').value; if(bg!='transparent') val='\\bg_'+bg+' '+val; }
return val;
}
/* Turns off the wait message, once equation is loaded */
var initmessage=true;
function processEquationChange()
{
if(initmessage) initmessage=false;
else { var div = document.getElementById('equationcomment'); div.innerHTML = ""; }
}
// Triggers the rendering of the equations within the iframe
function renderEqn(callback)
{
if(!changed) return;
/* First check we have a matching set of brackets */
var val=document.getElementById('latex_formula').value;
val=val.replace(/^\s+|\s+$/g,"");
if(val.length==0) return;
var bracket=0;
for(i=0;i<val.length;i++)
{
switch(val[i])
{
case '{': bracket++; break;
case '}': bracket--; break;
}
}
if(bracket==0)
{
/* Set render button to grey, since we're now rendering.. */
document.getElementById('renderbutton').className='greybutton';
var val=document.getElementById('latex_formula').value;
/* Add to history */
var sel=document.getElementById('history');
var j=sel.length;
sel.length=j+1;
sel.options[j].text=val.substr(0,15);
sel.options[j].value=val;
sel.options[j].title=val;
var img = document.getElementById('equationview');
val=getEquationStr();
sval = val.replace(/"/g,'\\"');
// Figure out the format
if(document.getElementById('format'))
{
var format_index=document.getElementById('format').selectedIndex;
var format=document.getElementById('format').options[format_index].value;
} else { var format_index=0; var format='gif'; }
switch(format_index)
{
case 0 : // gif
case 1 : // png
{
var div = document.getElementById('equationcomment');
div.innerHTML = "Rendering Equation <img src=\"images/wait.gif\" width=\"13\" height =\"13\"/>";
img.onload = processEquationChange;
if(typeof(EQUATION_ENGINE_NOW)!='undefined' && EQUATION_ENGINE_NOW!='')
img.src = EQUATION_ENGINE_NOW+'?'+ val ;
else
img.src=EQUATION_ENGINE+'/'+format+'.latex?' + val;
changed=false;
} break;
case 2 : // pdf
{
img.onload = '';
img.src='images/pdf.jpg';
document.getElementById('download').src='http://www.codecogs.com/pdf.latex?'+val;
var div = document.getElementById('equationcomment');
div.innerHTML = '<br/><a target="download" href="http://www.codecogs.com/pdf.latex?'+sval+'"><strong>Click here if the PDF does not downloading.</strong></a>';
} break;
case 3 : // swf
{
img.onload ='';
img.src='images/spacer.gif';
var div = document.getElementById('equationcomment');
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width', '600','height', '100','src', ('http://www.codecogs.com/swf.latex?'+val),'quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','align','top','scale','showall','wmode','window','devicefont','false','bgcolor','#ffffff','menu','true','allowFullScreen','true',
'movie', (EQUATION_ENGINE+'/swf.latex?'+val) );
changed=false;
} break;
}
}
else
{
var div = document.getElementById('equationcomment');
if(bracket<0) div.innerHTML = "<br/><span class=\"orange\">You have more <strong>closed '}' brackets</strong> than open '{' brackets</span>";
else div.innerHTML = "<br/><span class=\"orange\">You have more <strong>open '{' brackets</strong> than closed '}' brackets</span>";
}
}
/* We don't want to render with every keystroke, so we delay this part
This function will be called with each keystroke
- n is a tens of second unit
*/
var auton=0;
function renderCountdown()
{
if(auton>0)
{ auton--; setTimeout('renderCountdown()', 100); }
else renderEqn(null);
}
function autorenderEqn(n)
{
if(auton>0 && n>0) auton=n;
else { auton=n; renderCountdown(); }
}
/* The following code adds a favorite to the favorite drop down.
To achieve this, we must update the users cookies */
function addfavorite(dropdown)
{
text=document.getElementById('latex_formula').value;
var sel=document.getElementById(dropdown);
var num=sel.selectedIndex
if(num==0 || !confirm("Click Yes to replace the current equation or 'Cancel' to add a new equation"))
{
var name = prompt('Please enter a short name for this equation:', '')
if(name==null || name=='') name=text.substr(0,15);
/* Add to favorite */
var j=sel.length;
sel.length=j+1;
sel.options[j].text=name;
sel.options[j].value=text;
sel.options[j].title=text;
/* Make sure cookie name is unique to website */
document.cookie = "eq_"+escape(name.replace(/\+/g,"+").replace(/\s/g,"&space;"))+"="+escape(text.replace(/\+/g,"+"))+"; path=/";
}
else
{
sel.options[num].value=text;
sel.options[num].title=text;
/* Make sure cookie name is unique to website */
document.cookie = "eq_"+escape(name.replace(/\+/g,"+").replace(/\s/g,"&space;"))+"="+escape(text.replace(/\+/g,"+"))+"; path=/";
}
}
function deletefavorite(dropdown)
{
var sel=document.getElementById(dropdown);
var num=sel.selectedIndex
if(num>0)
{
name=sel.options[num].text;
var mydate = new Date();
mydate.setTime(mydate.getTime() - 1);
document.cookie = "eq_"+escape(name.replace(/\+/g,"+").replace(/\s/g,"&space;"))+"=; expires="+mydate.toGMTString()+"; path=/";
sel.options[num]=null;
}
}
/* Help to generate a Matrix */
// generate a set of aligned equations - thornahawk
// isNumbered: switches between numbered and not numbered equations
function makeEquationsMatrix(type, isNumbered, isConditional)
{
if (isNumbered==undefined) isNumbered=false;
if (isConditional==undefined) isNumbered=false;
var eqns="\\begin{"+type+((isNumbered)?"":"*")+"}";
var eqi="\n &"+((isNumbered)?" ":"= ")+((isConditional)?"\\text{ if } x= ":"");
var eqEnd="\n\\end{"+type+((isNumbered)?"":"*")+"}";
var i=0;
var dim = prompt('Enter the number of lines:', '');
if (dim != '' && dim != null) {
n=parseInt(dim);
if (!isNaN(n)) {
for (i=1;i<=n-1;i++) eqns=eqns+(eqi+"\\\\ ");
eqns=(eqns+eqi)+eqEnd;
insertText(eqns,type.length+((isNumbered)?0:1)+9);
}
}
}
// generate an array of specified dimensions - thornahawk
// type: sets the type of array, e.g. pmatrix
function makeArrayMatrix( type, start, end )
{
var matr=start+'\\begin{'+type+'matrix}';
var row="\n";
var mend="\n\\end{"+type+"matrix}"+end;
var i=0;
var dim = prompt('Enter the array dimensions separated by a comma (e.g. "2,3" for 2 rows and 3 columns):', '')
if (dim!='' && dim!=null)
{
dim=dim.split(',');
m=parseInt(dim[0]);
n=parseInt(dim[1]);
if (!isNaN(m) && !isNaN(n))
{
for (i=2;i<=n;i++) row=row+' & ';
for (i=1;i<=m-1;i++) matr=matr+row+'\\\\ ';
matr=matr+row+mend;
insertText(matr,type.length+start.length+15);
}
}
}
function hover(elm, e)
{
div=document.getElementById('hover');
if(typeof(EQUATION_ENGINE_NOW)!='undefined' && EQUATION_ENGINE_NOW!='')
div.innerHTML='<img src="'+EQUATION_ENGINE_NOW+'?\huge '+elm.title+'"/>';
else
div.innerHTML='<img src="http://www.codecogs.com/gif.latex?\\200dpi '+elm.title+'"/>';
if(document.all) { div.style.top = (event.clientY-10)+'px'; div.style.left = (event.clientX+20)+'px'; }
else { if(!e) var e=window.event; div.style.top = (e.pageY-10)+'px'; div.style.left = (e.pageX+20)+'px'; }
div.style.display='block';
elm.onmouseout= function() { document.getElementById('hover').style.display='none';}
}
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Turnea Iulian :: http://www.eurografic.ro */
function iObject() { this.i; return this; }
var myObject=new iObject();
myObject.i=0;
var myObject2=new iObject();
myObject2.i=0;
store_text=new Array();
//store_text[0] store initial textarea value
store_text[0]="";
function countclik(tag) {
var x=tag.value;
if(myObject.i==0 || store_text[myObject.i]!=x)
{
myObject.i++;
var y=myObject.i;
store_text[y]=x;
}
myObject2.i=0;
document.getElementById('redobutton').src="images/redo-x.gif";
document.getElementById('undobutton').src="images/undo.gif";
}
function undo(box) {
tag=document.getElementById(box);
if ((myObject2.i)<(myObject.i)) {
myObject2.i++;
if(myObject2.i==myObject.i) {
document.getElementById('undobutton').src="images/undo-x.gif"; }
document.getElementById('redobutton').src="images/redo.gif";
} else {
alert("Finish Undo Action");
}
var z=store_text.length;
z=z-myObject2.i;
if (store_text[z]) { tag.value=store_text[z]; }
else { tag.value=store_text[0]; }
tag.focus();
}
function redo(box) {
tag=document.getElementById(box);
if((myObject2.i)>1) {
myObject2.i--;
if(myObject2.i==1){
document.getElementById('redobutton').src="images/redo-x.gif"; }
document.getElementById('undobutton').src="images/undo.gif";
} else {
alert("Finish Redo Action");
}
var z=store_text.length;
z=z-myObject2.i;
if (store_text[z]) { tag.value=store_text[z]; }
else { tag.value=store_text[0]; }
tag.focus();
}
function updateOpener(target, type)
{
if(target!='')
{ // *** Traditional mode with plane HTML text box ***
var text;
if(type=='phpBB')
{ // Create LaTeX string for insertion into phpBB forum
text=getEquationStr();
text = '[tex]' + text + '[/tex]\n';
}
else if(type=='html')
{ // Create <img> tag for insertion into html
text=getEquationStr();
if(typeof(EQUATION_ENGINE_NOW)!='undefined' && EQUATION_ENGINE_NOW!='')
text = '<img src="'+EQUATION_ENGINE_NOW+'?'+escape(text)+'" />';
else
text = '<img src="'+EQUATION_ENGINE+'/gif.latex?'+escape(text)+'" />';
}
else
{ // Create LaTeX string for insertion into CodeCogs of DOxygen C/C++ markup language
// Note size and
text=document.getElementById('latex_formula').value;
var size = document.getElementById('fontsize');
if(size && size.selectedIndex!=2)
text=size.options[size.selectedIndex].value+' '+text;
if(document.getElementById('inline').checked)
{
if(!document.getElementById('compressed').checked) text='\\displaystyle '+text;
text = '$' + text + '$ ';
}
else
{
if(document.getElementById('compressed').checked) text='\\inline '+text;
text = '\\[' + text + '\\]\n';
}
}
addText(window.opener.document,target,text);
}
else
{ // *** Advanced mode with FCKEditor ***
var text=document.getElementById('latex_formula').value;
var size = document.getElementById('fontsize');
if(size && size.selectedIndex!=2)
text=size.options[size.selectedIndex].value+' '+text;
if (text.length == 0) {
alert(FCKLang.EquationErrNoEqn) ;
return false ;
}
if(document.getElementById('inline').checked)
{
if(!document.getElementById('compressed').checked)
text='\\displaystyle '+text;
text = '\\f$' + text + '\\f$ ';
}
else
{
if(document.getElementById('compressed').checked)
text='\\inline '+text;
text = '\\f[' + text + '\\f]\n';
}
if ( eSelected && eSelected._fckequation == text )
return true ;
FCKEquation.Add(text);
}
window.blur();
return true ;
}
#######################################################
색칠된 부분이 수정되었는데 이유는 간단한다. 혹시 여러분이 수식 변환기를 직접 설치했다면 그곳으로 걸어서 작업할 수 있도록 한는 것이다. 굳이 수정하지 않아도 동작은 한다. 하지만 수식처리기는 여러분의 서버가 아닌 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">œ</option>
<option value="\OE">Œ</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">(∗) 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">(∨) vee(논리합)</option>
<option value="\wedge">(∧) wedge(논리곱)</option>
<option value="\diamond">(◊) 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">(⊕) circle plus(원안더하기)</option>
<option value="\ominus">circle minus(원안빼기)</option>
<option value="\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(십자가)</option>
<option value="\ddagger">(‡) double dagger(쌍십자가)</option>
<option value="\amalg">coproduct</option>
</select>
색칠 된곳이 내가 임으로 번역해 버린것이다.
이상으로 마친다.
이 글은 스프링노트에서 작성되었습니다.
