ewebeditor_기타 특수 효과와 유사하게 IE 및 FF와 호환되는 내가 작성한 온라인 텍스트 편집기

어떻게 표현해야 할까요? 이제 막 밤을 마쳤고, 많이 피곤할 텐데, 이제 이 문자를 입력할 힘이 아직 남아 있으니 아직 끝나지 않은 것 같습니다.
더 이상 고민하지 않고 최근에 ewebeditor와 유사한 온라인 편집기를 작성했습니다. 물론 다른 것만큼 강력하지는 않지만 기본 기능이 있고 IE 및 FF와도 호환됩니다. , 빨리 코드를 꺼내자
demo.html:

코드 복사 코드는 다음과 같습니다:

core.js

:

코드 복사 코드는 다음과 같습니다.

sx={};
sx.comm={};
sx.comm.string=function(){
if(!String.prototype.left){
String.prototype.left=function(l){
return this.substr(0, 엘);
}
}
if(!String.prototype.right){
String.prototype.right=function(l){
return this.substr(this.length-l,l );
}
}
if(!String.prototype.trim){
String.prototype.trim=function(){
return this.replace(/^/s |/s $ /g,"");
}
}
}();
sx.comm.array=function(){
if(!Array.prototype.indexOf){
Array.prototype.indexOf=function(data){
for(var i=0; iif(this[i]==data){
break;
}
}
return i==this.length?-1:i;
}
}
if(!Array.prototype.lastIndexOf){
Array.prototype.lastIndexOf=function(data){
for(var i=this.length-1;i> ;=0;i--){
if(this[i]==data){
break;
}
}
return i;
}
}
if(!Array.prototype.clone){
Array.prototype.clone=function(){
var temp=[];
for(var i=0;iif(this[i] instanceof Array){
temp[i]=this[i].clone();
}else{
temp[i]=this[i];
}
}
반품 온도;
}
}
if(!Array.prototype.every){
Array.prototype.every=function(o,f){
for (var i = 0; i < this.length; i ) {
if (this[i] array of Array) {
this[i].every(o,f);
}
else {
f.call(o, this[i]);
}
}
}
}
}();
sx.comm.ver=function(){
시도해 보세요{
HTMLElement;
"ff"를 반환합니다.
}catch(e){
return "ie";
}
}();
sx.comm.ext=function(){
if(sx.comm.ver=="ff"){
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<" this.tagName.toLowerCase()
for(var i=0;iattr=attrs[i];
if(attr.specified)
str =" " attr.name '="' attr.value '"'
}
if(! this.canHaveChildren)
return str ">";
return str ">" this.innerHTML ""
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area": ​​
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case " input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true ;
});
XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = 함수(){
//alert(arguments[0]);
var oNSResolver = this.createNSResolver(this.documentElement)
var aItems = this.evaluate(arguments[0].toLowerCase(), this, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
var 결과 = [];
for( var i = 0; i < aItems.snapshotLength; i )
{
aResult[i] = aItems.snapshotItem(i);
}
//alert(aItems.snapshotLength);
결과를 반환합니다.
}
}
}();
sx.event={};
sx.event.target=function(){
if(window.event){
return window.event.srcElement;
}else{
var f=arguments.callee.caller;
while(f){
if(f.arguments[0] instanceof Event){
return f.arguments[0].target;
}
f=f.caller;
}
}
}
sx.event.event=function(){
if (window.event) {
return window.event;
}else{
var f=arguments.callee.caller;
while (f) {
if (f.arguments[0] instanceof Event) {
return f.arguments[0];
}
f = f.caller;
}
}
}
sx.event.관련target=function(){
if(window.event){
if(window.event.type=="mouseover" ){
window.event.fromElement를 반환합니다.
}else if(window.event.type=="mouseout"){
return window.event.toElement;
}
}else{
var f=arguments.callee.caller;
while (f) {
if (f.arguments[0] instanceof Event) {
return f.arguments[0].관련Target;
}
f = f.caller;
}
}
}
sx.event.stopevent=function(){
if (window.event) {
window.event.returnValue=false;
window.event.cancelBubble=true;
}else{
var f=arguments.callee.caller;
while(f){
if(f.arguments[0] instanceof Event){
break;
}
f=f.caller;
}
f.arguments[0].preventDefault();
f.arguments[0].stopPropagation();
}
}
sx.event.adevent=function(e,t,f){
if(!arguments.callee.event){
arguments.callee.event=[] ;
}
if(e.attachEvent){
e.attachEvent("on" t,f);
}else{
e.addEventListener(t,f,false);
}
arguments.callee.event.push(f);
arguments.callee.event.length-1을 반환합니다.
}
sx.event.removeevent=function(e,t,i){
if(e.detachEvent){
e.detachEvent("on" t,sx.event.addevent. 이벤트[i]);
}else{
e.removeEventListener(t,sx.event.addevent.event[i],false);
}
sx.event.addevent.event[i]=null;
}
sx.event.parseevent=function(e,t){
if (sx.comm.ver=="ie"){
e.fireEvent("on" t);
}else{
var evt = document.createEvent("이벤트");
evt.initEvent(t, true, true);
e.dispatchEvent(evt);
}
}
sx.dom={};
sx.dom.text=function(e){
return this.e.innerText?this.e.innerText:this.e.innerHTML.replace(//<.*?/>/igm ,"");
}
sx.dom.elementnodes=function(e,flag){
var temp=[];
var a=e.childNodes;
for(var i=0;iif(a[i].nodeType==flag){
temp.push(a[i]);
}
}
반품 온도;
}
sx.dom.elementallnodes=function(e,flag){
var temp=[];
var a=e.getElementsByTagName("*");
for(var i=0;iif(a[i].nodeType==flag){
temp.push(a[i]);
}
}
반품 온도;
}
sx.dom.xpath=function(e,mode){
p=e.cloneNode(true);
var s=p.getElementsByTagName("script");
for(var i=0;ip.replaceChild(s[i].cloneNode(false),s[i]);
var html=p.outerHTML.replace(//=(?!"|')(.*?)(?=/s|>)/ig,"=/"$1/"");
if(window.ActiveXObject){
var x=new ActiveXObject("Msxml2.DOMDocument")
x.async=false;
x.loadXML("" html);
}else{
var oParser()
//alert(html); oParser.parseFromString(html,"text/xml");
//alert(x.documentElement.tagName)
}
var div=x.selectNodes(mode)//alert (div.length);
var temp=[];
var a1=x.selectNodes(e.tagName.toUpperCase() "//*"); ;
var all=e.getElementsByTagName("*")
//alert(all.length)
var i1=0
for(i=0;i//alert(i);
if(a1[i]==div[i1]){
temp.push(all[i])
i1 ; 🎜>}
}
x=null;
return temp;
}
sx.dom.left=function(e){
if(document.getBoundingClientRect){
return e.getBoundingClientRect().left;
}else{
var a=e;
var left=0
while(a){
left =a.offsetLeft; 🎜>a=a.offsetParent;
}
왼쪽으로 돌아가기
}
}
sx.dom.top = function(e){
if(document.getBoundingClientRect){
return e.getBoundingClientRect().top;
}else{
var a=e;
var top=0;
while(a){
top =a.offsetTop;
a=a.offsetParent;
}
위로 돌아가기;
}
}
sx.dom.getstyle=function(e,prop){
if(e.currentStyle){
return e.currentStyle[prop];
}else{
return document.defaultView.getCompulatedStyle(e,null).getPropertyValue(prop);
}
}
sx.dom.setstyle=function(e,data){
for(var i in data){
e.style[i]=data[i];
}
}
advance.js：
var $=function(id){
return document.getElementById(id);
}



edit.js
：

复主代码

代码아래:

var w=$("content").contentWindow;
w.document.designMode="on";
w.document.open();
w.document.write("")
w.document.close();
if(sx.comm.ver=="ie"){
//w.document.body.style.lineHeight="10px";
}
w.document.onkeydown=function(){
if(sx.comm.ver=="ie"){
if(w.event.keyCode==13){
var s=w.document.selection.createRange();
s.pasteHTML("
");
w.focus();
거짓을 반환합니다.
}
}
}
function wnd(){
var main=document.createElement("div");
sx.dom.setstyle(main,{
위치:"절대",
너비:"100%",
높이:"100%",
배경색상:"lightblue",
필터:"알파(불투명도=50)",
불투명도:0.5
});
var body=document.createElement("div");
sx.dom.setstyle(body,{
위치:"절대",
너비:"200px",
높이:"250px",
배경색상:"녹색",
zIndex:1000
});
var title=document.createElement("div");
sx.dom.setstyle(title,{
너비:"200px",
높이:"20px",
배경색상:"blue",
});
var close=document.createElement("span");
sx.dom.setstyle(close,{
marginLeft:"180px",
디스플레이:"block",
너비:"20px",
높이:"20px",
textAlign:"center",
커서:"포인터"
});
close.innerHTML="X";
close.onclick=function(){
main.parentNode.removeChild(main);
body.parentNode.removeChild(body);
}
title.appendChild(닫기);
body.appendChild(제목);
var content=document.createElement("div");
sx.dom.setstyle(content,{
너비:"200px",
높이:"230px"
});
body.appendChild(콘텐츠);
this.show=function(e){
document.body.appendChild(main);
sx.dom.setstyle(main,{
상단:"0px",
왼쪽:"0px"
});
document.body.appendChild(body);
sx.dom.setstyle(body,{
top:sx.dom.top(e) e.clientHeight "px",
left:sx.dom.left(e) e.clientWidth "px ",
});
}
this.close=close;
this.main=main;
this.body=body;
this.title=제목;
this.content=content;
}
펑션 볼드(){
w.document.execCommand("bold",null,null);
}
function italic(){
w.document.execCommand("italic",null,null);
}
function left(){
w.document.execCommand("JustifyLeft",null,null);
}
기능 센터(){
w.document.execCommand("Justifycenter",null,null);
}
function right(){
w.document.execCommand("Justifyright",null,null);
}
function FontName(값){
w.document.execCommand("FontName", false, value);
}
function FontSize(value){
w.document.execCommand("FontSize", false, value);
}
function inserthr(){
if(document.selection){
w.focus();
var s=w.document.selection.createRange();
s.pasteHTML("<시간/>");
}else{
w.focus();
var s=w.getSelection().getRangeAt(0);
s.insertNode(w.document.createElement("hr"));
}
}
function insertlink(){
if (document.selection) {
w.focus();
var s = w.document.selection.createRange();
}
else {
w.focus();
var s = w.getSelection().getRangeAt(0);
}
var e=sx.event.target();
var ww=new wnd();
ww.content.appendChild(document.createTextNode("请输入链接地址;")));
var link=document.createElement("input");
link.type="text";
link.size=20;
ww.content.appendChild(링크);
var b=document.createElement("버튼");
b.innerHTML="결정";
ww.content.appendChild(b);
b.onclick=function(){
if(sx.comm.ver=="ie"){
s.pasteHTML(" " s.htmlText "");
}
else{
var a=w.document.createElement("a");
a.href=link.value;
s.surroundContents(a);
}
sx.event.parseevent(ww.close,"클릭");
}
ww.show(e);
}
function inserttable(){
if (document.selection) {
w.focus();
var s = w.document.selection.createRange();
}
else {
w.focus();
var s = w.getSelection().getRangeAt(0);
}
var e=sx.event.target();
var ww=new wnd();
ww.content.appendChild(document.createTextNode("请输入行数;")));
var tr=document.createElement("input");
tr.type="text";
tr.size=20;
ww.content.appendChild(tr);
ww.content.appendChild(document.createElement("br"));
ww.content.appendChild(document.createTextNode("请输入列数;")));
var td=document.createElement("input");
td.type="text";
td.size=20;
ww.content.appendChild(td);
ww.content.appendChild(document.createElement("br"));
ww.content.appendChild(document.createTextNode("请输入单元格높이도;")));
var height=document.createElement("input");
height.type="text";
높이.크기=20;
ww.content.appendChild(높이);
ww.content.appendChild(document.createElement("br"));
ww.content.appendChild(document.createTextNode("请输入单元格宽島;"));
var width=document.createElement("input");
width.type="text";
너비.크기=20;
ww.content.appendChild(너비);
ww.content.appendChild(document.createElement("br"));
var b=document.createElement("버튼");
b.innerHTML="결정";
ww.content.appendChild(b);
b.onclick=function(){
var l1=Number(tr.value);
var l2=숫자(td.value);
var h1=숫자(높이.값);
var w1=숫자(너비.값);
ww.content.appendChild(document.createTextNode("请输入单元格높이도;")));
var t=document.createElement("테이블");
t.border="1";
var tb=document.createElement("tbody");
t.appendChild(tb);
for(var i=0;ivar tr1=document.createElement("tr");
for(var i1=0;i1var td1=document.createElement("td");
td1.innerHTML="";
sx.dom.setstyle(td1,{
너비:w1 "px",
높이:h1 "px"
});
tr1.appendChild(td1);
}
tb.appendChild(tr1);
}
if(sx.comm.ver=="ie"){
s.pasteHTML(t.outerHTML);
}
else{
s.insertNode(t);
s.insertNode(document.createElement("br"));
}
sx.event.parseevent(ww.close,"클릭");
}
ww.show(e);
}
function color(){
var e=sx.event.target();
if (document.selection) {
w.focus();
var s = w.document.selection.createRange();
}
else {
w.focus();
var s = w.getSelection().getRangeAt(0);
}
var ww=new wnd();
var colors = ["00","33","66","99","CC","FF"];
var cp=document.createElement("span");
sx.dom.setstyle(cp,{
디스플레이:"inline-block",
너비:"10px",
높이:"10px",
여백:"2px"
});
for(var i1=5;i1>=0;i1--){
for(var i2=5;i2>=0;i2--){
for(var i3=5; i3>=0;i3--){
var cp1=cp.cloneNode(true);
cp1.style.BackgroundColor="#" 색상[i1] 색상[i2] 색상[i3];
cp1.title="#" 색상[i1] 색상[i2] 색상[i3];
cp1.onclick=function(){
if(sx.comm.ver=="ie"){
w.focus();
s.pasteHTML("" s.htmlText "");
}
else{
var a=w.document.createElement("font");
a.color=this.title;
s.surroundContents(a);
}
sx.event.parseevent(ww.close,"클릭");
}
ww.content.appendChild(cp1);
}
}
}
ww.show(e);
}

关键是demo.html和edit.js里的代码，core.js와advance.js里的代码是我为兼容浏览器写的，本想把它扩展成一个完善的框架的，因为时间有限，就没写下去了。

本编辑器还没有实现图文件的上传，因为需要服务器技术，所以我就没写了，可以交给读者慢慢研究。
저는 웹에서也会继续完善这个编辑器以及javascript兼容的框架。
恩，好好加油吧。