با سلام خدمت شما من می خواستم سایتی را طراحی بکنم که سیستم آن :
1- asp.net باشد
2-ادیتورش مثل سایت بلاگفا باشد..
3- وقتی که در ادیتور مطلب جدیدی را بفرستم و ارسال کنم در صفحه اصلی سایت زیر مطلب به طور اتوماتیک نام نویسنده - ساعت و تاریخ ارسال مطلب درج شود مثل این عکس.
4- و دارای نظرسنجی هم باشد...مثل این عکس
حالا چه طور می توانم هم چنین سایتی طراحی کنم؟؟؟
اسکریپت ادیتور بلاگفا:
1- asp.net باشد
2-ادیتورش مثل سایت بلاگفا باشد..
3- وقتی که در ادیتور مطلب جدیدی را بفرستم و ارسال کنم در صفحه اصلی سایت زیر مطلب به طور اتوماتیک نام نویسنده - ساعت و تاریخ ارسال مطلب درج شود مثل این عکس.
4- و دارای نظرسنجی هم باشد...مثل این عکس
حالا چه طور می توانم هم چنین سایتی طراحی کنم؟؟؟
اسکریپت ادیتور بلاگفا:
HTML:
// write out styles for UI buttons
document.write('<style type="text/css">\n');
document.write('.btn { width: 22px; height: 22px; border: 1px solid #E8F1F4; margin: 0; padding: 0;background-color: #E8F1F4 }\n');
document.write('.btnOver { width: 22px; height: 22px; border: 1px outset;background-color: #E8F1F4 }\n');
document.write('.btnDown { width: 22px; height: 22px; border: 1px inset; background-color: buttonhighlight; }\n');
document.write('.btnNA { width: 22px; height: 22px; border: 1px solid buttonface; filter: alpha(opacity=25); }\n');
document.write('.cMenu { background-color: threedface; color: menutext; cursor: Default; font-family: MS Sans Serif; font-size: 8pt; padding: 2 12 2 16; }');
document.write('.cMenuOver { background-color: highlight; color: highlighttext; cursor: Default; font-family: MS Sans Serif; font-size: 8pt; padding: 2 12 2 16; }');
document.write('.cMenuDivOuter { background-color: threedface; height: 9 }');
document.write('.cMenuDivInner { margin: 0 4 0 4; border-width: 1; border-style: solid; border-color: threedshadow threedhighlight threedhighlight threedshadow; }');
document.write('</style>\n');
var langFarsi = true;
var farsikeys = [ // Farsi keyboard map based on Iran Popular Keyboard Layout
0x0020, 0x0021, 0x0022, 0x066B, 0x00A4, 0x066A, 0x060C, 0x06AF,
0x0029, 0x0028, 0x002A, 0x002B, 0x0648, 0x002D, 0x002E, 0x002F,
0x06F0, 0x06F1, 0x06F2, 0x06F3, 0x06F4, 0x06F5, 0x06F6, 0x06F7,
0x06F8, 0x06F9, 0x003A, 0x06A9, 0x003E, 0x003D, 0x003C, 0x061F,
0x066C, 0x0624, 0x200C, 0x0698, 0x06CC, 0x064D, 0x0625, 0x0623,
0x0622, 0x0651, 0x0629, 0x00BB, 0x00AB, 0x0621, 0x004E, 0x005D,
0x005B, 0x0652, 0x064B, 0x0626, 0x064F, 0x064E, 0x0056, 0x064C,
0x0058, 0x0650, 0x06A9, 0x062C, 0x0698, 0x0686, 0x00D7, 0x0640,
0x067E, 0x0634, 0x0630, 0x0632, 0x06CC, 0x062B, 0x0628, 0x0644,
0x0627, 0x0647, 0x062A, 0x0646, 0x0645, 0x0626, 0x062F, 0x062E,
0x062D, 0x0636, 0x0642, 0x0633, 0x0641, 0x0639, 0x0631, 0x0635,
0x0637, 0x063A, 0x0638, 0x007D, 0x007C, 0x007B, 0x007E
];
/* ---------------------------------------------------------------------- *\
Function : editor_defaultConfig
Description : default configuration settings for wysiwyg editor
\* ---------------------------------------------------------------------- */
function editor_defaultConfig(objname) {
this.version = "2.03"
this.width = "auto";
this.height = "auto";
this.bodyStyle = 'background-color: #FFFFFF; font-family: "Verdana"; font-size: x-small;';
this.imgURL = _editor_url + 'images/';
this.debug = 0;
this.replaceNextlines = 0; // replace nextlines from spaces (on output)
this.plaintextInput = 0; // replace nextlines with breaks (on input)
this.toolbar = [
['fontname'],
['fontsize'],
// ['fontstyle'],
// ['linebreak'],
['ChangeLanguage','dirLTR','dirRTL','separator'],
['bold','italic','underline','strikethrough','separator'],
['subscript','superscript','separator'],
['justifyleft','justifycenter','justifyright','justifyfull','separator'],
['OrderedList','UnOrderedList','Outdent','Indent','separator'],
['forecolor','backcolor','separator'],
['HorizontalRule','Createlink','InsertImage','InsertTable','separator'],
// ['custom1','custom2','custom3','separator'],
['htmlmode','separator'],
['popupeditor','about']];
this.fontnames = {
"Arial": "arial, helvetica, sans-serif",
"Courier New": "courier new, courier, mono",
"Georgia": "Georgia, Times New Roman, Times, Serif",
"Tahoma": "Tahoma, Arial, Helvetica, sans-serif",
"Times New Roman": "times new roman, times, serif",
"Verdana": "Verdana, Arial, Helvetica, sans-serif",
"impact": "impact",
"WingDings": "WingDings"};
this.fontsizes = {
"1 (8 pt)": "1",
"2 (10 pt)": "2",
"3 (12 pt)": "3",
"4 (14 pt)": "4",
"5 (18 pt)": "5",
"6 (24 pt)": "6",
"7 (36 pt)": "7"
};
//this.stylesheet = "http://www.domain.com/sample.css"; // full URL to stylesheet
this.fontstyles = [ // make sure these exist in the header of page the content is being display as well in or they won't work!
// { name: "headline", className: "headline", classStyle: "font-family: arial black, arial; font-size: 28px; letter-spacing: -2px;" },
// { name: "arial red", className: "headline2", classStyle: "font-family: arial black, arial; font-size: 12px; letter-spacing: -2px; color:red" },
// { name: "verdana blue", className: "headline4", classStyle: "font-family: verdana; font-size: 18px; letter-spacing: -2px; color:blue" },
];
this.btnList = {
// buttonName: commandID, title, onclick, image,
"bold": ['Bold', 'پررنگ', 'editor_action(this.id)', 'ed_format_bold.gif'],
"italic": ['Italic', 'كج', 'editor_action(this.id)', 'ed_format_italic.gif'],
"underline": ['Underline', 'زيرخط', 'editor_action(this.id)', 'ed_format_underline.gif'],
"strikethrough": ['StrikeThrough', 'خط خورده', 'editor_action(this.id)', 'ed_format_strike.gif'],
"subscript": ['SubScript', 'زيرنويس', 'editor_action(this.id)', 'ed_format_low.gif'],
"superscript": ['SuperScript', 'بالانويس', 'editor_action(this.id)', 'ed_format_up.gif'],
"justifyleft": ['JustifyLeft', 'چپ چين', 'editor_action(this.id)', 'ed_align_left.gif'],
"justifycenter": ['JustifyCenter', 'وسط چين', 'editor_action(this.id)', 'ed_align_center.gif'],
"justifyright": ['JustifyRight', 'راست چين', 'editor_action(this.id)', 'ed_align_right.gif'],
"justifyfull": ['JustifyFull', 'تراز شده', 'editor_action(this.id)', 'ed_align_full.gif'],
"orderedlist": ['InsertOrderedList', 'ليست شماره دار', 'editor_action(this.id)', 'ed_list_num.gif'],
"unorderedlist": ['InsertUnorderedList', 'ليست علامت دار', 'editor_action(this.id)', 'ed_list_bullet.gif'],
"outdent": ['Outdent', 'كاهش تورفتگی', 'editor_action(this.id)', 'ed_indent_less.gif'],
"indent": ['Indent', 'افزايش تورفتگی', 'editor_action(this.id)', 'ed_indent_more.gif'],
"forecolor": ['ForeColor', 'رنگ قلم', 'editor_action(this.id)', 'ed_color_fg.gif'],
"backcolor": ['BackColor', 'رنگ زمينه', 'editor_action(this.id)', 'ed_color_bg.gif'],
"horizontalrule": ['InsertHorizontalRule', 'خط افقی', 'editor_action(this.id)', 'ed_hr.gif'],
"createlink": ['CreateLink', 'افزودن لینک', 'editor_action(this.id)', 'ed_link.gif'],
"insertimage": ['InsertImage', 'افزودن تصویر', 'editor_action(this.id)', 'ed_image.gif'],
"inserttable": ['InsertTable', 'افزودن جدول', 'editor_action(this.id)', 'insert_table.gif'],
"htmlmode": ['HtmlMode', 'HTML مشاهده كد', 'editor_setmode(\''+objname+'\')', 'ed_html.gif'],
"popupeditor": ['popupeditor', 'بزرگ كردن ويرايشگر', 'editor_action(this.id)', 'fullscreen_maximize.gif'],
"about": ['about', 'درباره اين ويرايشگر','editor_about(\''+objname+'\')', 'ed_about.gif'],
// Add custom buttons here:
"changelanguage": ['ChangeLanguage', 'تغيير زبان', 'editor_action(this.id)', 'ed_fa.gif'],
"dirltr": ['BlockDirLtr', 'چپ به راست', 'editor_action(this.id)', 'ed_ltr.gif'],
"dirrtl": ['BlockDirRtl', 'راست به چپ', 'editor_action(this.id)', 'ed_rtl.gif'],
"custom1": ['custom1', 'ویرایش یا درج لینک', 'editor_action(this.id)', 'ed_link2.gif'],
"smileys": ['smileys', 'درج شکلک', 'editor_action(this.id)', 'ed_smileys.gif'],
"removeformat": ['removeformat', 'حذف فرمت متن ، رنگها و فونتها', 'editor_action(this.id)', 'delformat.gif'],
"copy": ['copy', 'کپی', 'editor_action(this.id)', 'ed_copy.gif'],
"paste": ['paste', 'درج - paste', 'editor_action(this.id)', 'ed_paste.gif'],
"cut": ['cut', 'برش', 'editor_action(this.id)', 'ed_cut.gif'],
// end: custom buttons
"help": ['showhelp', 'راهنما', 'editor_action(this.id)', 'ed_help.gif']};
}
/* ---------------------------------------------------------------------- *\
Function : editor_generate
Description : replace textarea with wysiwyg editor
Usage : editor_generate("textarea_id",[height],[width]);
Arguments : objname - ID of textarea to replace
w - width of wysiwyg editor
h - height of wysiwyg editor
\* ---------------------------------------------------------------------- */
function editor_generate(objname,userConfig) {
// Default Settings
var config = new editor_defaultConfig(objname);
if (userConfig) {
for (var thisName in userConfig) {
if (userConfig[thisName]) { config[thisName] = userConfig[thisName]; }
}
}
document.all[objname].config = config; // store config settings
// set size to specified size or size of original object
var obj = document.all[objname];
if (!config.width || config.width == "auto") {
if (obj.style.width) { config.width = obj.style.width; } // use css style
else if (obj.cols) { config.width = (obj.cols * 8) + 22; } // col width + toolbar
else { config.width = '100%'; } // default
}
if (!config.height || config.height == "auto") {
if (obj.style.height) { config.height = obj.style.height; } // use css style
else if (obj.rows) { config.height = obj.rows * 17 } // row height
else { config.height = '200'; } // default
}
var tblOpen = '<table border=0 cellspacing=0 cellpadding=0 style="float: left;" unselectable="on"><tr><td style="border: none; padding: 1 0 0 0"><nobr>';
var tblClose = '</nobr></td></tr></table>\n';
// build button toolbar
var toolbar = '';
var btnGroup, btnItem, aboutEditor;
for (var btnGroup in config.toolbar) {
// linebreak
if (config.toolbar[btnGroup].length == 1 &&
config.toolbar[btnGroup][0].toLowerCase() == "linebreak") {
toolbar += '<br clear="all">';
continue;
}
toolbar += tblOpen;
for (var btnItem in config.toolbar[btnGroup]) {
var btnName = config.toolbar[btnGroup][btnItem].toLowerCase();
// fontname
if (btnName == "fontname") {
toolbar += '<select id="_' +objname+ '_FontName" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 2; font-size: 12px;">';
for (var fontname in config.fontnames) {
toolbar += '<option value="' +config.fontnames[fontname]+ '">' +fontname+ '</option>'
}
toolbar += '</select>';
continue;
}
// fontsize
if (btnName == "fontsize") {
toolbar += '<select id="_' +objname+ '_FontSize" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 0; font-size: 12px;direction:ltr" >';
for (var fontsize in config.fontsizes) {
toolbar += '<option value="' +config.fontsizes[fontsize]+ '">' +fontsize+ '</option>'
}
toolbar += '</select>\n';
continue;
}
// font style
if (btnName == "fontstyle") {
toolbar += '<select id="_' +objname+ '_FontStyle" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 0; font-size: 12px;direction:ltr" >';
+ '<option value="">Font Style</option>';
for (var i in config.fontstyles) {
var fontstyle = config.fontstyles[i];
toolbar += '<option value="' +fontstyle.className+ '">' +fontstyle.name+ '</option>'
}
toolbar += '</select>';
continue;
}
// htmlmode
if (btnName == "htmlmode") {
var btnObj = config.btnList[btnName];
var btnCmdID = btnObj[0];
var btnTitle = btnObj[1];
var btnOnClick = btnObj[2];
var btnImage = btnObj[3];
toolbar += '<button title="' +btnTitle+ '" id="_' +objname+ '_' +btnCmdID+ '" class="btn" onClick="' +btnOnClick+ '" onmouseover="if(this.className==\'btn\'){this.className=\'btnOver\'}" onmouseout="if(this.className==\'btnOver\'){this.className=\'btn\'}" unselectable="on" style="width=52;"><img name="'+btnCmdID+'" src="' +config.imgURL + btnImage+ '" border=0 unselectable="on"></button>';
continue;
}
// separator
if (btnName == "separator") {
toolbar += '<span style="border: 1px inset; width: 1px; font-size: 16px; height: 16px; margin: 0 3 0 3"></span>';
continue;
}
// buttons
var btnObj = config.btnList[btnName];
if (btnName == 'linebreak') { alert("htmlArea error: 'linebreak' must be in a subgroup by itself, not with other buttons.\n\nhtmlArea wysiwyg editor not created."); return; }
if (!btnObj) { alert("htmlArea error: button '" +btnName+ "' not found in button list when creating the wysiwyg editor for '"+objname+"'.\nPlease make sure you entered the button name correctly.\n\nhtmlArea wysiwyg editor not created."); return; }
var btnCmdID = btnObj[0];
var btnTitle = btnObj[1];
var btnOnClick = btnObj[2];
var btnImage = btnObj[3];
toolbar += '<button title="' +btnTitle+ '" id="_' +objname+ '_' +btnCmdID+ '" class="btn" onClick="' +btnOnClick+ '" onmouseover="if(this.className==\'btn\'){this.className=\'btnOver\'}" onmouseout="if(this.className==\'btnOver\'){this.className=\'btn\'}" unselectable="on"><img name="'+btnCmdID+'" src="' +config.imgURL + btnImage+ '" border=0 unselectable="on"></button>';
} // end of button sub-group
toolbar += tblClose;
} // end of entire button set
// build editor
var editor = '<span id="_editor_toolbar"><table border=0 cellspacing=0 cellpadding=0 bgcolor="#E8F1F4" style="padding: 1 0 0 2" width=' + config.width + ' unselectable="on"><tr><td>\n'
+ toolbar
+ '</td></tr></table>\n'
+ '</td></tr></table></span>\n'
+ '<textarea ID="_' +objname + '_editor" style="width:' +config.width+ '; height:' +config.height+ '; margin-top: -1px; margin-bottom: -1px;" wrap=soft></textarea>';
// add context menu
editor += '<div id="_' +objname + '_cMenu" style="position: absolute; visibility: hidden;"></div>';
// hide original textarea and insert htmlarea after it
if (!config.debug) { document.all[objname].style.display = "none"; }
if (config.plaintextInput) { // replace nextlines with breaks
var contents = document.all[objname].value;
contents = contents.replace(/\r\n/g, '<br>');
contents = contents.replace(/\n/g, '<br>');
contents = contents.replace(/\r/g, '<br>');
document.all[objname].value = contents;
}
// insert wysiwyg
document.all[objname].insertAdjacentHTML('afterEnd', editor)
// convert htmlarea from textarea to wysiwyg editor
editor_setmode(objname, 'init');
// call filterOutput when user submits form
for (var idx=0; idx < document.forms.length; idx++) {
var r = document.forms[idx].attachEvent('onsubmit', function() { editor_filterOutput(objname); });
if (!r) { alert("Error attaching event to form!"); }
}
return true;
}
/* ---------------------------------------------------------------------- *\
Function : editor_action
Description : perform an editor command on selected editor content
Usage :
Arguments : button_id - button id string with editor and action name
\* ---------------------------------------------------------------------- */
function editor_action(button_id) {
// split up button name into "editorID" and "cmdID"
var BtnParts = Array();
BtnParts = button_id.split("_");
var objname = button_id.replace(/^_(.*)_[^_]*$/, '$1');
var cmdID = BtnParts[ BtnParts.length-1 ];
var button_obj = document.all[button_id];
var editor_obj = document.all["_" +objname + "_editor"];
var config = document.all[objname].config;
// help popup
if (cmdID == 'showhelp') {
//window.open(_editor_url + "popups/editor_help.html", 'EditorHelp');
showModalDialog(_editor_url + "popups/editor_help.html","", "resizable: no; help: no; status: no; scroll: yes; ");
return;
}
// popup editor
if (cmdID == 'popupeditor') {
window.open(_editor_url + "popups/fullscreen.html?"+objname,
'FullScreen',
'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480');
return;
}
// change language
if (cmdID == 'ChangeLanguage') {
langFarsi=!langFarsi;
langFarsi?document.images.ChangeLanguage.src=config.imgURL + "ed_fa.gif":document.images.ChangeLanguage.src=config.imgURL + "ed_en.gif";
return;
}
// check editor mode (don't perform actions in textedit mode)
if (editor_obj.tagName.toLowerCase() == 'textarea') { return; }
var editdoc = editor_obj.contentWindow.document;
editor_focus(editor_obj);
// get index and value for pulldowns
var idx = button_obj.selectedIndex;
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') {
editdoc.execCommand('CreateLink',1);
}
// Custom2
else if (cmdID == 'smileys') { // insert some text from a popup window
var myTitle = "Insert Smileys";
var myText = showModalDialog(_editor_url + "popups/insert_smileys.html", myTitle, "resizable: no; help: no; status: no; scroll: no; ");
if (myText) { editor_insertHTML(objname, myText); }
}
// Custom3
else if (cmdID == 'removeformat') { // removeformat
editdoc.execCommand('removeformat',1);
}
// copy
else if (cmdID == 'copy') { // copy text
editdoc.execCommand('copy',1);
}
// paste
else if (cmdID == 'paste') { // paste
editdoc.execCommand('paste',1);
}
// cut
else if (cmdID == 'cut') { // cut text
editdoc.execCommand('cut',1);
}
//
// 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'){
myText= showModalDialog(_editor_url + "popups/insert_link.html", editdoc, "resizable: no; help: no; status: no; scroll: no; ");
if (myText) { editor_insertHTML(objname, myText); }
//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;
}
// Change pressed key with persian character
var key = ord;
if (langFarsi) {
if (key < 0x0020 || key >= 0x00FF) {
// Avoid processing if control or higher than ASCII (i.e., in Arabic Windows)
return;
}
else if (langFarsi) { //If Farsi
editEvent.keyCode = farsikeys[key - 0x0020];
}
return true;
}
}
// 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" || cmdID == "changelanguage") { 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;
// fix placeholder URLS - remove absolute paths that IE adds
if (tagName == 'img') { tagBody = tagBody.replace(/(src\s*=\s*.)[^*]*(\*\*\*)/, "$1$2"); }
if (tagName == 'a') { tagBody = tagBody.replace(/(href\s*=\s*.)[^*]*(\*\*\*)/, "$1$2"); }
// add additional tag filtering here
return tagBody;
};
// match tags and call filterTag
RegExp.lastIndex = 0;
var matchTag = /<\/?(\w+)((?:[^'">]*|'[^']*'|"[^"]*")*)>/g; // this will match tags, but still doesn't handle container tags (textarea, comments, etc)
contents = contents.replace(matchTag, filterTag);
// remove nextlines from output (if requested)
if (config.replaceNextlines) {
contents = contents.replace(/\r\n/g, ' ');
contents = contents.replace(/\n/g, ' ');
contents = contents.replace(/\r/g, ' ');
}
// update output with filtered content
document.all[objname].value = contents;
}
/* ---------------------------------------------------------------------- *\
Function : editor_setmode
Description : change mode between WYSIWYG and HTML editor
Usage : editor_setmode(objname, mode);
Arguments : objname - button id string with editor and action name
mode - init, textedit, or wysiwyg
\* ---------------------------------------------------------------------- */
function editor_setmode(objname, mode) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname + "_editor"];
// wait until document is fully loaded
if (document.readyState != 'complete') {
setTimeout(function() { editor_setmode(objname,mode) }, 25);
return;
}
// define different editors
var TextEdit = '<textarea ID="_' +objname + '_editor" style="width:' +editor_obj.style.width+ '; height:' +editor_obj.style.height+ '; margin-top: -1px; margin-bottom: -1px;"></textarea>';
var RichEdit = '<iframe ID="_' +objname+ '_editor" style="width:' +editor_obj.style.width+ '; height:' +editor_obj.style.height+ ';"></iframe>';
// src="' +_editor_url+ 'popups/blank.html"
// set style for <html> mode
var btnObj = document.all["_" +objname+ "_HtmlMode"];
if (btnObj.className != 'btn') { btnObj.className = 'btn'; }
//
// Switch to TEXTEDIT mode
//
if (mode == "textedit" || editor_obj.tagName.toLowerCase() == 'iframe') {
config.mode = "textedit";
btnObj.className = "btnDown";
var editdoc = editor_obj.contentWindow.document;
var contents = editdoc.body.createTextRange().htmlText;
editor_obj.outerHTML = TextEdit;
editor_obj = document.all["_" +objname + "_editor"];
editor_obj.value = contents;
editor_event(objname);
editor_updateToolbar(objname, "disable"); // disable toolbar items
// set event handlers
editor_obj.onkeydown = function() { editor_event(objname); }
editor_obj.onkeypress = function() { editor_event(objname); }
editor_obj.onkeyup = function() { editor_event(objname); }
editor_obj.onmouseup = function() { editor_event(objname); }
editor_obj.ondrop = function() { editor_event(objname, 100); } // these events fire before they occur
editor_obj.oncut = function() { editor_event(objname, 100); }
editor_obj.onpaste = function() { editor_event(objname, 100); }
editor_obj.onblur = function() { editor_event(objname, -1); }
editor_updateOutput(objname);
editor_focus(editor_obj);
}
//
// Switch to WYSIWYG mode
//
else {
config.mode = "wysiwyg";
var contents = editor_obj.value;
if (mode == 'init') { contents = document.all[objname].value; } // on init use original textarea content
// create editor
editor_obj.outerHTML = RichEdit;
editor_obj = document.all["_" +objname + "_editor"];
// get iframe document object
// create editor contents (and default styles for editor)
var html = "";
html += '<html><head>\n';
if (config.stylesheet) {
html += '<link href="' +config.stylesheet+ '" rel="stylesheet" type="text/css">\n';
}
html += '<style>\n';
html += 'body {' +config.bodyStyle+ '} \n';
for (var i in config.fontstyles) {
var fontstyle = config.fontstyles[i];
if (fontstyle.classStyle) {
html += '.' +fontstyle.className+ ' {' +fontstyle.classStyle+ '}\n';
}
}
html += '</style>\n'
+ '</head>\n'
+ '<body contenteditable="true" topmargin=1 leftmargin=1'
// still working on this
// + ' oncontextmenu="parent.editor_cMenu_generate(window,\'' +objname+ '\');"'
+'>'
+ contents
+ '</body>\n'
+ '</html>\n';
// write to editor window
var editdoc = editor_obj.contentWindow.document;
editdoc.open();
editdoc.write(html);
editdoc.close();
editor_updateToolbar(objname, "enable"); // enable toolbar items
// store objname under editdoc
editdoc.objname = objname;
// set event handlers
editdoc.onkeydown = function() { editor_event(objname); }
editdoc.onkeypress = function() { editor_event(objname); }
editdoc.onkeyup = function() { editor_event(objname); }
editdoc.onmouseup = function() { editor_event(objname); }
editdoc.body.ondrop = function() { editor_event(objname, 100); } // these events fire before they occur
editdoc.body.oncut = function() { editor_event(objname, 100); }
editdoc.body.onpaste = function() { editor_event(objname, 100); }
editdoc.body.onblur = function() { editor_event(objname, -1); }
// bring focus to editor
if (mode != 'init') { // don't focus on page load, only on mode switch
editor_focus(editor_obj);
}
}
// Call update UI
if (mode != 'init') { // don't update UI on page load, only on mode switch
editor_event(objname);
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_focus
Description : bring focus to the editor
Usage : editor_focus(editor_obj);
Arguments : editor_obj - editor object
\* ---------------------------------------------------------------------- */
function editor_focus(editor_obj) {
// check editor mode
if (editor_obj.tagName.toLowerCase() == 'textarea') { // textarea
var myfunc = function() { editor_obj.focus(); };
setTimeout(myfunc,100); // doesn't work all the time without delay
}
else { // wysiwyg
var editdoc = editor_obj.contentWindow.document; // get iframe editor document object
var editorRange = editdoc.body.createTextRange(); // editor range
var curRange = editdoc.selection.createRange(); // selection range
if (curRange.length == null && // make sure it's not a controlRange
!editorRange.inRange(curRange)) { // is selection in editor range
editorRange.collapse(); // move to start of range
editorRange.select(); // select
curRange = editorRange;
}
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_about
Description : display "about this editor" popup
\* ---------------------------------------------------------------------- */
function editor_about(objname) {
showModalDialog(_editor_url + "popups/about.html", window, "resizable: yes; help: no; status: no; scroll: no; ");
}
/* ---------------------------------------------------------------------- *\
Function : _dec_to_rgb
Description : convert dec color value to rgb hex
Usage : var hex = _dec_to_rgb('65535'); // returns FFFF00
Arguments : value - dec value
\* ---------------------------------------------------------------------- */
function _dec_to_rgb(value) {
var hex_string = "";
for (var hexpair = 0; hexpair < 3; hexpair++) {
var myByte = value & 0xFF; // get low byte
value >>= 8; // drop low byte
var nybble2 = myByte & 0x0F; // get low nybble (4 bits)
var nybble1 = (myByte >> 4) & 0x0F; // get high nybble
hex_string += nybble1.toString(16); // convert nybble to hex
hex_string += nybble2.toString(16); // convert nybble to hex
}
return hex_string.toUpperCase();
}
/* ---------------------------------------------------------------------- *\
Function : editor_insertHTML
Description : insert string at current cursor position in editor. If
two strings are specifed, surround selected text with them.
Usage : editor_insertHTML(objname, str1, [str2], reqSelection)
Arguments : objname - ID of textarea
str1 - HTML or text to insert
str2 - HTML or text to insert (optional argument)
reqSelection - (1 or 0) give error if no text selected
\* ---------------------------------------------------------------------- */
function editor_insertHTML(objname, str1,str2, reqSel) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname + "_editor"]; // editor object
if (str1 == null) { str1 = ''; }
if (str2 == null) { str2 = ''; }
// for non-wysiwyg capable browsers just add to end of textbox
if (document.all[objname] && editor_obj == null) {
document.all[objname].focus();
document.all[objname].value = document.all[objname].value + str1 + str2;
return;
}
// error checking
if (editor_obj == null) { return alert("Unable to insert HTML. Invalid object name '" +objname+ "'."); }
editor_focus(editor_obj);
var tagname = editor_obj.tagName.toLowerCase();
var sRange;
// insertHTML for wysiwyg iframe
if (tagname == 'iframe') {
var editdoc = editor_obj.contentWindow.document;
sRange = editdoc.selection.createRange();
var sHtml = sRange.htmlText;
// check for control ranges
if (sRange.length) { return alert("Unable to insert HTML. Try highlighting content instead of selecting it."); }
// insert HTML
var oldHandler = window.onerror;
window.onerror = function() { alert("Unable to insert HTML for current selection."); return true; } // partial table selections cause errors
if (sHtml.length) { // if content selected
if (str2) { sRange.pasteHTML(str1 +sHtml+ str2) } // surround
else { sRange.pasteHTML(str1); } // overwrite
} else { // if insertion point only
if (reqSel) { return alert("Unable to insert HTML. You must select something first."); }
sRange.pasteHTML(str1 + str2); // insert strings
}
window.onerror = oldHandler;
}
// insertHTML for plaintext textarea
else if (tagname == 'textarea') {
editor_obj.focus();
sRange = document.selection.createRange();
var sText = sRange.text;
// insert HTML
if (sText.length) { // if content selected
if (str2) { sRange.text = str1 +sText+ str2; } // surround
else { sRange.text = str1; } // overwrite
} else { // if insertion point only
if (reqSel) { return alert("Unable to insert HTML. You must select something first."); }
sRange.text = str1 + str2; // insert strings
}
}
else { alert("Unable to insert HTML. Unknown object tag type '" +tagname+ "'."); }
// move to end of new content
sRange.collapse(false); // move to end of range
sRange.select(); // re-select
}
/* ---------------------------------------------------------------------- *\
Function : editor_getHTML
Description : return HTML contents of editor (in either wywisyg or html mode)
Usage : var myHTML = editor_getHTML('objname');
\* ---------------------------------------------------------------------- */
function editor_getHTML(objname) {
var editor_obj = document.all["_" +objname + "_editor"];
var isTextarea = (editor_obj.tagName.toLowerCase() == 'textarea');
if (isTextarea) { return editor_obj.value; }
else { return editor_obj.contentWindow.document.body.innerHTML; }
}
/* ---------------------------------------------------------------------- *\
Function : editor_setHTML
Description : set HTML contents of editor (in either wywisyg or html mode)
Usage : editor_setHTML('objname',"<b>html</b> <u>here</u>");
\* ---------------------------------------------------------------------- */
function editor_setHTML(objname, html) {
var editor_obj = document.all["_" +objname + "_editor"];
var isTextarea = (editor_obj.tagName.toLowerCase() == 'textarea');
if (isTextarea) { editor_obj.value = html; }
else { editor_obj.contentWindow.document.body.innerHTML = html; }
}
/* ---------------------------------------------------------------------- *\
Function : editor_appendHTML
Description : append HTML contents to editor (in either wywisyg or html mode)
Usage : editor_appendHTML('objname',"<b>html</b> <u>here</u>");
\* ---------------------------------------------------------------------- */
function editor_appendHTML(objname, html) {
var editor_obj = document.all["_" +objname + "_editor"];
var isTextarea = (editor_obj.tagName.toLowerCase() == 'textarea');
if (isTextarea) { editor_obj.value += html; }
else { editor_obj.contentWindow.document.body.innerHTML += html; }
}
/* ---------------------------------------------------------------- */
function _isMouseOver(obj,event) { // determine if mouse is over object
var mouseX = event.clientX;
var mouseY = event.clientY;
var objTop = obj.offsetTop;
var objBottom = obj.offsetTop + obj.offsetHeight;
var objLeft = obj.offsetLeft;
var objRight = obj.offsetLeft + obj.offsetWidth;
if (mouseX >= objLeft && mouseX <= objRight &&
mouseY >= objTop && mouseY <= objBottom) { return true; }
return false;
}
/* ---------------------------------------------------------------- */
function editor_cMenu_generate(editorWin,objname) {
var parentWin = window;
editorWin.event.returnValue = false; // cancel default context menu
// define content menu options
var cMenuOptions = [ // menu name, shortcut displayed, javascript code
['Cut', 'Ctrl-X', function() {}],
['Copy', 'Ctrl-C', function() {}],
['Paste', 'Ctrl-C', function() {}],
['Delete', 'DEL', function() {}],
['---', null, null],
['Select All', 'Ctrl-A', function() {}],
['Clear All', '', function() {}],
['---', null, null],
['About this editor...', '', function() {
alert("about this editor");
}]];
editor_cMenu.options = cMenuOptions; // save options
// generate context menu
var cMenuHeader = ''
+ '<div id="_'+objname+'_cMenu" onblur="editor_cMenu(this);" oncontextmenu="return false;" onselectstart="return false"'
+ ' style="position: absolute; visibility: hidden; cursor: default; width: 167px; background-color: threedface;'
+ ' border: solid 1px; border-color: threedlightshadow threeddarkshadow threeddarkshadow threedlightshadow;">'
+ '<table border=0 cellspacing=0 cellpadding=0 width="100%" style="width: 167px; background-color: threedface; border: solid 1px; border-color: threedhighlight threedshadow threedshadow threedhighlight;">'
+ ' <tr><td colspan=2 height=1></td></tr>';
var cMenuList = '';
var cMenuFooter = ''
+ ' <tr><td colspan=2 height=1></td></tr>'
+ '</table></div>';
for (var menuIdx in editor_cMenu.options) {
var menuName = editor_cMenu.options[menuIdx][0];
var menuKey = editor_cMenu.options[menuIdx][1];
var menuCode = editor_cMenu.options[menuIdx][2];
// separator
if (menuName == "---" || menuName == "separator") {
cMenuList += ' <tr><td colspan=2 class="cMenuDivOuter"><div class="cMenuDivInner"></div></td></tr>';
}
// menu option
else {
cMenuList += '<tr class="cMenu" onMouseOver="editor_cMenu(this)" onMouseOut="editor_cMenu(this)" onClick="editor_cMenu(this, \'' +menuIdx+ '\',\'' +objname+ '\')">';
if (menuKey) { cMenuList += ' <td align=left class="cMenu">' +menuName+ '</td><td align=right class="cMenu">' +menuKey+ '</td>'; }
else { cMenuList += ' <td colspan=2 class="cMenu">' +menuName+ '</td>'; }
cMenuList += '</tr>';
}
}
var cMenuHTML = cMenuHeader + cMenuList + cMenuFooter;
document.all['_'+objname+'_cMenu'].outerHTML = cMenuHTML;
editor_cMenu_setPosition(parentWin, editorWin, objname);
parentWin['_'+objname+'_cMenu'].style.visibility = 'visible';
parentWin['_'+objname+'_cMenu'].focus();
}
/* ---------------------------------------------------------------- */
function editor_cMenu_setPosition(parentWin, editorWin, objname) { // set object position that won't overlap window edge
var event = editorWin.event;
var cMenuObj = parentWin['_'+objname+'_cMenu'];
var mouseX = event.clientX + parentWin.document.all['_'+objname+'_editor'].offsetLeft;
var mouseY = event.clientY + parentWin.document.all['_'+objname+'_editor'].offsetTop;
var cMenuH = cMenuObj.offsetHeight;
var cMenuW = cMenuObj.offsetWidth;
var pageH = document.body.clientHeight + document.body.scrollTop;
var pageW = document.body.clientWidth + document.body.scrollLeft;
// set horzontal position
if (mouseX + 5 + cMenuW > pageW) { var left = mouseX - cMenuW - 5; } // too far right
else { var left = mouseX + 5; }
// set vertical position
if (mouseY + 5 + cMenuH > pageH) { var top = mouseY - cMenuH + 5; } // too far down
else { var top = mouseY + 5; }
cMenuObj.style.top = top;
cMenuObj.style.left = left;
}
/* ---------------------------------------------------------------- */
function editor_cMenu(obj,menuIdx,objname) {
var action = event.type;
if (action == "mouseover" && !obj.disabled && obj.tagName.toLowerCase() == 'tr') {
obj.className = 'cMenuOver';
for (var i=0; i < obj.cells.length; i++) { obj.cells[i].className = 'cMenuOver'; }
}
else if (action == "mouseout" && !obj.disabled && obj.tagName.toLowerCase() == 'tr') {
obj.className = 'cMenu';
for (var i=0; i < obj.cells.length; i++) { obj.cells[i].className = 'cMenu'; }
}
else if (action == "click" && !obj.disabled) {
document.all['_'+objname+'_cMenu'].style.visibility = "hidden";
var menucode = editor_cMenu.options[menuIdx][2];
menucode();
}
else if (action == "blur") {
if (!_isMouseOver(obj,event)) { obj.style.visibility = 'hidden'; }
else {
if (obj.style.visibility != "hidden") { obj.focus(); }
}
}
else { alert("editor_cMenu, unknown action: " + action); }
}
/* ---------------------------------------------------------------------- */
