📄 editor.js
字号:
var val = (idx != null) ? button_obj[ idx ].value : null;
if (0) {} // use else if for easy cutting and pasting
//
// CUSTOM BUTTONS START HERE
//
// Custom1
else if (cmdID == 'custom1') {
alert("Hello, I am custom button 1!");
}
// Custom2
else if (cmdID == 'custom2') { // insert some text from a popup window
var myTitle = "This is a custom title";
var myText = showModalDialog(_editor_url + "popups/custom2.html",
myTitle, // str or obj specified here can be read from dialog as "window.dialogArguments"
"resizable: yes; help: no; status: no; scroll: no; ");
if (myText) { editor_insertHTML(objname, myText); }
}
// Custom3
else if (cmdID == 'custom3') { // insert some text
editor_insertHTML(objname, "It's easy to add buttons that insert text!");
}
//
// END OF CUSTOM BUTTONS
//
// FontName
else if (cmdID == 'FontName' && val) {
editdoc.execCommand(cmdID,0,val);
}
// FontSize
else if (cmdID == 'FontSize' && val) {
editdoc.execCommand(cmdID,0,val);
}
// FontStyle (change CSS className)
else if (cmdID == 'FontStyle' && val) {
editdoc.execCommand('RemoveFormat');
editdoc.execCommand('FontName',0,'636c6173734e616d6520706c616365686f6c646572');
var fontArray = editdoc.all.tags("FONT");
for (i=0; i<fontArray.length; i++) {
if (fontArray[i].face == '636c6173734e616d6520706c616365686f6c646572') {
fontArray[i].face = "";
fontArray[i].className = val;
fontArray[i].outerHTML = fontArray[i].outerHTML.replace(/face=['"]+/, "");
}
}
button_obj.selectedIndex =0;
}
// fgColor and bgColor
else if (cmdID == 'ForeColor' || cmdID == 'BackColor') {
var oldcolor = _dec_to_rgb(editdoc.queryCommandValue(cmdID));
var newcolor = showModalDialog(_editor_url + "popups/select_color.html", oldcolor, "resizable: no; help: no; status: no; scroll: no;");
if (newcolor != null) { editdoc.execCommand(cmdID, false, "#"+newcolor); }
}
// execute command for buttons - if we didn't catch the cmdID by here we'll assume it's a
// commandID and pass it to execCommand(). See http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp
else {
// subscript & superscript, disable one before enabling the other
if (cmdID.toLowerCase() == 'subscript' && editdoc.queryCommandState('superscript')) { editdoc.execCommand('superscript'); }
if (cmdID.toLowerCase() == 'superscript' && editdoc.queryCommandState('subscript')) { editdoc.execCommand('subscript'); }
// insert link
if (cmdID.toLowerCase() == 'createlink'){
editdoc.execCommand(cmdID,1);
}
// insert image
else if (cmdID.toLowerCase() == 'insertimage'){
showModalDialog(_editor_url + "popups/insert_image.html", editdoc, "resizable: no; help: no; status: no; scroll: no; ");
}
// insert table
else if (cmdID.toLowerCase() == 'inserttable'){
showModalDialog(_editor_url + "popups/insert_table.html?"+objname,
window,
"resizable: yes; help: no; status: no; scroll: no; ");
}
// all other commands microsoft Command Identifiers
else { editdoc.execCommand(cmdID); }
}
editor_event(objname);
}
/* ---------------------------------------------------------------------- *\
Function : editor_event
Description : called everytime an editor event occurs
Usage : editor_event(objname, runDelay, eventName)
Arguments : objname - ID of textarea to replace
runDelay: -1 = run now, no matter what
0 = run now, if allowed
1000 = run in 1 sec, if allowed at that point
\* ---------------------------------------------------------------------- */
function editor_event(objname,runDelay) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname+ "_editor"]; // html editor object
if (runDelay == null) { runDelay = 0; }
var editdoc;
var editEvent = editor_obj.contentWindow ? editor_obj.contentWindow.event : event;
// catch keypress events
if (editEvent && editEvent.keyCode) {
var ord = editEvent.keyCode; // ascii order of key pressed
var ctrlKey = editEvent.ctrlKey;
var altKey = editEvent.altKey;
var shiftKey = editEvent.shiftKey;
if (ord == 16) { return; } // ignore shift key by itself
if (ord == 17) { return; } // ignore ctrl key by itself
if (ord == 18) { return; } // ignore alt key by itself
// cancel ENTER key and insert <BR> instead
// if (ord == 13 && editEvent.type == 'keypress') {
// editEvent.returnValue = false;
// editor_insertHTML(objname, "<br>");
// return;
// }
if (ctrlKey && (ord == 122 || ord == 90)) { // catch ctrl-z (UNDO)
// TODO: Add our own undo/redo functionality
// editEvent.cancelBubble = true;
return;
}
if ((ctrlKey && (ord == 121 || ord == 89)) ||
ctrlKey && shiftKey && (ord == 122 || ord == 90)) { // catch ctrl-y, ctrl-shift-z (REDO)
// TODO: Add our own undo/redo functionality
return;
}
}
// setup timer for delayed updates (some events take time to complete)
if (runDelay > 0) { return setTimeout(function(){ editor_event(objname); }, runDelay); }
// don't execute more than 3 times a second (eg: too soon after last execution)
if (this.tooSoon == 1 && runDelay >= 0) { this.queue = 1; return; } // queue all but urgent events
this.tooSoon = 1;
setTimeout(function(){
this.tooSoon = 0;
if (this.queue) { editor_event(objname,-1); };
this.queue = 0;
}, 333); // 1/3 second
editor_updateOutput(objname);
editor_updateToolbar(objname);
}
/* ---------------------------------------------------------------------- *\
Function : editor_updateToolbar
Description : update toolbar state
Usage :
Arguments : objname - ID of textarea to replace
action - enable, disable, or update (default action)
\* ---------------------------------------------------------------------- */
function editor_updateToolbar(objname,action) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname+ "_editor"];
// disable or enable toolbar
if (action == "enable" || action == "disable") {
var tbItems = new Array('FontName','FontSize','FontStyle'); // add pulldowns
for (var btnName in config.btnList) { tbItems.push(config.btnList[btnName][0]); } // add buttons
for (var idxN in tbItems) {
var cmdID = tbItems[idxN].toLowerCase();
var tbObj = document.all["_" +objname+ "_" +tbItems[idxN]];
if (cmdID == "htmlmode" || cmdID == "about" || cmdID == "showhelp" || cmdID == "popupeditor") { continue; } // don't change these buttons
if (tbObj == null) { continue; }
var isBtn = (tbObj.tagName.toLowerCase() == "button") ? true : false;
if (action == "enable") { tbObj.disabled = false; if (isBtn) { tbObj.className = 'btn' }}
if (action == "disable") { tbObj.disabled = true; if (isBtn) { tbObj.className = 'btnNA' }}
}
return;
}
// update toolbar state
if (editor_obj.tagName.toLowerCase() == 'textarea') { return; } // don't update state in textedit mode
var editdoc = editor_obj.contentWindow.document;
// Set FontName pulldown
var fontname_obj = document.all["_" +objname+ "_FontName"];
if (fontname_obj) {
var fontname = editdoc.queryCommandValue('FontName');
if (fontname == null) { fontname_obj.value = null; }
else {
var found = 0;
for (i=0; i<fontname_obj.length; i++) {
if (fontname.toLowerCase() == fontname_obj[i].text.toLowerCase()) {
fontname_obj.selectedIndex = i;
found = 1;
}
}
if (found != 1) { fontname_obj.value = null; } // for fonts not in list
}
}
// Set FontSize pulldown
var fontsize_obj = document.all["_" +objname+ "_FontSize"];
if (fontsize_obj) {
var fontsize = editdoc.queryCommandValue('FontSize');
if (fontsize == null) { fontsize_obj.value = null; }
else {
var found = 0;
for (i=0; i<fontsize_obj.length; i++) {
if (fontsize == fontsize_obj[i].value) { fontsize_obj.selectedIndex = i; found=1; }
}
if (found != 1) { fontsize_obj.value = null; } // for sizes not in list
}
}
// Set FontStyle pulldown
var classname_obj = document.all["_" +objname+ "_FontStyle"];
if (classname_obj) {
var curRange = editdoc.selection.createRange();
// check element and element parents for class names
var pElement;
if (curRange.length) { pElement = curRange[0]; } // control tange
else { pElement = curRange.parentElement(); } // text range
while (pElement && !pElement.className) { pElement = pElement.parentElement; } // keep going up
var thisClass = pElement ? pElement.className.toLowerCase() : "";
if (!thisClass && classname_obj.value) { classname_obj.value = null; }
else {
var found = 0;
for (i=0; i<classname_obj.length; i++) {
if (thisClass == classname_obj[i].value.toLowerCase()) {
classname_obj.selectedIndex = i;
found=1;
}
}
if (found != 1) { classname_obj.value = null; } // for classes not in list
}
}
// update button states
var IDList = Array('Bold','Italic','Underline','StrikeThrough','SubScript','SuperScript','JustifyLeft','JustifyCenter','JustifyRight','InsertOrderedList','InsertUnorderedList');
for (i=0; i<IDList.length; i++) {
var btnObj = document.all["_" +objname+ "_" +IDList[i]];
if (btnObj == null) { continue; }
var cmdActive = editdoc.queryCommandState( IDList[i] );
if (!cmdActive) { // option is OK
if (btnObj.className != 'btn') { btnObj.className = 'btn'; }
if (btnObj.disabled != false) { btnObj.disabled = false; }
} else if (cmdActive) { // option already applied or mixed content
if (btnObj.className != 'btnDown') { btnObj.className = 'btnDown'; }
if (btnObj.disabled != false) { btnObj.disabled = false; }
}
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_updateOutput
Description : update hidden output field with data from wysiwg
\* ---------------------------------------------------------------------- */
function editor_updateOutput(objname) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname+ "_editor"]; // html editor object
var editEvent = editor_obj.contentWindow ? editor_obj.contentWindow.event : event;
var isTextarea = (editor_obj.tagName.toLowerCase() == 'textarea');
var editdoc = isTextarea ? null : editor_obj.contentWindow.document;
// get contents of edit field
var contents;
if (isTextarea) { contents = editor_obj.value; }
else { contents = editdoc.body.innerHTML; }
// check if contents has changed since the last time we ran this routine
if (config.lastUpdateOutput && config.lastUpdateOutput == contents) { return; }
else { config.lastUpdateOutput = contents; }
// update hidden output field
document.all[objname].value = contents;
}
/* ---------------------------------------------------------------------- *\
Function : editor_filterOutput
Description :
\* ---------------------------------------------------------------------- */
function editor_filterOutput(objname) {
editor_updateOutput(objname);
var contents = document.all[objname].value;
var config = document.all[objname].config;
// ignore blank contents
if (contents.toLowerCase() == '<p> </p>') { contents = ""; }
// filter tag - this code is run for each HTML tag matched
var filterTag = function(tagBody,tagName,tagAttr) {
tagName = tagName.toLowerCase();
var closingTag = (tagBody.match(/^<\//)) ? true : false;
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -