요즘 크로스브라우징 때문에 IE/FF 지원하는 모듈을 찾고 있는데
제일 쓰고 싶은것은 네이버의 스마트에디터인데 네이버에 아는 사람이 없어서 패쑤~
그 다음에 쓰고 싶은것은 이노바 무시기인데 이것은 유료구요.
희안하게 비슷한것을 만드는 놈들이 다 짜고 치는지 돈을 받더군요 ㅡㅡ;
-----------------------
먼저 짱씨 형님이 해결한 방법을 소개합니다. (IE만 됩니다 ㅡㅡ)
고치실분은 알아서 고치세요 ㅡㅡa;
원본 : http://www.butong.net/other/061012/index.htm
테스트 링크 → http://211.238.15.54/~somekal/css/ZZangFontSize.php
<!--
짱씨 협찬
http://www.butong.net/other/061012/index.htm
//-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type="text/css">
td,body{font-family:굴림;font-size:12px; color:#404040}
p{margin-top:2px;margin-bottom:2px;font-size:100%}
</style>
</head>
<body> <!-- 아래 OBJECT dlgHelp 틀면 다운됨 경고!!! <OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width=0 height=0></OBJECT> <select id="select1" style="height: 18px"
onchange="doSelectCl('FormatBlock',this);this.returnValue=false;" name="select1" size="1">
<option selected value="">Headline</option>
<option value="P">P</option>
<option value="H1">H1</option>
<option value="H2">H2</option>
<option value="H3">H3</option>
<option value="H4">H4</option>
<option value="H5">H5</option>
<option value="H6">H6</option>
<option value="p">p</option>
<option value="dd">dd</option>
<option value="dt">dt</option>
<option value="dir">dir</option>
<option value="menu">menu</option>
<option value="PRE">PRE</option>
</select> <select style="height: 100px"
onchange="doSelectC('FontName',this,'font face=" '+this.value+'"')"
name="selectFontName"></select>
//--> <select style="width: 100px; height: 18px" onchange="fontsize(this)" name="selectFontSize" size="1">
<option selected>fontSize</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<OPTION value=9>9pt</option>
<OPTION value=12>12pt</option>
<OPTION value=14>14pt</option>
<OPTION value=18>18pt</option>
<OPTION value=24>24pt</option>
<OPTION value=36>36pt</option>
</select>
<P>
<IFRAME id="Editor" Name="Editor" style="WIDTH: 100%; HEIGHT: 95%"></IFRAME>
<textarea name=ikj style="display:none">
<p>동해물과 백두산이<p>
<p>마르고 달토록</p>
<p>하느님이 보우하사</p>
<p>우리나라 만세</p>
</textarea> <script type="text/JavaScript">
<!--
var edit;
var RangeType; function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){ // Mozilla
return document.getElementById(aID).contentDocument;
} else { // IE
return document.frames[aID].document;
}
} function start() {
var edx = getIFrameDocument('Editor');
edx.designMode="On";
edx.open();
edx.write("<style>p{margin-top:2px;margin-bottom:2px}</style>");
edx.write(ikj.value);
edx.close();
/*
Editor.document.designMode="ON";
Editor.document.open();
Editor.document.write(ikj.value);
Editor.document.close();
*/
fnInit()
} function setFocus() {
Editor.focus();
} function selectRange(){
edit = Editor.document.selection.createRange();
RangeType = Editor.document.selection.type;
} function execCommand(command,para) {
setFocus();
selectRange();
if (para=="")
edit.execCommand(command)
else
edit.execCommand(command, false, arguments[1]);
Editor.focus();
if (RangeType != "Control") edit.select();
} function doSelectC(str,el) { var Index = el.selectedIndex;
if (Index != 0)
{ el.selectedIndex = 0;
execCommand(str,el.options[Index].text);
}
}
function doSelectCl(str,el) { var Index = el.selectedIndex;
if (Index != 0)
{ el.selectedIndex = 0;
execCommand(str,"<"+el.options[Index].value+">");
}
} function fnInit(){
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "off";
// getSystemFonts();
} function getSystemFonts()
{
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oOption = document.createElement("OPTION");
oOption.text = "자본";
oOption.value = "0";
selectFontName.add(oOption);
for (i = 1;i < dlgHelper.fonts.count;i++)
{
fArray[i] = dlgHelper.fonts(i);
var oOption = document.createElement("OPTION");
oOption.text = fArray[i];
oOption.Value = i;
selectFontName.add(oOption);
}
}
/*
****************************************
Created by Bound0 (bound0@tom.com) http://bbs.blueidea.com/viewthread.php?tid=2661868 ****************************************
*/
function formatfor(va) {
var t=va.replace(/\r/g,'');
t = t.replace(/(<(script|textarea|xmp|pre|style).*?>)([^\r]*?)(<\/\2>)/img,
function (){return arguments[1]+arguments[3].replace(/\n/g, "\r")+arguments[4]})
t = t.replace(/\n/g, "");
return t
} function fontsize(el)
{var Index=el.selectedIndex
var addpre="<font size="+el.options[Index].value+">"
if(Index>7)addpre="<font style='font-size:"+el.options[Index].value+"pt'>" var oSel = Editor.document.selection.createRange()
var sBookmark = oSel.getBookmark()
var oSelhtml=oSel.htmlText
if(oSelhtml!="")
{
var conts=oSelhtml
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength)
var contp=formatfor(oSel.htmlText)
var conta=formatfor(Editor.document.body.innerHTML) var contpa=''
var partC=""
var partB=""
var partA="" var m=0
m=conta.indexOf(contp.substr(0,3)) var f=contp.length
for(;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}} var ko=contp.substr(f)
var kol=ko.length
var ty=conta.substr(m+f,kol)
var hu=""
for(var b=1;b<kol;b++)if(ko.substr(b)==ty.substr(0,kol-b)){hu=ko.substr(b);contpa+=hu;partC=partC.substr(kol-b);break} var k=contpa.length
cont=conts.replace(/\n/g, "")
var u=cont.length
if(cont==contpa.substr(k-u)){partB=cont;partA=contpa.substr(0,k-u)}else{ for(u=cont.length;u>0;u--)
{if(cont.lastIndexOf(contpa.substr(k-u))!=-1){partB0=contpa.substr(k-u);partA0=contpa.substr(0,k-u);break}} contt=formatfor(conts)
if(hu!="")if(contt.substr(contt.length-kol)==ko)contt=contt.substr(0,contt.length-kol)+hu
u=contt.length
var youm=contpa.lastIndexOf(contt)
if(youm!=-1){partB=contt;partA=contpa.substr(0,youm);partC=contpa.substr(youm+u)+partC}else{
for(;u>0;u--){if(contt.lastIndexOf(contpa.substr(k-u))!=-1){partB1=contpa.substr(k-u);partA1=contpa.substr(0,k-u);break}} if(partB1.length>partB0.length){partB=partB1;partA=partA1}else{partB=partB0;partA=partA0}
}
}
if(partB.substr(partB.length-1)=="<"){partB=partB.substr(0,partB.length-1);partC="<"+partC}
if(partB.substr(partB.length-2)=="</"){partB=partB.substr(0,partB.length-2);partC="</"+partC} var cook=[] partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
var ook=""
partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"}) if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partB)){jk.exec(partB)
co=cook.length
cook[co]=RegExp.$1
partB=partB.replace(jk,"<cook"+co+">")}}
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
ook=""
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"}) if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partC)){jk.exec(partC)
co=cook.length
cook[co]=RegExp.$1
partC=partC.replace(jk,"<cook"+co+">")}}
partC=partC.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"}) var dol=[]
var dos=[]
var lon=[] fd="<FONT([^>]*?)>"
jk=new RegExp(fd,["im"])
while(jk.test(partB)){ce=dol.length
jk.exec(partB)
dol[ce]=RegExp.$1
partB=partB.replace(jk,"<site"+ce+">")
} ce=dol.length-1
for(;ce>-1;ce--)
{kjc="<site"+ce+">"
fd=kjc+'(.*?)<\/font>'
jk=new RegExp(fd,["im"])
if(jk.test(partB)){dos[dos.length]=ce
jk.exec(partB)
ko3=kjc+RegExp.$1+"</site"+ce+">"
partB=partB.replace(jk,ko3)
}else{lon[lon.length]=ce}
} partB=partB.replace(/<\/font>/img,"<lonf>") for(var c=dos.length-1;c>-1;c--)
{
uts=dol[dos[c]]
if(""==(uts.replace(/size=[0-7+]+/i,"").replace(/style=("|')FONT-SIZE: [0-9.]+.*;*("|')/im,"").replace(/[\s\n\r]+/mg,""))){partB=partB.replace("<site"+dos[c]+">","")
partB=partB.replace("</site"+dos[c]+">","")}else{partB=partB.replace("<site"+dos[c]+">","<font"+uts.replace(/ size=[0-7+]+/im,"").replace(/FONT-SIZE: [0-9.]+pt/im,"").replace(/ style=("|');*("|')/im,"")+">")
partB=partB.replace("</site"+dos[c]+">","</font>")}
} var addend=""
var mio=[] partB=partB.replace(/<([^<> ]*?) [^<>]*?style=[^<>]*?FONT-SIZE: [0-9.]+[^<>]*?>/img,
function (){notv="|select|input|option|object|"
if(notv.indexOf("|"+arguments[1].toLowerCase()+"|")==-1){
op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"}else{return arguments[0]}}) kba=["h1","h2","h3","h4","h5","h6","pre","button","listing","big","small","tt","code","kbd","samp","td","\/td","caption","\/caption","th","\/th","tr","\/tr","table","\/table","thead","\/thead","tbody","\/tbody","tfoot","\/tfoot"]
for(b in kba){
fd="<("+kba[b]+")[^<>]*?>"
jk=new RegExp(fd,["img"])
partB=partB.replace(jk,
function (){op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"})
} liming=[] partB=partB.replace(/<(opis|site|lonf)([0-9]*)>/g,
function(){var op=liming.length
if(arguments[1]=="opis"){liming[op]=mio[parseInt(arguments[2])]}
if(arguments[1]=="site"){liming[op]="<font"+dol[parseInt(arguments[2])]+">"}
if(arguments[1]=="lonf"){liming[op]="</font>"}
return "<duan"+op+">"
}) if(liming.length>0){
partB=partB.replace(/^(.+?)(<duan0>)/m,function(){if(""!=arguments[1]){return addpre+arguments[1]+"</font>"+arguments[2]}
else{return arguments[0]}}) var op=liming.length-1
for(var kc=0;kc<op;kc++){
fd="(<duan"+kc+">)(.+?)(<duan"+(kc+1)+">)"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,
function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"+arguments[3]}
else{return arguments[0]}})} fd="(<duan"+op+">)(.+?)$"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"}
else{return arguments[0]}})
}
else{partB=addpre+partB+"</font>"
} partB=partB.replace(/<duan([0-9]+)>/g,function(){return liming[parseInt(arguments[1])]}) var endtemp=partA+partB+partC for(vof in cook)endtemp=endtemp.replace("<cook"+vof+">",cook[vof]) Editor.document.body.innerHTML=endtemp
var vrvd=Editor.document.selection.createRange()
vrvd.moveToBookmark(sBookmark)
vrvd.select()
}
else{
Editor.document.selection.createRange().pasteHTML(addpre+"</font>")
}Editor.focus()
el.blur()
el.selectedIndex=0} start();
//-->
</script> </body>
</html>
<font size=1> 이외에 <font style="font-size:9pt"> 이렇게 태그를 넣어줍니다.
----------------------
굴림 폰트 대신에 Arial을 기본으로 해줍니다.
이때는 <font size=1>로 해도 한글은 그런대로 볼만합니다(?)
그런데 FF에서 보면 좀 뭐합니다 ㅡㅡ; (렌더링 기준이 틀린가 봅니다)
테스트 링크 → http://211.238.15.54/~somekal/css/fontSizeSecret_adv.php
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type='text/css'>
.arial p { font-family:arial; font-size:12px }
.gulim p { font-family:굴림; font-size:12px }
p { margin-top:2px; margin-bottom:2px }
</style>
</head>
<body> <DIV class=arial style="float:left">
<p><b><font color="red">Arial <font size=1></font></b></p>
<p><FONT size=1>미리보기ABCdef</FONT></p>
<p><FONT size=2>미리보기ABCdef</FONT></p>
<p><FONT size=3>미리보기ABCdef</FONT></p>
<p><FONT size=4>미리보기ABCdef</FONT></p>
<p><font size=5>미리보기ABCdef</font></p>
<p><font size=6>미리보기ABCdef</font></p>
<p><font size=7>미리보기ABCdef</font></p>
</DIV> <DIV class=gulim style="float:left">
<p><font color="red"><b>굴림 <FONT style="font-size:9pt"></b></font></p>
<p><font style="font-size:9pt">미리보기ABCdef</FONT></p>
<p><font style="font-size:10pt">미리보기ABCdef</FONT></p>
<p><font style="font-size:12pt">미리보기ABCdef</FONT></p>
<p><font style="font-size:14pt">미리보기ABCdef</FONT></p>
<p><font style="font-size:18pt">미리보기ABCdef</font></p>
<p><font style="font-size:24pt">미리보기ABCdef</font></p>
<p><font style="font-size:36pt">미리보기ABCdef</font></p>
</DIV> <DIV class=gulim>
<p><b><font color="red">굴림 <font size=1></font></b></p>
<p><FONT size=1>미리보기ABCdef</FONT></p>
<p><FONT size=2>미리보기ABCdef</FONT></p>
<p><FONT size=3>미리보기ABCdef</FONT></p>
<p><FONT size=4>미리보기ABCdef</FONT></p>
<p><font size=5>미리보기ABCdef</font></p>
<p><font size=6>미리보기ABCdef</font></p>
<p><font size=7>미리보기ABCdef</font></p>
</DIV> </body>
</html>
---------------------
★ 추가 :: 무화님 협찬 (2007-10-17)
expression 적용예제
테스트 링크 → http://211.238.15.54/~somekal/css/fontSize_expression_ex.php
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script type="text/javaScript">
<!--
var fontsize={1:9,2:10,3:12,4:14,5:18,6:24,7:36};
//-->
</script>
<style type="text/css">
p{margin-top:2px;margin-bottom:2px}
td,body{font-size:12px;font-family:굴림}
.ex font{font-size:expression(fontsize[this.size]+'pt')}
</style>
</head>
<body> <div class=ex style="float:left">
<p><b><font color="red">굴림 :: expression</font></b></p>
<p><font size=1>미리보기Abc</font></p>
<p><font size=2>미리보기Abc</font></p>
<p><font size=3>미리보기Abc</font></p>
<p><font size=4>미리보기Abc</font></p>
<p><font size=5>미리보기Abc</font></p>
<p><font size=6>미리보기Abc</font></p>
<p><font size=7>미리보기Abc</font></p>
</div> <div>
<p><b><font color="red">굴림 :: Normal</font></b></p>
<p><font size=1>미리보기Abc</font></p>
<p><font size=2>미리보기Abc</font></p>
<p><font size=3>미리보기Abc</font></p>
<p><font size=4>미리보기Abc</font></p>
<p><font size=5>미리보기Abc</font></p>
<p><font size=6>미리보기Abc</font></p>
<p><font size=7>미리보기Abc</font></p>
</div> </body>
</html>
---------------------
칼솜이 생각한 방법은 다음과 같습니다.
iframe의 document에 스타일 쓸때 기본 12px로 하고 폰트 크기 지정시
선택 영역에서 <font size> 태그 자체를 없애버리고 쓰면 제일 좋을것 같습니다.
무리하게 짱씨 형님처럼 집어넣는것도 좀 비효율적이네요 ㅡㅡ;
1 = 9pt (원래는 8pt)
2 = 10pt
3 = 12pt
4 = 14pt
5 = 18pt
6 = 24pt
7 = 36pt
----------------------
원래는 CSS로 FONT 태그의 size에 각각 pixel 크기를 먹일려고 했는데
이것은 CSS 도사가 와야 해결될것 같고, setExpression을 쓰게 되면
FF에서는 onload를 써야하니까 또 배보다 배꼽이 더 커지게 되네요 ㅡㅡ;
출처 : phpschool 칼솜님
'인터넷관련' 카테고리의 다른 글
| Mime Types (0) | 2008.03.24 |
|---|---|
| [PHP/JS] 특정 테그의 속성 값 또는 URL 등을 뽑아내는 함수입니다. (0) | 2008.03.24 |
| 국내포털의 robots.txt 패러독스 (0) | 2008.03.24 |
| Apache expires 설정으로 브라우저 캐시 (0) | 2008.03.24 |
| [보안] IE hack 방지]게시판 본문에서 js 제거 (0) | 2008.03.24 |
| MYSQL 의 root 비밀번호 변경 (0) | 2008.03.24 |
| 메모장으로 파일 볼때 줄이 붙어 나올때 해결방법 - 개행문자 (0) | 2008.03.01 |
| 제멋대로 사용하는 코맨트와 트랙백의 한글 명칭 (0) | 2008.03.01 |
