1.editor.js
//
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
//
需要IE5.5以上的版本支持
//
write out styles for UI buttons
document.write(
'
<style type="text/css">
'
);document.write(
'
.btn { width: 22px; height: 22px; border: 1px solid buttonface; margin: 0; padding: 0; }
'
);document.write(
'
.btnOver { width: 22px; height: 22px; border: 1px outset; }
'
);document.write(
'
.btnDown { width: 22px; height: 22px; border: 1px inset; background-color: buttonhighlight; }
'
);document.write(
'
.btnNA { width: 22px; height: 22px; border: 1px solid buttonface; filter: alpha(opacity=25); }
'
);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>
'
);
/**/
/* ---------------------------------------------------------------------- *
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'], ['bold','italic','underline','separator'], // ['strikethrough','subscript','superscript','separator'], ['justifyleft','justifycenter','justifyright','separator'], ['OrderedList','UnOrderedList','Outdent','Indent','separator'], ['forecolor','backcolor','separator'], ['HorizontalRule','Createlink','InsertImage','InsertTable','htmlmode','separator'], // ['custom1','custom2','custom3','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', 'Underline', 'editor_action(this.id)', 'ed_format_underline.gif'], "strikethrough": ['StrikeThrough', 'Strikethrough', 'editor_action(this.id)', 'ed_format_strike.gif'], "subscript": ['SubScript', 'Subscript', 'editor_action(this.id)', 'ed_format_sub.gif'], "superscript": ['SuperScript', 'Superscript', 'editor_action(this.id)', 'ed_format_sup.gif'], "justifyleft": ['JustifyLeft', 'Justify Left', 'editor_action(this.id)', 'ed_align_left.gif'], "justifycenter": ['JustifyCenter', 'Justify Center', 'editor_action(this.id)', 'ed_align_center.gif'], "justifyright": ['JustifyRight', 'Justify Right', 'editor_action(this.id)', 'ed_align_right.gif'], "orderedlist": ['InsertOrderedList', 'Ordered List', 'editor_action(this.id)', 'ed_list_num.gif'], "unorderedlist": ['InsertUnorderedList', 'Bulleted List', 'editor_action(this.id)', 'ed_list_bullet.gif'], "outdent": ['Outdent', 'Decrease Indent', 'editor_action(this.id)', 'ed_indent_less.gif'], "indent": ['Indent', 'Increase Indent', 'editor_action(this.id)', 'ed_indent_more.gif'], "forecolor": ['ForeColor', 'Font Color', 'editor_action(this.id)', 'ed_color_fg.gif'], "backcolor": ['BackColor', 'Background Color', 'editor_action(this.id)', 'ed_color_bg.gif'], "horizontalrule": ['InsertHorizontalRule', 'Horizontal Rule', 'editor_action(this.id)', 'ed_hr.gif'], "createlink": ['CreateLink', 'Insert Web Link', 'editor_action(this.id)', 'ed_link.gif'], "insertimage": ['InsertImage', 'Insert Image', 'editor_action(this.id)', 'ed_image.gif'], "inserttable": ['InsertTable', 'Insert Table', 'editor_action(this.id)', 'insert_table.gif'], "htmlmode": ['HtmlMode', 'View HTML Source', 'editor_setmode(''+objname+'')', 'ed_html.gif'], "popupeditor": ['popupeditor', 'Enlarge Editor', 'editor_action(this.id)', 'fullscreen_maximize.gif'], "about": ['about', '关于当前编辑器', 'editor_about(''+objname+'')', 'ed_about.gif'], // Add custom buttons here: "custom1": ['custom1', 'Purpose of button 1', 'editor_action(this.id)', 'ed_custom.gif'], "custom2": ['custom2', 'Purpose of button 2', 'editor_action(this.id)', 'ed_custom.gif'], "custom3": ['custom3', 'Purpose of button 3', 'editor_action(this.id)', 'ed_custom.gif'], // end: custom buttons "help": ['showhelp', 'Help using editor', '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) ...{ // use css style config.width = obj.style.width; }else if (obj.cols)...{ // col width + toolbar config.width = (obj.cols * 8) + 22; }else ...{ // default config.width = '100%'; } } if (!config.height || config.height == "auto") ...{
if(obj.style.height)...{ // use css style config.height = obj.style.height; }else if (obj.rows)...{ // row height config.height = obj.rows * 17 }else...{ // default config.height = '200'; } } 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> '; // 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;">'; for (var fontsize in config.fontsizes) ...{
toolbar += '<option value="' +config.fontsizes[fontsize]+ '">' +fontsize+ '</option>' } toolbar += '</select> '; 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;">'; + '<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; } // 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. htmlArea wysiwyg editor not created."); return; } if (!btnObj) ...{ alert("htmlArea error: button '" +btnName+ "' not found in button list when creating the wysiwyg editor for '"+objname+"'. Please make sure you entered the button name correctly. htmlArea 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+ '" οnmοuseοver="if(this.className=='btn'){this.className='btnOver'}" οnmοuseοut="if(this.className=='btnOver'){this.className='btn'}" unselectable="on"><img 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="buttonface" style="padding: 1 0 0 2" width=' + config.width + ' unselectable="on"><tr><td> ' + toolbar + '</td></tr></table> ' + '</td></tr></table></span> ' + '<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(/ /g, '<br>'); contents = contents.replace(/ /g, '<br>'); contents = contents.replace(/ /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)
...
最低0.47元/天 解锁文章
1482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
