本文讨论日志编辑页的两个主要功能。 一是编辑器，二是图片上传。

现有日志可以在编辑状态下编辑，新创建日志时也能填写内容。对于我们讨论的问题而言，两者非常接近。有必要举例时我们就以创建新日志为例。当点击＂发表新日志＂按钮来到发表日志页时，在fiddler中我们可以看到服务器向客户端发送了下列文件：


包括两个PHP生成的HTML文件，和若干个Javascript文件，包括home.js，editor_function.js，home_blog.js，upload.js 和 editor_base.js, 还有一个Flash动画文件swfupload.swf。这些文件是怎么由客户端的一个请求而加入发送的行列的呢？检查代码发现：

/home.php?mod=spacecp&ac=blog
source/module/home/home_spacecp.php
  => source/include/spacecp/spacecp_blog.php
     => template/default/home/spacecp_blog.htm
          1)    <!--{subtemplate home/editor_image_menu}-->
                 template/default/home/editor_image_menu.htm (包含选择上传图片的对话框)
                       1a) <!--{subtemplate common/upload}-->
                             template/default/common/upload.htm
                                   => static/js/upload.js (initSWFUpload => loadFlash => getFlashHTML (包含 Flash object) )
                                         => static/image/common/swfupload.swf
          2)   <iframe src='home.php?mod=editor&charset={CHARSET}&allowhtml=$allowhtml&doodle={if $_G['setting']['magicstatus'] && !empty($_G['setting']['magics']['doodle'])}1{/if}' name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;height:100%;position:relative;"></iframe>                source/module/home/home_editor.php (包含编辑器及工具条)
                      => static/image/editor/editor_base.js
                      => 编辑器<IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style="height:100%;width:100%;" frameBorder="0" marginHeight=0 marginWidth=0 src="home.php?mod=editor&op=blank&charset=<?php echo $_GET['charset']; ?>" onload="blank_load();"></IFRAME>
          3)   <script type="text/javascript" src="{STATICURL}image/editor/editor_function.js?{VERHASH}"></script>
                static/image/editor/editor_function.js
          4)   <script type="text/javascript" src="{$_G[setting][jspath]}home_blog.js?{VERHASH}"></script>
                static/js/home_blog.js


１。编辑器

一个浏览器窗口里的内容就处于可编辑状态如果它的文档的designMode是on，这时文档里的内容还可以用execCommand在控制。在我们的前文中给出过一个简单的实例（链接）。

在日志编辑页上的编辑器是个识别符为HtmlEditor的iframe。在editor_base.js文件里对它有些关键的设置：

window.onload = function(){ try{ gLoaded = true; fSetEditable(); fSetFrmClick(); }catch(e){ } } function fSetEditable(){ var f = window.frames["HtmlEditor"]; f.document.designMode="on"; if(!gIsIE) f.document.execCommand("useCSS",false, true); } 注意designMode="on"将该iframe变成了一个编辑器。

那么编辑器上的工具条上的那些按纽是如何工作的呢？仅看一例：让我们来看一下加超链接的功能。整个工具条是在home_editor.php里定义的，其中加超链接的按钮是：

< a href="javascript:;" class="icoUrl" id="icoUrl" onClick="createLink(event, 1);return false;" title="<?php echo lang('home/editor', 'editor_hyperlink'); ?>"></a> <div id="createUrl" class="eMenu" style="display:none;top:35px;left:26px;width:300px;font-size:12px"> <?php echo lang('home/editor', 'editor_prompt_textlink'); ?>:<br/> <input type="text" id="insertUrl" name="url" value="http://" onfocus="checkURL(this, 1);" onblur="checkURL(this, 0);" class="t_input" style="width: 190px;"> <input type="button" onclick="createLink();" name="createURL" value="<?php echo lang('home/editor', 'editor_ok'); ?>" class="submit" /> < a href="javascript:;" onclick="fHide($('createUrl'));return false;"><?php echo lang('home/editor', 'editor_cancel'); ?></a> </div> 这里上半部是工具条上的那个加超链接的按钮，下半部分是一个隐藏的小对话框，只在点击加超链接的按钮后才出现，让用户在里面添加链接。点击加超链接的按钮时执行的函数是createLink，定义在editor_base.js中： function createLink(e, show) { if(typeof show == 'undefined') { var urlObj = $('insertUrl'); var sURL = urlObj.value; if ((sURL!=null) && (sURL!="http://")){ setCaret(); format("CreateLink", sURL); } fHide($('createUrl')); urlObj.value = 'http://'; } else { if(gIsIE){ var e = window.event; } getCaret(); var dvUrlBox = $("createUrl"); var iX = e.clientX; var iY = e.clientY; dvUrlBox.style.display = ""; dvUrlBox.style.left = (iX-300) + "px"; dvUrlBox.style.top = 33 + "px"; } } 从其中下半段的代码可见它将隐藏的小对话框显示出来了。 在用户点击了它上面的＂确定＂按钮后，这个函数又一次执行。不过这次执行的是它上半段的代码。 function setCaret() { if(gIsIE){ window.frames["HtmlEditor"].focus(); var range = window.frames["HtmlEditor"].document.body.createTextRange(); range.moveToBookmark(pos); range.select(); pos = null; } } function format(type, para){ var f = window.frames["HtmlEditor"]; var sAlert = ""; if(!gIsIE){ switch(type){ case "Cut": sAlert = "您的浏览器安全设置不允许编辑器自动执行剪切操作,请使用键盘快捷键(Ctrl+X)来完成"; break; case "Copy": sAlert = "您的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl+C)来完成"; break; case "Paste": sAlert = "您的浏览器安全设置不允许编辑器自动执行粘贴操作,请使用键盘快捷键(Ctrl+V)来完成"; break; } } if(sAlert != ""){ alert(sAlert); return; } f.focus(); if(!para){ if(gIsIE){ f.document.execCommand(type); }else{ f.document.execCommand(type,false,false); } }else{ if(type == 'insertHTML') { try{ f.document.execCommand('insertHTML', false, para); }catch(exp){ var obj = f.document.selection.createRange(); obj.pasteHTML(para); obj.collapse(false); obj.select(); } } else { try{ f.document.execCommand(type,false,para); }catch(exp){} } } f.focus(); } 从中可见它调用了execCommand('CreateLink')来将链接加到编辑器里选择的文字上的。 下面是对document.execCommand的解释（链接）：

When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand will affect the currently active editable element.

最后让我们看一下当用户点击＂保存发布＂按钮时，Discuz是如何将编辑器里的内容取出来发送给服务器的。在spacecp_blog.htm里有着包含该按钮的表单， <form id="ttHtmlEditor" method="post" autocomplete="off" action="home.php?mod=spacecp&ac=blog&blogid=$blog[blogid]{if $_GET[modblogkey]}&modblogkey=$_GET[modblogkey]{/if}" onsubmit="validate(this);" enctype="multipart/form-data"> ... <textarea class="pt" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0">$blog[message]</textarea> ... <button type="submit" id="issuance" class="pn pnc"><strong>{lang save_publish}</strong></button> 用fiddler可以看到编辑器里的内容是放在那个名叫message的暗藏的textarea里发送到服务器的：

那么编辑器里的内容是如何被放到那个textarea里去的呢？在editor_base.js里有这样一句代码，它会在表单提交给服务器前执行： window.onbeforeunload = parent.edit_save; 其中调用的函数edit_save是在editor_function.js里定义的： function edit_save() { var p = window.frames['uchome-ifrHtmlEditor']; var obj = p.window.frames['HtmlEditor']; var status = p.document.getElementById('uchome-editstatus').value; if(status == 'code') { $('uchome-ttHtmlEditor').value = p.document.getElementById('sourceEditor').value; } else if(status == 'text') { if(BROWSER.ie) { obj.document.body.innerText = p.document.getElementById('dvtext').value; $('uchome-ttHtmlEditor').value = obj.document.body.innerHTML; } else { obj.document.body.textContent = p.document.getElementById('dvtext').value; var sOutText = obj.document.body.innerHTML; $('uchome-ttHtmlEditor').value = sOutText.replace(/\r\n|\n/g,"<br>"); } } else { $('uchome-ttHtmlEditor').value = obj.document.body.innerHTML; } backupContent($('uchome-ttHtmlEditor').value); }就是在这里编辑器里的内容就被放到了那个textarea里了。


２。图片上传
 
图片上传功能是由一个基于Flash的组件SWFUpload提供的。介绍见 链接 和 SwfUploadV2.2.0中文说明文档 : SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 关于Flash技术对上传文件的支持的介绍见 链接 ，而SWFUpload组件的用法见 链接 和 链接 。

关于用SWFUpload上传的简单实例见我们过去的博文（链接）。



其中的上传图片tab项是 <li class="current" id="icoImg_btn_imgattachlist">< a href="javascript:;" hidefocus="true" onclick="switchImagebutton('imgattachlist');">{lang upload_pic}</a></li> 而它对应的tab内容是 <div class="p_opt" unselectable="on" id="icoImg_imgattachlist"{if $_G['basescript'] == 'home' && !$_G['group']['allowupload']} style="display: none;"{/if}> <div class="pbm bbda cl"> <div id="uploadPanel" class="y"> <!--{if $_G['basescript'] != 'portal'}--> {lang aim_album} <select name="savealbumid" id="savealbumid" class="ps vm" onchange="if(this.value == '-1') {selectCreateTab(0);}"> <option value="0">{lang default_album}</option> <!--{loop $albums $value}--> <option value="$value[albumid]">$value[albumname]</option> <!--{/loop}--> <option value="-1" style="color:red;">+{lang create_new_album}</option> </select> <!--{/if}--> </div> <div id="createalbum" class="y" style="display:none"> <input type="text" name="newalbum" id="newalbum" class="px vm" value="{lang input_album_name}" onfocus="if(this.value == '{lang input_album_name}') {this.value = '';}" onblur="if(this.value == '') {this.value = '{lang input_album_name}';}" /> <button type="button" class="pn pnc" onclick="createNewAlbum();"><span>{lang create}</span></button> <button type="button" class="pn" onclick="selectCreateTab(1);"><span>{lang cancel}</span></button> </div> <span id="imgSpanButtonPlaceholder"></span> </div> <div class="upfilelist upfl bbda"> <div id="imgattachlist"> <!--{if $_G['basescript'] == 'portal'}-->$article[attachs]<!--{/if}--> </div> <div class="fieldset flash" id="imgUploadProgress"></div> </div> <p class="notice">{lang click_pic_to_editor}</p> </div> 在editor_image_menu.htm里还生成了SWFUpload的实例： <!--{subtemplate common/upload}--> ... var upload = new SWFUpload({ // Backend Settings upload_url: "{$_G[siteurl]}misc.php?mod=swfupload&action=swfupload&operation=<!--{if $_G['basescript'] == 'portal'}-->portal<!--{else}-->album<!--{/if}-->", post_params: {"uid" : "$_G[uid]", "hash":"$swfconfig[hash]"<!--{if $_G['basescript'] == 'portal'}-->,"aid":$aid,"catid":$catid<!--{/if}-->}, // File Upload Settings file_size_limit : "$swfconfig[max]", // 100MB file_types : "$swfconfig[imageexts][ext]", file_types_description : "$swfconfig[imageexts][depict]", file_upload_limit : 0, file_queue_limit : 0, // Event Handler Settings (all handlers are in the upload.js file) swfupload_preload_handler : preLoad, swfupload_load_failed_handler : loadFailed, file_dialog_start_handler : fileDialogStart, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Button Settings button_image_url : "{IMGDIR}/uploadbutton.png", button_placeholder_id : "imgSpanButtonPlaceholder", button_width: 100, button_height: 25, button_cursor:SWFUpload.CURSOR.HAND, button_window_mode: "transparent", custom_settings : { progressTarget : "imgUploadProgress", uploadSource: 'portal', uploadType: <!--{if $_G['basescript'] == 'portal'}-->'portal'<!--{else}-->'blog'<!--{/if}-->, imgBoxObj: $('imgattachlist') //thumbnail_height: 400, //thumbnail_width: 400, //thumbnail_quality: 100 }, // Debug Settings debug: false }); 注意upload_url指明了处理上传文件的PHP文件，upload_success_handler里指明了上传成功后会call的函数。

在用户选择了上传文件后，文件upload.js里的函数fileDialogComplete被执行，其中call了startUpload，因而引发了文件上传。从Fiddler里可见：

上传成功后，那个上传图片的缩影是怎么出现在对话框里的呢？ 用POST请求将图片发给misc.php?mod=swfupload&action=swfupload&operation=album后，处理这个请求的脚本文件是 source/module/misc/misc_swfupload.php： } elseif($_GET['operation'] == 'album') { $showerror = true; if(helper_access::check_module('album')) { require_once libfile('function/spacecp'); if($_FILES["Filedata"]['error']) { $file = lang('spacecp', 'file_is_too_big'); } else { require_once libfile('function/home'); $_FILES["Filedata"]['name'] = addslashes(diconv(urldecode($_FILES["Filedata"]['name']), 'UTF-8')); $file = pic_save($_FILES["Filedata"], 0, '', true, 0); if(!empty($file) && is_array($file)) { $url = pic_get($file['filepath'], 'album', $file['thumb'], $file['remote']); $bigimg = pic_get($file['filepath'], 'album', 0, $file['remote']); echo "{\"picid\":\"$file[picid]\", \"url\":\"$url\", \"bigimg\":\"$bigimg\"}"; $showerror = false; } } } if($showerror) { echo "{\"picid\":\"0\", \"url\":\"0\", \"bigimg\":\"0\"}"; } 返回给客户端的一个数组，例如 {"picid":"5", "url":"data/attachment/album/201412/03/104756g0t02vdtzh2uwwut.jpg.thumb.jpg", "bigimg":"data/attachment/album/201412/03/104756g0t02vdtzh2uwwut.jpg"} 接听上传成功事件的函数是uploadSuccess，定义在upload.js文件中，其中服务器的那个返回值被赋予了参数serverData。 function uploadSuccess(file, serverData) { try { ... } else if(this.customSettings.uploadType == 'blog') { var data = eval('('+serverData+')'); if(parseInt(data.picid)) { var tdObj = getInsertTdId(this.customSettings.imgBoxObj, 'image_td_'+data.picid); var img = new Image(); img.src = data.url; var imgObj = document.createElement("img"); imgObj.src = img.src; imgObj.className = "cur1"; imgObj.onclick = function() {insertImage(data.bigimg);}; tdObj.appendChild(imgObj); var inputObj = document.createElement("input"); inputObj.type = 'hidden'; inputObj.name = 'picids['+data.picid+']'; inputObj.value= data.picid; tdObj.appendChild(inputObj); } else { showDialog('图片上传失败', 'notice', null, null, 0, null, null, null, null, sdCloseTime); } $(file.id).style.display = 'none'; 从中可见新图片的缩影是如何加到对话框了的。

另一个有趣的功能是当用户点击缩影图后，那个图片就加入了编辑框里，这是由上面的函数中的一行代码决定的： imgObj.onclick = function() {insertImage(data.bigimg);}; 这个insertImage函数是在文件static/image/editor/editor_function.js中定义的： function insertImage(image, url, width, height) { url = typeof url == 'undefined' || url === null ? image : url; width = typeof width == 'undefined' || width === null ? 0 : parseInt(width); height = typeof height == 'undefined' || height === null ? 0 : parseInt(height); var html = '<p>< a href="' + url + '" target="_blank"><img src="'+image+'"'+(width?' width="'+width+'"':'')+(height?' height="'+height+'"':'')+'></a></p>'; edit_insert(html); } function edit_insert(html) { var p = window.frames['uchome-ifrHtmlEditor']; var obj = p.window.frames['HtmlEditor']; var status = p.document.getElementById('uchome-editstatus').value; if(status != 'html') { alert('本操作只在多媒体编辑模式下才有效'); return; } obj.focus(); if(BROWSER.ie){ var f = obj.document.selection.createRange(); f.pasteHTML(html); f.collapse(false); f.select(); } else { obj.document.execCommand('insertHTML', false, html); } }
SWFUpload虽好，但完全基于Flash的局限性迟早要解决。我看到百度开发了一个类似的上传组件叫WebUploader，以HTML5为主，Flash 技术为辅。值得一试 （链接）。