📄 editor.js
字号:
//PsEditor JS CODE
function PsEditor() {
this.editMode = 'ubbcode';
this.htmlArea = null;
this.textArea = null;
this.timerToolbar = null;
this.doc = null;
this.iframe = null;
}
PsEditor.prototype = {
init : function(mode) {
this.textArea = $('textarea');
if (this.textArea.form) {
this.addEvent(this.textArea, "keydown", function(event){quickpost(event);});
var f = this.textArea.form;
if (typeof f.onsubmit == "function") {
var funcref = f.onsubmit;
if (typeof f.__msh_prevOnSubmit == "undefined") {
f.__msh_prevOnSubmit = [];
}
f.__msh_prevOnSubmit.push(funcref);
}
f.onsubmit = function() {
if (editor.editMode == "ubbcode") {
editor.textArea.value = editor.getValue();
} else {
editor.textArea.value = htmltocode(editor.getValue());
}
var a = this.__msh_prevOnSubmit;
if (typeof a != "undefined") {
for (var i in a) {
return a[i]();
}
}
}
}
this.initButtom();
this.updateToolbar();
if (typeof mode != 'undefined' && mode == 'wysiwyg') {
setTimeout("editor.cmd('wysiwyg');",100);
}
},
initButtom : function(){
var tb_objects = new Object();
this.toolbarObjects = tb_objects;
function setButtonStatus(newval) {
var el = this.element;
if (newval) {
editor.addClass(el,"buttonActive");
} else {
editor.removeClass(el,"buttonActive");
}
}
function setButton(obj) {
var cmdId = obj.id.substr(obj.id.indexOf('_')+1);
tb_objects[cmdId] = {element : obj,state : setButtonStatus};
editor.addEvent(obj, "mouseover", function(){editor.addClass(obj, "buttonHover");});
editor.addEvent(obj, "mouseout", function(){editor.removeClass(obj, "buttonHover");});
editor.addEvent(obj, "click", function(ev){
editor.cmd(cmdId);
editor.stopEvent(is_ie ? window.event : ev);
});
obj.unselectable = "on";
}
function setswitch(obj) {
var cmdId = obj.id.substr(obj.id.indexOf('_')+1);
editor.addEvent(obj, "click", function(){editor.cmd(cmdId)});
}
var buttons = $('editor-bt').getElementsByTagName('div');
for (var i=0;i<buttons.length;i++) {
if (buttons[i].className == "button" || buttons[i].className == "select") {
setButton(buttons[i]);
}
}
var switchs = $('switch').getElementsByTagName('li');
for (var i=0;i<switchs.length;i++) {
setswitch(switchs[i]);
}
},
addEvent : function(el, evname, func) {
if (is_ie) {
el.attachEvent("on" + evname, func);
} else {
el.addEventListener(evname, func, true);
}
},
stopEvent : function(ev){
if (is_ie) {
ev.cancelBubble = true;
ev.returnValue = false;
} else {
ev.preventDefault();
ev.stopPropagation();
}
},
addEvents : function(el, evs, func) {
for (var i in evs) {
this.addEvent(el, evs[i], func);
}
},
removeClass : function(el, className) {
if (!(el && el.className)) {
return;
}
var cls = el.className.split(" ");
var ar = new Array();
for (var i = cls.length; i > 0;) {
if (cls[--i] != className) {
ar[ar.length] = cls[i];
}
}
el.className = ar.join(" ");
},
addClass : function(el, className) {
this.removeClass(el, className);
el.className += " " + className;
},
cmd : function(cmdId) {
this.focusEditor();
if (this.editMode == "ubbcode") {
this.ubbcode(cmdId);
} else {
this.execCommand(cmdId,false);
}
this.updateToolbar();
},
showselect : function(cmdId) {
var menu_editor = $("menu_editor");
var wh = {'fontname' : '110','fontsize' : '50'};
var html = '<ul style="width:'+wh[cmdId]+'px;">';
var options = this.config[cmdId];
for (var i in options) {
if (i != 'default') {
html += "<li"+(cmdId=='fontname' ? ' style="font-family:'+options[i]+';"' : '')+"><a unselectable=\"on\" href=\"#\" style=\"padding:.2em .4em\" onclick=\"return editor.GetSelectedValue('"+cmdId+"','"+options[i]+"');\">"+i+"</a></li>";
}
}
html += '</ul>';
menu_editor.innerHTML = html;
read.open('menu_editor','wy_' + cmdId);
},
showcolor : function(cmdId) {
var menu_editor = $("menu_editor");
var colors = [
'000000','660000','663300','666600','669900','66CC00','66FF00','666666','660066','663366','666666',
'669966','66CC66','66FF66','CCCCCC','6600CC','6633CC','6666CC','6699CC','66CCCC','66FFCC','FF0000',
'FF0000','FF3300','FF6600','FF9900','FFCC00','FFFF00','0000FF','FF0066','FF3366','FF6666','FF9966',
'FFCC66','FFFF66','00FFFF','FF00CC','FF33CC','FF66CC','FF99CC','FFCCCC','FFFFCC'
];
var html = '<div id="colorbox">';
for (i in colors) {
html += "<div unselectable=\"on\" style=\"background:#" + colors[i] + "\" onClick=\"editor.SetC('" + colors[i] + "','" + cmdId + "')\"></div>";
}
html += '</div>';
menu_editor.innerHTML = html;
read.open('menu_editor','wy_' + cmdId);
},
SetC : function(color,cmdId) {
this.focusEditor();
if (this.editMode == 'ubbcode') {
var text = this.getsel();
var ctype = cmdId == 'forecolor' ? 'color' : 'backcolor';
var opentag = "[" + ctype + "=#" + color + "]";
var colsetag = '[/' + ctype + ']';
if (!text) text = '';
this.insertText(opentag + text + colsetag,opentag.length,text.length);
} else {
if (cmdId == 'hilitecolor' && is_ie) cmdId = "backcolor";
this.doc.execCommand(cmdId, false, "#" + color);
}
closep();
},
ubbcode : function(cmdId) {
var text = this.getsel();
var opentag = closetag = '';
switch (cmdId) {
case "wysiwyg": this.setMode(); return false;
case "ubbcode": return false;
case 'fontname':
case 'fontsize': this.showselect(cmdId);return;
case 'forecolor':
case 'hilitecolor': this.showcolor(cmdId);return;
case "bold": opentag="[b]";closetag="[/b]";break;
case "italic": opentag="[i]";closetag="[/i]";break;
case "underline": opentag="[u]";closetag="[/u]";break;
case "strikethrough": opentag="[strike]";closetag="[/strike]";break;
case "subscript": opentag="[sub]";closetag="[/sub]";break;
case "superscript": opentag="[sup]";closetag="[/sup]";break;
case "justifyleft": opentag="[align=left]";closetag="[/align]";break;
case "justifycenter": opentag="[align=center]";closetag="[/align]";break;
case "justifyright": opentag="[align=right]";closetag="[/align]";break;
case "justifyfull": opentag="[align=justify]";closetag="[/align]";break;
case "inserthorizontalrule": opentag="[hr]";text='';break;
case "indent": opentag="[blockquote]";closetag="[/blockquote]";break;
case "createlink":
if (text) {
opentag="[url=" + text + "]";
} else {
text = prompt('URL:',"http://");
if (text) {
opentag="[url=" + text + "]";
} else {
opentag="[url]";
}
}
closetag="[/url]";
break;
case "insertorderedlist":
if (text) {
opentag="[list=a][li]";closetag="[/li][/list]";
} else {
txt = prompt('a,A,1',"a");
while (txt!="A" && txt!="a" && txt!="1" && txt!=null) {
txt = prompt('a,A,1',"a");
}
if (txt != null) {
if (txt=="1") {
opentag="[list=1]";
} else if(txt=="a"){
opentag="[list=a]";
} else if(txt=="A"){
opentag="[list=A]";
}
ltxt = "1";
while (ltxt!="" && ltxt!=null) {
ltxt = prompt(I18N['listitem'],"");
if (ltxt!="") {
text+="[li]"+ltxt+"[/li]";
}
}
closetag+="[/list]";
}
}
break;
case "insertunorderedlist":
if (text) {
opentag="[list][li]";closetag="[/li][/list]";
} else {
opentag="[list]";
txt="1";
while (txt!="" && txt!=null) {
txt=prompt(I18N['listitem'],"");
if (txt!="") {
text+="[li]"+txt+"[/li]";
}
}
closetag+="[/list]";
}
break;
case "insertimage":
txt = prompt('URL:',"http://");
opentag="[img]";closetag="[/img]";
if (txt != null) {
text = txt;
}
break;
default : return false;
}
if (!text) text = '';
this.insertText(opentag + text + closetag,opentag.length,text.length);
},
execCommand : function(cmdId, UI, param){
switch (cmdId) {
case "wysiwyg" : break;
case "ubbcode" : this.setMode(); break;
case "br" : this.insertHTML('<br />');break;
case 'fontname':
case 'fontsize': this.showselect(cmdId);break;
case 'forecolor':
case 'hilitecolor': this.showcolor(cmdId);break;
case "insertimage" :
txt = prompt('URL:',"http://");
if (txt != null) {
try {this.doc.execCommand(cmdId,false,txt);} catch(e){}
}
break;
default : try {this.doc.execCommand(cmdId, UI, param);} catch(e){}
}
return false;
},
GetSelectedValue : function(cmdId,value) {
this.focusEditor();
if (this.editMode == "ubbcode") {
this.cmdselect(cmdId,value);
} else {
this.doc.execCommand(cmdId, false, value);
}
this.updateToolbar();
closep();
return false;
},
cmdselect : function(cmdID,value) {
var text = this.getsel();
var opentag = closetag = '';
switch (cmdID) {
case "fontname": opentag="[font=" + value + "]";closetag="[/font]";break;
case "fontsize": opentag="[size=" + value + "]";closetag="[/size]";break;
}
if (!text) text = '';
this.insertText(opentag + text + closetag,opentag.length,text.length);
},
focusEditor : function(){
switch (this.editMode) {
case "wysiwyg": this.iframe.contentWindow.focus(); break;
case "ubbcode": this.textArea.focus(); break;
default : alert("ERROR: mode " + this.editMode + " is not defined");
}
return this.doc;
},
getsel : function (){
if (this.editMode == "wysiwyg") {
return '';
} else if (document.selection) {
return document.selection.createRange().text;
} else if (typeof this.textArea.selectionStart != 'undefined') {
return this.textArea.value.substr(this.textArea.selectionStart,this.textArea.selectionEnd - this.textArea.selectionStart);
} else if (window.getSelection) {
return window.getSelection();
}
},
insertText : function(code,start,length) {
if (this.editMode == "wysiwyg") {
this.insertHTML(code);
return;
}
if (typeof start == 'undefined') {
start = code.length;
length = 0;
}
if (document.selection) {
var sel = document.selection.createRange();
sel.text = code;
sel.moveStart('character',-code.length + start);
sel.moveEnd('character', -code.length + length + start);
sel.select();
} else if (typeof editor.textArea.selectionStart != 'undefined') {
var prepos = this.textArea.selectionStart;
this.textArea.value = this.textArea.value.substr(0,prepos) + code + this.textArea.value.substr(this.textArea.selectionEnd);
this.textArea.selectionStart = prepos + start;
this.textArea.selectionEnd = prepos + start + length;
} else {
document.FORM.atc_content.value += code;
}
},
setMode : function(mode) {
if (typeof mode == "undefined") {
mode = this.editMode == "ubbcode" ? "wysiwyg" : "ubbcode";
}
switch (mode) {
case "ubbcode":
this.textArea.value = htmltocode(this.getValue());
this.iframe.style.display = "none";
this.textArea.style.display = "block";
this.textArea.style.width = "550px";
break;
case "wysiwyg":
if (this.htmlArea == null && !IsElement('htmlarea')) {
this.initIframe();
}
if (is_gecko) {
this.doc.designMode = "off";
}
body = this.doc.getElementsByTagName("body")[0];
body.innerHTML = codetohtml(this.getValue());
this.textArea.style.display = "none";
this.iframe.style.display = "block";
if (is_gecko) {
this.doc.designMode = "on";
}
break;
default:
alert("Mode <" + mode + "> not defined!");
return false;
}
this.editMode = mode;
this.focusEditor();
var switchs = $('switch').getElementsByTagName('li');
for (var i=0;i<switchs.length;i++) {
switchs[i].className = switchs[i].id == 'wy_'+this.editMode ? 'active' : '';
}
},
initIframe : function(){
var htmlarea = document.createElement("div");
htmlarea.id = 'htmlarea';
htmlarea.className = "htmlarea";
htmlarea.style.width = "550px";
this.htmlArea = htmlarea;
this.textArea.parentNode.insertBefore(htmlarea, this.textArea);
var iframe = document.createElement("iframe");
iframe.style.display = "none";
htmlarea.appendChild(iframe);
this.iframe = iframe;
if (!is_ie) {
iframe.style.borderWidth = "0px";
}
var height = this.textArea.offsetHeight;
var width = this.textArea.offsetWidth;
height = parseInt(height);
width = parseInt(width);
iframe.style.width = width + "px";
iframe.style.height = height + "px";
this.textArea.style.width = iframe.style.width;
this.textArea.style.height= iframe.style.height;
this.doc = this.iframe.contentWindow.document;
this.doc.open();
var html = "<html>\n";
html += "<head>\n";
html += "<style>html,body{border:0px;font-family:Verdana;font-size:12px;margin:2;word-wrap:break-word;}\n";
html += "img{border:0;}p{margin:0px;}</style>\n";
html += "</head>\n";
html += "<body>\n";
html += "</body>\n";
html += "</html>";
this.doc.write(html);
this.doc.close();
if (is_ie) {
this.doc.body.contentEditable = true;
}
this.addEvent(this.doc, "keydown",function(event){quickpost(event);});
this.addEvents(this.doc, ["keydown", "keypress", "mousedown", "mouseup", "drag"],
function(event){return editor.editorEvent(is_ie ? editor.iframe.contentWindow.event : event);}
);
},
editorEvent : function(ev) {
if (this.timerToolbar) {
clearTimeout(this.timerToolbar);
}
this.timerToolbar = setTimeout(function(){editor.updateToolbar();editor.timerToolbar = null;},50);
},
getValue : function() {
switch (this.editMode) {
case "wysiwyg": return this.getHTML(this.doc.body, false, this);break;
case "ubbcode": return this.textArea.value;break;
default : alert("Mode <" + mode + "> not defined!");
}
return false;
},
updateToolbar : function() {
var iftext = (this.editMode == "ubbcode");
for (var cmdId in this.toolbarObjects) {
var btn = this.toolbarObjects[cmdId];
switch (cmdId) {
case "fontname":
case "fontsize":
case "formatblock":
var options = this.config[cmdId];
if (iftext) {
btn.element.lastChild.innerHTML = options['default'];
} else {
try {
var value = ("" + this.doc.queryCommandValue(cmdId)).toLowerCase();
if (!value) break;
for (var j in options) {
if (j.toLowerCase()==value ||
options[j].substr(0,value.length).toLowerCase()==value) {
btn.element.lastChild.innerHTML = j;
break;
}
}
} catch(e){};
}
break;
default:
try {btn.state(!iftext && this.doc.queryCommandState(cmdId));} catch (e){};
}
}
},
insertHTML : function(html){
var sel = this.getSelection();
var range = this.createRange(sel);
if (is_ie) {
range.pasteHTML(html);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -