哪位大哥能讲一下js做所见即所得的编辑器怎么做吧。

Question

function editor_generate(objname,w,h) {
  // Default Settings
  var imgURL = _editor_url + 'images/';       // images url  // set size to specified size or size of original object
  var obj    = document.all[objname];
  if (!w) {
    if      (obj.style.width) { width = obj.style.width; }      // use css style
    else if (obj.cols)        { width = (obj.cols * 6) + 30; }  // col width + toolbar
    else                      { width = '100%'; }               // default
  }
    if (!h) {
    if      (obj.style.height) { height = obj.style.height; }   // use css style
    else if (obj.rows)         { height = obj.rows * 10 }       // row height
    else                       { height = '100'; }              // default
  }  // Check for IE 5.5+ on Windows
  var Agent, VInfo, MSIE, Ver, Win32, Opera;
  Agent = navigator.userAgent;
  VInfo = Array();                              // version info
  VInfo = Agent.split(";")
  MSIE  = Agent.indexOf('MSIE') > 0;
  Ver   = VInfo[1].substr(6,3);
  Win32 = Agent.indexOf('Windows') > 0 && Agent.indexOf('Mac') < 0 && Agent.indexOf('Windows CE') < 0;
  Opera = Agent.indexOf('Opera') > -1;
  if (!MSIE || Opera || Ver < 5.5 || !Win32) { return; }  var editor = ''
  + '<table border=0 cellspacing=0 cellpadding=0 bgcolor="buttonface" style="padding: 1 0 0 0" width=' + width + ' unselectable="on"><tr><td>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on">\n'
  + ' <tr>\n'
  + '  <td style="border-width: 0; padding: 2 0 0 3;">\n'
  + '   <select id="_' +objname+ '_FontName" onChange="editor_action(this.id)" unselectable="on">\n'
  + '   <option value="arial, helvetica, sans-serif">Arial</option>\n'
  + '   <option value="courier new, courier, mono">Courier New</option>\n'
  + '   <option value="Georgia, Times New Roman, Times, Serif">Georgia</option>\n'
  + '   <option value="Tahoma, Arial, Helvetica, sans-serif">Tahoma</option>\n'
  + '   <option value="times new roman, times, serif">Times New Roman</option>\n'
  + '   <option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option>\n'
  + '   <option value="wingdings">WingDings</option>\n'
  + '   <option value="宋体">宋体</option>\n'
  + '   <option value="仿宋_GB2312">仿宋_GB2312</option>\n'
  + '   <option value="楷体_GB2312">楷体_GB2312</option>\n'
  + '   <option value="黑体">黑体</option>\n'
  + '   <option value="隶书">隶书</option>\n'
  + '   <option value="幼圆">幼圆</option>\n'
  + '   </select>'
  + '  </td>\n'
  + ' </tr>\n'
  + '</table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on">\n'
  + ' <tr>\n'
  + '  <td style="border-width: 0; padding: 2 1 0 0;">\n'
  +    '<select id="_' +objname+ '_FontSize" onChange="editor_action(this.id)" style="width:38px"  unselectable="on">\n'
  + '   <option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option>\n'
  + '   </select>\n\n'
  + '  </td>\n'
  + ' </tr>\n'
  + '</table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on"><tr><td style="border: inset 1px;">\n'
  +    '<button title="Bold" id="_' +objname+ '_Bold" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_bold.gif" unselectable="on"></button>'
  +    '<button title="Italic" id="_' +objname+ '_Italic" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_italic.gif" unselectable="on"></button>'
  +    '<button title="Underline" id="_' +objname+ '_Underline" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_underline.gif" unselectable="on">\n'
  + '</td></tr></table>\n'

Answer 1

// uncomment to add these buttons
//  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on"><tr><td style="border: inset 1px;">\n'
//  +    '<button title="Strikethrough" id="_' +objname+ '_StrikeThrough" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_strike.gif" unselectable="on"></button>'
//  +    '<button title="Subscript" id="_' +objname+ '_SubScript" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_sub.gif" unselectable="on"></button>'
//  +    '<button title="Superscript" id="_' +objname+ '_SuperScript" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_sup.gif" unselectable="on">\n'
//  + '</td></tr></table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on"><tr><td style="border: inset 1px;">\n'
  +    '<button title="Justify Left" id="_' +objname+ '_JustifyLeft" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_align_left.gif" unselectable="on"></button>'
  +    '<button title="Justify Center" id="_' +objname+ '_JustifyCenter" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_align_center.gif" unselectable="on"></button>'
  +    '<button title="Justify Right" id="_' +objname+ '_JustifyRight" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_align_right.gif" unselectable="on">\n'
  + '</td></tr></table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on" unselectable="on"><tr><td style="border: inset 1px;">\n'
  +    '<button title="Ordered List" id="_' +objname+ '_InsertOrderedList" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_list_num.gif" unselectable="on"></button>'
  +    '<button title="Bulleted List" id="_' +objname+ '_InsertUnorderedList" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_list_bullet.gif" unselectable="on">\n'
  +    '<button title="Decrease Indent" id="_' +objname+ '_Outdent" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_indent_less.gif" unselectable="on"></button>'
  +    '<button title="Increase Indent" id="_' +objname+ '_Indent" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_indent_more.gif" unselectable="on">\n'
  + '</td></tr></table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"  unselectable="on" unselectable="on"><tr><td style="border: inset 1px;">\n'
  +    '<button title="Font Color" id="_' +objname+ '_ForeColor" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_color_fg.gif" unselectable="on"></button>'
  +    '<button title="Background Color" id="_' +objname+ '_BackColor" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_color_bg.gif" unselectable="on">\n'
  + '</td></tr></table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;" unselectable="on"><tr><td style="border: inset 1px;">\n'
  +    '<button title="Horizontal Rule" id="_' +objname+ '_InsertHorizontalRule" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_hr.gif" unselectable="on"></button>'
  +    '<button title="Insert Web Link" id="_' +objname+ '_CreateLink" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_link.gif" unselectable="on"></button>'
  +    '<button title="Insert Image" id="_' +objname+ '_InsertImage" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_image.gif" unselectable="on">\n'
  + '</td></tr></table>\n'  + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;" unselectable="on"><tr><td style="border: inset 1px;">\n'
  +    '<button title="View HTML Source" id="_' +objname+ '_HtmlMode" class="btn" onClick="editor_setmode(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_html.gif" unselectable="on"></button>'  // -----------
  // CAUTION: You may NOT remove or hide this button.  If displays the "About this editor" popup
  // and is required by the license agreement for the editor.
  +    '<button title="About this editor" id="_' +objname+ '_about" class="btn" onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_about.gif" unselectable="on"></button>'
  // -----------  + '</td></tr></table>\n'
  + '</td></tr></table>\n'  + '<textarea ID="_' +objname + '_editor" style="width:' +width+ '; height:' +height+ '; margin-top: -1px; margin-bottom: -1px;"></textarea>'  + '<input type="hidden" name="' +objname+ '" value="">'
//  + '<textarea ID="' +objname+ '" rows=12 cols=80></textarea>'
  ;  // create editor
  var contents = document.all[objname].value;             // get original contents
  document.all[objname].outerHTML = editor;               // create editor frame
  document.all['_'+objname+'_editor'].value = contents;   // set contents  editor_setmode('_' +objname+ '_HtmlMode', 'init');      // switch to wysiwyg mode}

Answer 2

function editor_action(button_id) {  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"];  // 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);  // execute command for font pulldowns
  var idx = button_obj.selectedIndex;
  if (idx != null) {
    var val = button_obj[ idx ].value;
    editdoc.execCommand(cmdID,0,val);
  }  // execute command for fgcolor & bgcolor buttons
  else if (cmdID == 'ForeColor' || cmdID == 'BackColor') {
    // figure our optimal window placement for popup dialog
    var posX    = event.screenX;
    var posY    = event.screenY + 20;
    var screenW = screen.width;                                 // screen size
    var screenH = screen.height - 20;                           // take taskbar into account
    if (posX + 232 > screenW) { posX = posX - 232 - 40; }       // if mouse too far right
    if (posY + 164 > screenH) { posY = posY - 164 - 80; }       // if mouse too far down
    var wPosition   = "dialogLeft:" +posX+ "; dialogTop:" +posY;    var oldcolor = _dec_to_rgb(editdoc.queryCommandValue(cmdID));
    var newcolor = showModalDialog(_editor_url + "select_color.html", oldcolor,
                                   "dialogWidth:238px; dialogHeight: 187px; "
                                   + "resizable: no; help: no; status: no; scroll: no; "
                                   + wPosition);
    if (newcolor != null) { editdoc.execCommand(cmdID, false, "#"+newcolor); }
  }  // execute command for buttons
  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 + "insert_image.html", editdoc, "resizable: no; help: no; status: no; scroll: no; ");
    }    // insert image
    else if (cmdID.toLowerCase() == 'about'){
      var html = '<HTML><HEAD><TITLE>About</TITLE>\n'
               + '<style>\n'
               + '  html,body,textarea { font-family: verdana,arial; font-size: 9pt; };\n'
               + '</style></HEAD>\n'
               + '<BODY style="background: threedface; color: #000000"  topmargin=5 leftmargin=12>\n\n'
               + '<span style="font-family: arial black, arial; font-size: 28px; letter-spacing: -2px;">htmlArea</span> by interactivetools.com<br>\n'
               + 'A free WYSIWYG editor replacement for &lt;textarea&gt; fields.<br>\n\n'
               + '<p><textarea style="width:100%; height:120px" readonly>\n'
               + 'Copyright (c) 2002 interactivetools.com, inc.\n\n'
               + 'Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\n'
               + 'a) The above copyright notice, this permission notice, and the "About this editor" button that appears as a question  in the editor interface, shall be included in all copies or substantial portions of the Software.\n\n'
               + 'b) The "About this editor" button that appears as a question  ("?") in the editor interface must always be visible in the editor interface and bring up the original "About" dialog window when clicked.\n\n'
               + 'c) The "About" dialog window and its contents, including the link to interactivetools.com can not be amended.\n\n'
               + 'THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n'
               + '</textarea>\n\n'
               + '<p>For more information visit:<br>\n'
               + '<a href="http://www.interactivetools.com/products/htmlarea/" target="_blank">http://www.interactivetools.com/products/htmlarea/</a><br><br>\n'
               + '</body></html>\n\n';      var popup = window.open('', 'ColorPicker',
                  "location=no,menubar=no,toolbar=no,directories=no,status=no," +
                  "height=275,width=450,resizable=no,scrollbars=no");
      popup.document.write(html);
    }    // all other commands
    else {
      editdoc.execCommand(cmdID);
    }
  }  editor_updateUI(objname);
}