📄 editor.js
字号:
var Editor = {
buttons:[
[__('undo'),'Undo'],
[__('redo'),'Redo'],
[__('cut'),'Cut'],
[__('copy'),'Copy'],
[__('paste'),'Paste'],
[__('bold'),'Bold'],
[__('italic'),'Italic'],
[__('underline'),'Underline'],
[__('fontname'),'FontName'],
[__('fontsize'),'FontSize'],
[__('forecolor'),'FontColor'],
[__('link'),'Link'],
[__('bullist'),'InsertOrderedList'],
[__('numlist'),'InsertUnorderedList'],
[__('outdent'),'Outdent'],
[__('indent'),'Indent'],
[__('justifyleft'),'JustifyLeft'],
[__('justifycenter'),'JustifyCenter'],
[__('justifyright'),'JustifyRight'],
[__('insert'),'Insert']
],
GetButtons:function (label, cmd,icon){
return Builder.node('img',{alt:label,onmouseup:'Editor.execCommand(this,\'' + cmd + '\');',className:'mceButtonNormal',style:'background-position:0 '+(-18*icon)+'px;"',width:18,height:18,src:'?ctl=sfile&act=res&p[0]=images/blank.gif'});
}
,
GetToolBar:function () {
var toolbar = Builder.node('th');
toolbar.style.whiteSpace = 'nowrap';
for (var i = 0; i < Editor.buttons.length; i ++) {
toolbar.appendChild(Editor.GetButtons(Editor.buttons[i][0],Editor.buttons[i][1],i));
}
return toolbar;
},
GetInsBar:function(){
return toolbar = Builder.node('td',{align:'right'},[Builder.node('img',{onmouseup:'Editor.execCommand(this,\'Source\');',className:'mceButtonNormal',style:'float:right;background-position:0 -380px;"',width:42,height:18,src:'?ctl=sfile&act=res&p[0]=images/blank.gif'})]);
},
runtime:{seq:0},
triggerSave:function(f){
var toRemove = [];
e = Element.getElementsByClassName(f,'mceEditor');
for(i=0;i<e.length;i++){
if(e[i].nextSibling){
if(e[i].nextSibling.getAttribute('mce') == e[i].getAttribute('mce')){
var area = e[i].nextSibling;
var sEditMode = (e[i].getAttribute('inHtml')=='true');
if(sEditMode) {
Editor.oInputFunc(e[i]);
sEditMode = false;
}
var oRTE = Editor.getFrameNode(e[i].getAttribute('mce'));
oRTE.focus();
if(sEditMode){
if(!window.Event){
area.value = oRTE.document.body.innerText;
}else{
var oMozText = oRTE.document.body.ownerDocument.createRange();
oMozText.selectNodeContents(oRTE.document.body);
area.value = oMozText.toString();
}
}else{
area.value = oRTE.document.body.innerHTML;
}
re = /(http:\/\/|\.\/\.\.\/)[^\'\"<>]*?\/pictures\/newsimg\//g;
area.value = area.value.replace(re, 'pictures/newsimg/');
area.value = Editor.cleanHTML(area.value);
area.value = Editor.disableNodes(area.value);
}
}
}
},
init:function (obj){
Editor.runtime.seq++;
sRTE = 'editor_'+Editor.runtime.seq;
var base = Builder.node('iframe',{id:sRTE,border:0,frameborder:0})
var mce = Builder.node('table',{className:'mceEditor',border:0,cellpadding:0,cellspacing:0,mce:sRTE},[
Builder.node('tbody',{},[
Builder.node('tr',{className:'mceToolbar',toolbar:'editor_'+Editor.runtime.seq},[
Builder.node('td',{},[
Builder.node('table',{width:'100%',border:0,cellpadding:0,cellspacing:0},[
Builder.node('tbody',{},[
Builder.node('tr',{},[
Editor.GetToolBar(),Editor.GetInsBar()
])
])
])
])
]),
Builder.node('tr',{},[
Builder.node('td',{},[base])
])
])
]);
mce.style.height = '300px';
mce.style.width = '650px';
base.style.height = '300px';
base.style.width = '650px';
obj.style.display='none';
obj.setAttribute('mce',sRTE);
obj.parentNode.insertBefore(mce,obj);
var sFix = window.event ? "<div> </div>" : "";
re = /pictures\/newsimg\//g;
obj.value = obj.value.replace(re, './../home/shop/1/pictures/newsimg/');
var frameHTML = "\
<html>\n\
<head>\n\
<script type=\"text/javascript\">\n\
function init(){\n\
parentPageDomain = document.location.href.split('#')[1];\n\
if (parentPageDomain) {\n\
document.domain = parentPageDomain;\n\
}\n\
}\n\
window.onload = init;\n\
window.onfocus = function() {\n\
document.designMode = 'On';\n\
}\n\
</script>\n\
<style>\n\
body {\n\
background: #ffffff;\n\
margin:0px;\n\
padding:5px;\n\
font-size:12px;\n\
overflow:auto;\n\
word-wrap: break-word;\n\
font: normal 90% \"Lucida Grande\", Helvetica, Verdana, Arial;\n\
}\n\
</style>\n\
</head>\n\
<body>\n\
" + obj.value + "\n\
" + sFix + "\n\
</body>\n\
</html>";
var oRTE = Editor.getFrameNode(sRTE).document;
oRTE.open();
oRTE.write(frameHTML);
oRTE.close();
try{
oRTE.designMode='on';
}catch(e){;}
},
oInputFunc:function (obj){
for(o=obj;!o.getAttribute('mce');o=o.parentNode){;}
var sEditMode =(o.getAttribute('inHtml')=='true');
oRTE = Editor.getFrameNode(o.getAttribute('mce'));
oRTE.focus();
if(sEditMode){
o.setAttribute('inHtml','false');
obj.getElementsByTagName('th')[0].style.display='';
if(/MSIE/.test(navigator.userAgent)){
var sOutText = escape(oRTE.document.body.innerText);
sOutText = sOutText.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E");
sOutText = sOutText.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E");
oRTE.document.body.innerHTML = unescape(sOutText);
}else{
var oMozText = oRTE.document.body.ownerDocument.createRange();
oMozText.selectNodeContents(oRTE.document.body);
oRTE.document.body.innerHTML = oMozText.toString();
}
}else{
obj.getElementsByTagName('th')[0].style.display='none';
o.setAttribute('inHtml','true');
var innerHTML = oRTE.document.body.innerHTML;
innerHTML = Editor.cleanHTML(innerHTML);
innerHTML = Editor.disableNodes(innerHTML);
if(!window.Event){
oRTE.document.body.innerText = innerHTML;
}else{
var oMozText = oRTE.document.createTextNode(innerHTML);
oRTE.document.body.innerHTML = "";
oRTE.document.body.appendChild(oMozText);
}
}
}
,
removeformat:function () {
var oRTE = Editor.getFrameNode(sRTE);
oRTE.focus();
if (! window.Event){
var body = oRTE.document.body;
for (var index = 0; index < body.all.length; index++) {
tag = body.all[index];
tag.removeAttribute("className","",0);
tag.removeAttribute("style","",0);
}
var html = oRTE.document.body.innerHTML;
html = html.replace(/\<p>/gi,"[$p]");
html = html.replace(/\<\/p>/gi,"[$\/p]");
html = html.replace(/\<br[^>]*>/gi,"[$br]");
html = html.replace(/\<[^>]*>/g,"");
html = html.replace(/\[\$p\]/gi,"<p>");
html = html.replace(/\[\$\/p\]/gi,"<\/p>");
html = html.replace(/\[\$br\]/gi,"<br>");
oRTE.document.body.innerHTML = html;
}else{
var oMozText = oRTE.document.body.ownerDocument.createRange();
oMozText.selectNodeContents(oRTE.document.body);
oRTE.document.body.innerHTML = oMozText.toString();
}
} ,
getFrameNode:function (sNode){
doc = document.frames ? document.frames[sNode] : $(sNode).contentWindow;
return doc;
} ,
execCommand:function (sRTE,_sCmd,html) {
if(typeof(sRTE)=='object'){
obj = sRTE;
for(o=sRTE.parentNode;!o.getAttribute('toolbar');o=o.parentNode){;}
sRTE = o.getAttribute('toolbar');
}
var oRTE = Editor.getFrameNode(sRTE);
oRTE.document.designMode='on';
switch(_sCmd){
case "":
break;
case "FontSize":
var m = Builder.node('ul',{className:'menu',style:'visibility:hidden'});
[8,10,12,14,18,24,36].each(
function(s,k){
m.appendChild(Builder.node('li',{onmouseover:"Editor.getFrameNode('"+sRTE+"').document.execCommand('FontSize',false,'"+(k+1)+"')"},[s]));
}
)
X.menus.bind(m);
document.body.appendChild(m);
Position.clone(obj,m,{setHeight: false,setWidth:false,offsetTop: obj.offsetHeight});
m.style.visibility='';
break;
case "Insert":
var m = Builder.node('ul',{className:'menu',style:'visibility:hidden;'});
[
['Image',__('Image')],
['Table',__('Table')],
['InsertHorizontalRule',__('CreatLine')],
['Chars',__('Specal Chars')]
].each(
function(s){
m.appendChild(Builder.node('li',{onclick:"Editor.execCommand('"+sRTE+"','"+s[0]+"')"},s[1]));
}
)
X.menus.bind(m);
document.body.appendChild(m);
Position.clone(obj,m,{setHeight: false,setWidth:false,offsetTop: obj.offsetHeight});
m.style.visibility='';
break;
case "CreatLine":
oRTE.document.body.appendChild(Builder('hr'));
break;
case "FontName":
var m = Builder.node('ul',{className:'menu',style:'visibility:hidden;'});
['Arial',
'Arial Black',
'Arial Narrow',
'Comic Sans MS',
'Courier New',
'Garamond',
'Georgia',
'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana'].each(
function(s){
m.appendChild(Builder.node('li',{onmouseover:"Editor.getFrameNode('"+sRTE+"').document.execCommand('FontName',false,'"+(s)+"')"},s));
}
)
X.menus.bind(m);
document.body.appendChild(m);
Position.clone(obj,m,{setHeight: false,setWidth:false,offsetTop: obj.offsetHeight});
m.style.visibility='';
break;
case "Link":
// fbox.open({ctl:'common/editor',act:'link',p:[sRTE]},{width:400,height:500,noClose:true});
var url = window.prompt(__('Please enter the link address.(e.g. http://www.yahoo.com)'), 'http://');
if (url != null) {
oRTE.document.execCommand('CreateLink', false, url);
}
break;
case "Table":
fbox.open({ctl:'common/editor',act:'table',p:[sRTE]},{width:400,height:500,noClose:true});
break;
case "Image":
fbox.open({ctl:'common/editor',act:'image',p:[sRTE]},{width:400,height:500,noClose:true});
break;
case "Chars":
fbox.open({ctl:'common/editor',act:'chars',p:[sRTE]},{width:450,height:500,noClose:true});
break;
case "Media":
fbox.open({ctl:'common/editor',act:'media',p:[sRTE]},{width:400,height:500,noClose:true});
break;
case "FontColor":
var m = Builder.node('ul',{className:'menu',style:'visibility:hidden;'});
['FF0000','00FF00','0000FF','00FFFF','FFE4C4','8A2BE2','FFF8DC','008B8B','BDB76B','9932CC','483D8B','FF1493','B22222','DCDCDC','808080','FF69B4','F0E68C','FFFACD','FAFAD2','7CFC00','0000CD','7B68EE','6B8E23'].each(
function(s){
m.appendChild(Builder.node('li',{onmouseover:"Editor.getFrameNode('"+sRTE+"').document.execCommand('ForeColor',false,'"+(s)+"')",style:"background:#"+s+";"},s));
}
)
X.menus.bind(m);
document.body.appendChild(m);
Position.clone(obj,m,{setHeight: false,setWidth:false,offsetTop: obj.offsetHeight});
m.style.visibility='';
break;
case "BgColor":
colorPic.build(obj,{callback:Editor.callback.BgColor,mce:sRTE});
break;
case "RemoveFormat":
Editor.removeformat();
break;
case "Source":
Editor.oInputFunc(o,oRTE);
break;
default:
oRTE.focus();
oRTE.document.execCommand(_sCmd, false, html);
break;
}
// }catch(e){;}
} ,
showpic:function(url){
width = 300;
height = 300;
url = 'file://'+url.replace(/\\/g,"/");
$('imgDiv').innerHTML = '<img id="imgPreview" src="'+url+'"/>';
obj = $('imgPreview');
imgWidth = obj.width;
imgHeight = obj.height;
if(imgWidth/imgHeight >= width/height){
if(imgWidth > width){
setWidth = width;
setHeight = (imgHeight*width)/imgWidth;
}else{
setWidth = imgWidth;
setHeight = imgHeight;
}
}else{
if(imgHeight>height){
setWidth = (imgWidth*height)/imgHeight;
setHeight = height;
}else{
setWidth = imgWidth;
setHeight = imgHeight;
}
}
obj.style.width = setWidth+'px';
obj.style.height = setHeight+'px';
},
callback:{
fontColor:function(rgb,options){
Editor.getFrameNode(options.mce).document.execCommand('ForeColor',false,rgb);
},
BgColor:function(rgb,options){
Editor.getFrameNode(options.mce).document.execCommand('BackColor',false,rgb);
}
},
cleanHTML:function (s) {
s = Editor.cleanNodes(s);
s = s.replace(/<(hr|br)>/gi, '<$1 \/>\n');
s = s.replace(/<(img [^>]+)>/gi, '<$1 \/>');
s = s.replace(/<(input [^>]+)>/gi, '<$1 \/>');
return s;
} ,
cleanNodes:function (s) {
// 获取标记的开始位置
var htmlPattern = new RegExp('<[ ]*([\\w]+).*?>', 'gi');
s = s.replace(htmlPattern, function(ref) {
var cleanStartTag = "";
// 分离标记和该标记的属性
var ref = ref.replace('^<[ ]*', '<');
var ndx = ref.search(/\s/);
var tagname = ref.substring(0 ,ndx);
var attributes = ref.substring(ndx, ref.length);
// 把标记名统一转换为小写
if (ndx == -1) return ref.toLowerCase(); // 简单标记
cleanStartTag += tagname.toLowerCase();
// 成对分割标记属性
var pairs = attributes.match(/[\w]+\s*=\s*("[^"]*"|[^">\s]*)/gi);
if (pairs) {
for (var t = 0; t < pairs.length; t++) {
var pair = pairs[t];
var ndx = pair.search(/=/);
// 把属性名转换为小写
var attrname = pair.substring(0, ndx).toLowerCase();
if (attrname.match(/on\w+/i)) {
continue;
}
// 为属性值加上双引号
var attrval = pair.substring(ndx, pair.length);
var wellFormed = new RegExp('=[ ]*"[^"]*"', "g");
if (!wellFormed.test(attrval)) {
var attrvalPattern = new RegExp('=(.*?)', 'g');
attrval = attrval.replace(attrvalPattern, '=\"$1');
attrval += '"';
}
var attr = attrname + attrval;
cleanStartTag += " " + attr;
}
}
cleanStartTag += ">";
return cleanStartTag;
});
// 把结束标记转换为小写
s = s.replace(/<\/\s*[\w]*\s*>/g, function (ref) {return ref.toLowerCase();});
return s;
},
disableNodes:function (s) {
var scriptPattern = new RegExp('<script[^>]*>.*<\/script\s*>', 'gi');
s = s.replace(scriptPattern, '');
var framePattern = new RegExp('<i?frame[^>]*>.*<\/i?frame\s*>', 'gi');
s = s.replace(framePattern, '');
var formPattern = new RegExp('<form[^>]*>.*</form\s*>', 'gi');
s = s.replace(formPattern, '');
return s;
},
insert:{
image:function(a,o){
//
}
}
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -