簡(jiǎn)介eWebEditor v8.0 是一套基于瀏覽器的所見(jiàn)即所得在線網(wǎng)頁(yè)編輯器完整程序包面向網(wǎng)站開(kāi)發(fā)者、內(nèi)容管理系統(tǒng)集成人員以及需要在線內(nèi)容編輯功能的技術(shù)運(yùn)維者。資源共606個(gè)文件壓縮包約4.29MB包含ASP動(dòng)態(tài)腳本、JavaScript交互邏輯、CSS樣式表、HTML示例頁(yè)面以及大量GIF/JPG圖標(biāo)素材部署后可直接運(yùn)行并快速接入現(xiàn)有網(wǎng)站后臺(tái)。已有194人學(xué)習(xí)下載。包內(nèi)還附帶了配置示例、上傳處理及樣式定制等核心文件便于讀者理清編輯器初始化、文件上傳和外觀調(diào)整等關(guān)鍵流程并在此基礎(chǔ)上按需修改功能或進(jìn)行二次開(kāi)發(fā)。該編輯器支持多平臺(tái)和主流瀏覽器提供字體、圖片、鏈接、表格等豐富編輯工具能有效降低內(nèi)容發(fā)布門檻適合需要在自有系統(tǒng)中集成成熟在線編輯組件的中級(jí)開(kāi)發(fā)者使用。1. eWebEditor v8.0 是什么textarea 時(shí)代的所見(jiàn)即所得今天還在跑eWebEditor v8.0 是 2010 年前后國(guó)內(nèi) CMS、OA、教務(wù)系統(tǒng)里最常見(jiàn)的所見(jiàn)即所得在線 HTML 編輯器。在 textarea 還統(tǒng)治著后臺(tái)錄入的年代它用一組 JavaScript 腳本加 iframe 模擬出帶工具欄、上傳和樣式管理的編輯界面讓編輯不用手敲 HTML 就能排出帶圖文章。到今天很多老系統(tǒng)的后臺(tái)還在用它搜索引擎里對(duì)這個(gè)版本的提問(wèn)也一直沒(méi)斷過(guò)。如果你接手的是帶它的項(xiàng)目先別急著換編輯器——先看懂它的部署方式和那幾個(gè)高頻故障點(diǎn)很多時(shí)候改幾句話就能讓一個(gè)老功能繼續(xù)穩(wěn)定服役這比推倒重來(lái)的代價(jià)小得多。2. 部署 eWebEditor v8.0從解壓目錄到替換 textarea 的最小接入要接入一個(gè)老編輯器先把它的文件結(jié)構(gòu)摸清楚。v8.0 的壓縮包解開(kāi)后通常是一個(gè) ewebeditor 目錄里面按功能分好了 js、css、images、語(yǔ)言包和處理上傳的服務(wù)端腳本。下面這張表是我見(jiàn)過(guò)最多的目錄構(gòu)成不同版本的目錄名可能有出入但職能是固定的。2.1 解壓后目錄里通常躺著哪些文件目錄 / 文件作用ewebeditor.js編輯器主程序創(chuàng)建實(shí)例和暴露 API 的入口ewebeditor_main.js / dialog 相關(guān)對(duì)話框、彈出層邏輯通常被主程序按需加載css / styles工具欄外觀、編輯區(qū)默認(rèn)樣式的樣式表images按鈕圖標(biāo)、皮膚背景圖按鈕 id 與這里的文件名一一對(duì)應(yīng)language語(yǔ)言包常見(jiàn)是簡(jiǎn)體中文和英文兩份編碼upload.asp / upload.aspx / upload.php / upload.jsp接收編輯器上傳文件的服務(wù)端腳本按網(wǎng)站技術(shù)棧選用其中一個(gè)inc / include配置類文件存放上傳路徑、類型限制等運(yùn)行時(shí)參數(shù)看到 upload 那一行就要有警覺(jué)編輯器本身的 js 只負(fù)責(zé)把文件 POST 給這個(gè)腳本文件存哪里、能不能存、叫什么名字全由腳本決定前端配置只在界面上做提示。第 3 章和第 5 章還會(huì)反復(fù)回到這個(gè)點(diǎn)。接入流程是把整個(gè) ewebeditor 目錄原樣拷進(jìn)項(xiàng)目的靜態(tài)資源根目錄比如站點(diǎn)根目錄下的 /ewebeditor/。不要只挑幾個(gè) js 文件拷走編輯器運(yùn)行時(shí)會(huì)按相對(duì)路徑去取皮膚、圖標(biāo)和語(yǔ)言包缺一個(gè)就白屏。還要注意目錄里的文件名和大小寫盡量別動(dòng)v8.0 對(duì)路徑和文件名都比較敏感改名很容易讓皮膚加載失效。2.2 用腳本創(chuàng)建編輯器new eWebEditor 與 create()頁(yè)面里原本用來(lái)錄入內(nèi)容的是一個(gè) textareaeWebEditor 的思路是讓它保留在表單里再用編輯器界面覆蓋它。最小接入代碼是這樣script typetext/javascript src/ewebeditor/ewebeditor.js/script !-- 編輯器的內(nèi)容最終要寫回這個(gè) textarea據(jù)此提交給服務(wù)端 -- form idarticleForm action/admin/save.php methodpost textarea idcontent namecontent stylewidth:800px;height:400px;/textarea button typebutton onclickbeforeSubmit()保存文章/button /form script typetext/javascript // 第一個(gè)參數(shù)是 textarea 的 id第二個(gè)參數(shù)是工具條模式simple / standard / full var editor new eWebEditor(content, full); // BasePath 必須指向編輯器目錄寫錯(cuò)會(huì)出現(xiàn)按鈕圖標(biāo)丟失、編輯區(qū)空白 editor.BasePath /ewebeditor/; // 可以用像素值也可以用百分比 editor.width 100%; editor.height 480px; // create() 執(zhí)行時(shí)textarea 會(huì)被編輯器整體替換成界面 editor.create(); /script這段代碼里最容易被忽略的是 BasePath 的結(jié)尾斜杠。v8.0 把腳本、皮膚、語(yǔ)言包的加載都拼接在 BasePath 后面如果少了斜杠請(qǐng)求會(huì)變成 /ewebeditorcss/...瀏覽器直接 404后果就是編輯器區(qū)域空白或者只剩一排沒(méi)有圖標(biāo)的文字按鈕。我見(jiàn)過(guò)的項(xiàng)目里有人寫死絕對(duì)路徑有人用相對(duì)路徑有人用 js 動(dòng)態(tài)探測(cè)穩(wěn)定交接的經(jīng)驗(yàn)是寫絕對(duì)路徑從站點(diǎn)根目錄起步。創(chuàng)建完成后textarea 會(huì)被隱藏。這里有一個(gè)最容易造成“文章保存后是空的”的坑編輯器是編輯器textarea 是 textarea兩者之間不會(huì)自動(dòng)同步必須手動(dòng)回寫。另外如果頁(yè)面需要兩個(gè)編輯器同時(shí)存在只要用不同的 textarea id 各 new 一個(gè)實(shí)例就行兩者互不干擾但記得給每個(gè)實(shí)例單獨(dú)配 BasePath 和高度。2.3 提交前把編輯內(nèi)容回寫進(jìn) textarea保存動(dòng)作發(fā)生時(shí)服務(wù)端讀的是 textarea 的 value而不是 editor 對(duì)象內(nèi)部的內(nèi)容。所以表單提交必須經(jīng)過(guò)一層回寫// 在文章表單的提交函數(shù)里先把編輯器里的 HTML 取出來(lái)放回 textarea function beforeSubmit() { // 常見(jiàn)版本用 contentHtml() 取編輯區(qū)內(nèi)容個(gè)別版本叫 getHtml()看實(shí)際包里的方法名 var html editor.contentHtml(); // 放回 textareanamecontent 的字段才會(huì)隨表單提交 document.getElementById(content).value html; // 如果編輯器內(nèi)容為空可以在這里做校驗(yàn) if (html.replace(/[^]/g, ).trim() ) { alert(正文不能為空); return false; } return true; }這里的邏輯是顯式地把編輯器內(nèi)容寫到表單字段再做一次去標(biāo)簽空文本的輕量校驗(yàn)。很多接入失敗的案例都繞過(guò)了這一步頁(yè)面上編輯有內(nèi)容提交后數(shù)據(jù)庫(kù)里是空串排查半天發(fā)現(xiàn) textarea 從來(lái)沒(méi)被賦值。把回寫放在 submit 之前的按鈕事件里是最常見(jiàn)也最不容易漏的做法。如果表單是用 ajax 序列化提交的同樣要在序列化之前手動(dòng)執(zhí)行這段回寫把 content 字段更新成編輯器當(dāng)前內(nèi)容。有些項(xiàng)目偷懶只在頁(yè)面加載時(shí)賦值一次用戶改完內(nèi)容直接提交庫(kù)里永遠(yuǎn)是最初那一版這類問(wèn)題在論壇里被當(dāng)成靈異事件問(wèn)過(guò)很多次其實(shí)就是沒(méi)有回寫。部署這章做到這里一個(gè)能錄入、能保存的最小閉環(huán)就成立了。下一步是把它按業(yè)務(wù)調(diào)成想要的樣子。3. 配置 eWebEditor v8.0工具欄、上傳與內(nèi)容區(qū)樣式三組必調(diào)參數(shù)編輯器接入只是第一步真正對(duì)接業(yè)務(wù)需求的是配置層。v8.0 的配置散在三處創(chuàng)建實(shí)例時(shí)傳的模式、實(shí)例上的屬性賦值、以及服務(wù)端上傳腳本里的參數(shù)。這一章按使用頻率排三個(gè)方向工具條、上傳、內(nèi)容區(qū)樣式。調(diào)好這三組大部分后臺(tái)需求就能覆蓋。3.1 工具條模式與自定義按鈕順序模式參數(shù) full / standard / simple 只是三套預(yù)設(shè)實(shí)際項(xiàng)目里經(jīng)常要按角色給權(quán)限。比如普通編輯不讓他看到插入代碼、直接改源碼的按鈕管理員才看到完整工具條。常見(jiàn)做法是給不同角色各創(chuàng)建一份配置。// 普通編輯走簡(jiǎn)潔模式隱藏源碼和上傳相關(guān)按鈕 var editor new eWebEditor(content, standard); editor.toolBar Cut,Copy,Paste,|,Undo,Redo,|,FontName,FontSize,|,Bold,Italic,Underline,|,ForeColor,BackColor,|,UnorderedList,OrderedList,|,Link,Unlink; // 管理員在標(biāo)準(zhǔn)基礎(chǔ)上追加插入表格和代碼 var adminEditor new eWebEditor(content, full); adminEditor.toolBar editor.toolBar ,|,Table,|,Image,Flash,|,Source;工具條的每個(gè)按鈕 id 要和 images 目錄里的圖標(biāo)文件名對(duì)應(yīng)少一個(gè)圖標(biāo)最多是顯示空白不影響功能。但按鈕 id 拼寫錯(cuò)了會(huì)直接不出現(xiàn)。想確認(rèn)有哪些按鈕可用去 images 目錄看圖標(biāo)文件名或者看語(yǔ)言包里列出的按鈕標(biāo)題比猜命名要可靠。豎線是分組分隔符換行由編輯器根據(jù)寬度自適應(yīng)不要試圖用空格去對(duì)齊。配置里一個(gè)常見(jiàn)玄學(xué)是給 toolBar 賦值之后再調(diào)用 create()create 之后再去改 toolBar 往往不生效。所以要養(yǎng)成“先配置屬性、最后 create”的順序習(xí)慣避免為了加一個(gè)按鈕去刷新頁(yè)面。角色類的工具條差異建議放到后端下發(fā)登錄時(shí)把該角色的工具條字符串渲染進(jìn)頁(yè)面而不是在前端寫死判斷。3.2 上傳參數(shù)前端限制只是提示真正的閘門在服務(wù)端編輯器的上傳按鈕是一個(gè)獨(dú)立表單把文件發(fā)到 upload.asp 之類的腳本。前端這邊能配的通常只有上傳地址和回顯路徑格式類型與大小限制主要寫在服務(wù)端腳本里。以當(dāng)年最常見(jiàn)的 PHP 版為例?php // upload.php 的關(guān)鍵參數(shù)允許擴(kuò)展名、保存目錄、生成文件名 $allowExt array(gif, jpg, jpeg, png, doc, docx, xls, xlsx, pdf, zip); // 保存到按日期切分的目錄避免單目錄文件過(guò)多 $saveDir ../uploads/ . date(Ymd); if (!file_exists($saveDir)) { mkdir($saveDir, 0755, true); } // 文件名重命名時(shí)間戳加隨機(jī)數(shù)避免中文名和重名文件 $ext strtolower(pathinfo($_FILES[upload][name], PATHINFO_EXTENSION)); if (!in_array($ext, $allowExt)) { exit(文件類型不允許); } $newName date(YmdHis) . _ . rand(1000, 9999) . . . $ext; move_uploaded_file($_FILES[upload][tmp_name], $saveDir . / . $newName); echo $saveDir . / . $newName; // 編輯器用返回值拼圖片 URL這段腳本透露兩個(gè)重點(diǎn)。一是保存目錄必須存在且有寫入權(quán)限很多上傳失敗的報(bào)錯(cuò)都來(lái)自目錄不可寫日志里表現(xiàn)為 move_uploaded_file 返回 false。二是返回給編輯器的 URL 決定了回顯地址如果返回的是相對(duì)路徑而編輯器頁(yè)面在別的目錄層級(jí)圖片就會(huì)打不開(kāi)。穩(wěn)妥做法是返回完整 URL或者在入口處用常量拼出站點(diǎn)地址。常見(jiàn)的上傳參數(shù)配置項(xiàng)如下不同版本叫法略有差異參數(shù)作用建議值允許擴(kuò)展名白名單列表只留業(yè)務(wù)需要的格式圖片類建議 jpg/jpeg/png/gif保存目錄文件落盤位置獨(dú)立于站點(diǎn)根的 uploads 目錄按日期分子目錄文件重命名避免原文件名上盤日期 隨機(jī)數(shù)不保留用戶原始文件名回顯 URL編輯器拼圖片地址完整 URL 或站內(nèi)根路徑不返回相對(duì)路徑還有一類上傳失敗的現(xiàn)場(chǎng)特別像網(wǎng)絡(luò)問(wèn)題點(diǎn)按鈕后進(jìn)度條走完編輯器里沒(méi)有圖。去服務(wù)端看返回的字段大多數(shù)情況是類型不在白名單里或者體積超過(guò)腳本里未設(shè)置的上限。不要在前端死等直接開(kāi)瀏覽器開(kāi)發(fā)者工具看 upload 腳本的 HTTP 響應(yīng)msg 或返回值里會(huì)寫明拒絕原因。3.3 內(nèi)容區(qū)樣式讓編輯效果貼近前臺(tái)正文后臺(tái)編輯效果和前臺(tái)展示不一致是富文本編輯器被吐槽最多的地方。根因是編輯區(qū) iframe 用的是編輯器自帶樣式和前臺(tái)頁(yè)面的 font、line-height、圖片邊距不一樣。v8.0 支持通過(guò)參數(shù)覆蓋編輯區(qū)默認(rèn)樣式。// 把前臺(tái)正文頁(yè)的 CSS 核心規(guī)則導(dǎo)入編輯區(qū) editor.styleBody body{font:14px/1.8 Helvetica Neue,PingFang SC,Microsoft YaHei; color:#333;margin:12px;} img{max-width:100%;height:auto;} p{margin:0 0 12px;} table{border-collapse:collapse;width:auto;} td,th{border:1px solid #ddd;padding:6px 10px;}; editor.create();這里寫的是一條完整的 CSS 字符串create 時(shí)編輯器會(huì)把它注入到編輯區(qū) iframe 的 head 里。對(duì)應(yīng)的前臺(tái)頁(yè)面只需要保證同名規(guī)則一致編輯時(shí)看到的就是接近最終效果的排版。注意不要用外鏈 / 方式去引前臺(tái)樣式因?yàn)榫庉媴^(qū) iframe 的基準(zhǔn)路徑和后臺(tái)頁(yè)面不同外鏈很容易失效而且前臺(tái)全量 CSS 里帶響應(yīng)式規(guī)則時(shí)編輯區(qū)的窄寬度會(huì)被布局規(guī)則干擾出現(xiàn)邊距錯(cuò)亂。還有一個(gè)容易翻車的細(xì)節(jié)前臺(tái)樣式中如果寫了 * { box-sizing: border-box; } 之類的通配符它會(huì)繼承到編輯區(qū)嗎v8.0 的編輯區(qū)是獨(dú)立 iframe 文檔前臺(tái)頁(yè)面的全局選擇器進(jìn)不去只有通過(guò) styleBody 顯式注入的規(guī)則才生效。這是它的隔離邊界也是它相對(duì)新版編輯器的樸實(shí)之處——沒(méi)有多處封裝一條字符串搞定反而好排查。配置調(diào)完接下來(lái)進(jìn)入最常見(jiàn)的運(yùn)行期問(wèn)題排查。4. 避坑指南v8.0 常見(jiàn)的兼容、亂碼與上傳問(wèn)題排查跑通部署和配置只是開(kāi)始v8.0 在老后臺(tái)里能穩(wěn)定跑起來(lái)繞不開(kāi)下面幾類高頻故障。這一章按現(xiàn)象、原因、解決的順序來(lái)寫都是我實(shí)際遇到過(guò)且能穩(wěn)定復(fù)現(xiàn)的現(xiàn)場(chǎng)。4.1 頁(yè)面打開(kāi)編輯器空白或只有一排按鈕文字現(xiàn)象整個(gè)編輯區(qū)渲染不出來(lái)只有 toolbar 區(qū)域孤零零幾個(gè)文字按鈕或者 iframe 白屏。原因八成是 BasePath 配錯(cuò)或者編輯器目錄里的 js、css、語(yǔ)言包沒(méi)有按相對(duì)路徑加載到。v8.0 對(duì) BasePath 非常敏感多一個(gè)少一個(gè)斜杠都會(huì)讓后續(xù)請(qǐng)求 404另外頁(yè)面本身如果用了靜態(tài)資源合并插件攔截了 ewebeditor.js 也可能白屏。解決瀏覽器開(kāi)發(fā)者工具切到 Network過(guò)濾編輯器目錄路徑看哪些請(qǐng)求返回 404逐個(gè)修正后刷新。要特別檢查入口頁(yè)是否部署在子目錄比如后臺(tái)地址是 /admin/而編輯器在 /ewebeditor/BasePath 要寫成來(lái)自根目錄的絕對(duì)路徑而不是相對(duì)路徑 ../ewebeditor/后者在當(dāng)前頁(yè)面 URL 帶參數(shù)時(shí)極易解析錯(cuò)。4.2 上傳成功但圖片不顯示或圖片 URL 是相對(duì)路徑導(dǎo)致前臺(tái) 404現(xiàn)象編輯器里插入圖片后后臺(tái)頁(yè)面能看到前臺(tái)文章頁(yè)圖片裂開(kāi)或者編輯器里也立刻裂開(kāi)。原因上傳腳本返回的是相對(duì)路徑比如 ../../uploads/xxx.jpg從編輯器所在 iframe 的 URL 出發(fā)解析時(shí)路徑層級(jí)與預(yù)期不符。v8.0 的圖片回顯是直接拼在里的返回值是什么瀏覽器就按什么解析。解決改造服務(wù)端腳本返回絕對(duì) URL用站點(diǎn)配置的域名開(kāi)頭拼比如 $domain . $saveDir . / . $newName。如果系統(tǒng)部署在多個(gè)域名或 CDN 后面至少也要保證返回 /uploads/... 這種以根斜杠開(kāi)頭的站內(nèi)絕對(duì)路徑不與當(dāng)前頁(yè)面層級(jí)綁定。改完上傳腳本后記得清一下編輯器緩存有些瀏覽器對(duì) iframe 內(nèi)容緩存得厲害。4.3 保存到數(shù)據(jù)庫(kù)后再讀取中文變成問(wèn)號(hào)或亂碼現(xiàn)象編輯器里顯示正常提交后庫(kù)里保存的是 ????? 或者類似字符替換的亂碼。原因頁(yè)面是 UTF-8但語(yǔ)言包、上傳腳本或數(shù)據(jù)庫(kù)連接是 GBK字符在傳輸和存儲(chǔ)之間編碼不一致。編輯器本身不轉(zhuǎn)碼它把 HTML 原文交給 textarea后續(xù)全交給服務(wù)端。解決先把語(yǔ)言包文件轉(zhuǎn)成 UTF-8保證編輯器輸出字符不先壞掉再檢查服務(wù)端腳本和數(shù)據(jù)庫(kù)連接的字符集以 MySQL 為例連接后執(zhí)行 set names utf8mb4。這三處統(tǒng)一成同一種編碼后亂碼會(huì)消失。排查順序是先看瀏覽器 Network 里表單提交的原始字節(jié)再看服務(wù)端接受到的內(nèi)容最后看庫(kù)里字段哪一步開(kāi)始?jí)膯?wèn)題就在哪一段。我曾經(jīng)排查過(guò)一個(gè)案例頁(yè)面和語(yǔ)言包都是 UTF-8結(jié)果 upload.php 是用 GBK 寫的 include 文件編輯器內(nèi)容經(jīng)它轉(zhuǎn)發(fā)時(shí)整體亂掉這種藏在中間層的編碼問(wèn)題最費(fèi)時(shí)間。4.4 編輯區(qū)內(nèi)文字和字號(hào)不對(duì)或被頁(yè)面全局樣式帶偏現(xiàn)象在后臺(tái)編輯時(shí)正文突然變大或變小段間距時(shí)有時(shí)無(wú)某些操作后編輯區(qū)出現(xiàn)頁(yè)面 header 的樣式。原因常見(jiàn)是 styleBody 沒(méi)有按預(yù)期注入或者配置里寫入了帶 html, body 選擇器的規(guī)則把編輯區(qū)外層的后臺(tái)頁(yè)面元素也波及了。另一個(gè)來(lái)源是編輯器默認(rèn)樣式被局部修改后又升級(jí)覆蓋導(dǎo)致版本間差異。解決回退到最小可復(fù)現(xiàn)配置清空 styleBody讓編輯器回到自帶默認(rèn)樣式確認(rèn)是否恢復(fù)。如果恢復(fù)了再逐條加業(yè)務(wù)樣式每次加完刷新驗(yàn)證。經(jīng)驗(yàn)是 styleBody 里只寫正文相關(guān)的標(biāo)簽規(guī)則不要寫通用通配符也不要用 !important否則未來(lái)想覆蓋會(huì)非常痛苦。4.5 上傳接口成為 getshell 入口老版本最臭名昭著的漏洞現(xiàn)象服務(wù)器被上傳了一個(gè) .asp 或 .php 文件網(wǎng)站隨即被拿下。這類事件在 eWebEditor 系的老系統(tǒng)上屢見(jiàn)不鮮歷史上有過(guò)批量被掃描的記錄很多安全通告里都點(diǎn)過(guò)它的名。原因上傳腳本只按擴(kuò)展名黑名單過(guò)濾或者根本沒(méi)過(guò)濾文件名沒(méi)有重命名直接保留用戶上傳時(shí)的名字保存目錄還位于站點(diǎn)根且可執(zhí)行腳本。三者疊加就是一條直達(dá)權(quán)限的通道這也是很多安全老鳥(niǎo)對(duì) v8.0 印象深刻的根由。解決上傳腳本必須做三件事——擴(kuò)展名白名單、文件中真實(shí)類型判斷、保存文件名重命名為隨機(jī)名。保存目錄要獨(dú)立并禁止執(zhí)行腳本如 IIS 下目錄不分配腳本權(quán)限、Nginx 或 Apache 下配置該目錄不可解析 PHP。更保守的做法是把上傳文件收進(jìn)服務(wù)端主動(dòng)生成的日期目錄并在入口做驗(yàn)證。這部分在第 5 章會(huì)給出可直接抄的改造代碼。5. 二次開(kāi)發(fā) v8.0自定義按鈕與上傳服務(wù)端安全改造老編輯器換不掉的時(shí)候需求還會(huì)繼續(xù)往里加。v8.0 的擴(kuò)展點(diǎn)主要在兩個(gè)地方工具條按鈕的注冊(cè)與回調(diào)、上傳腳本的改造。把這兩個(gè)點(diǎn)吃透多數(shù)定制需求都能接住。第 4 章最后提到的安全改造也一并在這章落地。5.1 往工具條上加一個(gè)自定義按鈕自定義按鈕的套路是先在工具條字符串里聲明按鈕 id再在回調(diào)里攔截這個(gè) id 做動(dòng)作。按鈕需要一張圖標(biāo)尺寸通常與 v8.0 內(nèi)置圖標(biāo)一致大約 20×20 像素左右格式用 gif 或 png 都行。// 在標(biāo)準(zhǔn)工具條末尾追加一個(gè)自定義按鈕 CustomTip var editor new eWebEditor(content, full); editor.toolBar Cut,Copy,Paste,|,Undo,Redo,|,Bold,Italic,Underline,|,CustomTip; editor.create(); // 按鈕點(diǎn)擊事件的注冊(cè)btnId 與工具欄聲明里的 id 一一對(duì)應(yīng) editor.onButtonClick function(btnId) { if (btnId CustomTip) { // 在焦點(diǎn)位置插入一段業(yè)務(wù)提示文本 editor.insertHTML(此處為小編提示發(fā)布前請(qǐng)刪除); } };這個(gè)回調(diào)里能做很多事取選中內(nèi)容、插入模板、彈窗選業(yè)務(wù)數(shù)據(jù)再回填。v8.0 對(duì)外暴露的編輯區(qū) API 不多但 insertHTML 和 getSelectHtml 這對(duì)組合已經(jīng)覆蓋了大部分內(nèi)容插入類需求。寫回調(diào)時(shí)有一個(gè)細(xì)節(jié)如果自定義按鈕是彈出一個(gè)窗口讓用戶選擇數(shù)據(jù)彈窗打開(kāi)前要先把編輯器當(dāng)前的選中范圍記住否則窗口關(guān)閉后焦點(diǎn)回到編輯區(qū)原來(lái)的選中區(qū)域丟失插入位置會(huì)跑到文章末尾。常見(jiàn)做法是彈窗前用起始位置記錄偏移關(guān)閉后用 restore 之類的方式恢復(fù)。如果包版本不支持范圍恢復(fù)就把插入邏輯改成“始終在光標(biāo)處插入”的簡(jiǎn)化模式犧牲一點(diǎn)精度但穩(wěn)定。圖標(biāo)缺失時(shí)按鈕不會(huì)出現(xiàn)在工具條上所以自制按鈕前先確認(rèn) images 目錄里沒(méi)有同名文件再自行放一張。放進(jìn)去后強(qiáng)刷瀏覽器按鈕出現(xiàn)后再去綁回調(diào)避免把問(wèn)題混在一起。5.2 配合業(yè)務(wù)從選中內(nèi)容生成帶樣式的引用塊一個(gè)更真實(shí)的定制場(chǎng)景編輯要選中一段文字一鍵包成一個(gè)醒目的提示塊。這需要讀取選中內(nèi)容并包進(jìn)結(jié)構(gòu)里。editor.onButtonClick function(btnId) { if (btnId CustomTip) { // 先取編輯區(qū)選中內(nèi)容 var selHtml editor.getSelectHtml ? editor.getSelectHtml() : ; var tipHtml blockquote classeditor-tip (selHtml || 請(qǐng)輸入提示內(nèi)容) /blockquote; editor.insertHTML(tipHtml); } };說(shuō)明一下這里為什么先判斷 getSelectHtml 是否存在v8.0 不同小版本的 API 命名有出入直接用會(huì)報(bào)錯(cuò)。寫擴(kuò)展代碼時(shí)先做方法存在性判斷是和老版本 js 共存的習(xí)慣別嫌啰嗦它能避免很多“換個(gè)環(huán)境就掛”的詭異問(wèn)題。插入的 HTML 最后要依賴 styleBody 里的 .editor-tip 樣式才能成型所以在第 3 章配置樣式時(shí)給自定義結(jié)構(gòu)預(yù)留樣式類是配套操作不然插進(jìn)去的是一段沒(méi)有樣式的裸標(biāo)簽。樣式類的命名最好帶 editor- 前綴和業(yè)務(wù)樣式區(qū)分開(kāi)這樣即使后期前臺(tái)改版也容易識(shí)別哪些是編輯器產(chǎn)物。多編輯器實(shí)例同時(shí)存在時(shí)回調(diào)里要避免用全局變量存 editor 對(duì)象。正確做法是讓每個(gè)實(shí)例自己的閉包持有引用function createCustomEditor(textareaId) { var editor new eWebEditor(textareaId, full); editor.BasePath /ewebeditor/; editor.onButtonClick function(btnId) { // 這里的 editor 是閉包內(nèi)的實(shí)例不會(huì)串到另一個(gè)編輯器上 if (btnId CustomTip) { editor.insertHTML(自定義內(nèi)容); } }; editor.create(); return editor; }這樣頁(yè)面里有多個(gè)編輯器時(shí)按鈕回調(diào)各自作用于自己的實(shí)例不會(huì)出現(xiàn)“編輯 A 文章時(shí)插到 B 文章末尾”的串場(chǎng)問(wèn)題。5.3 上傳服務(wù)端安全改造一段可以直接抄的 PHP 示例第 4 章提到的 getshell 風(fēng)險(xiǎn)整改核心在服務(wù)端腳本。以 PHP 版為例我會(huì)把 upload.php 里最關(guān)鍵的環(huán)節(jié)改成下面這樣?php // 1. 白名單校驗(yàn)擴(kuò)展名第一次攔截 $allowExt array(jpg, jpeg, png, gif, bmp); $ext strtolower(pathinfo($_FILES[upload][name], PATHINFO_EXTENSION)); if (!in_array($ext, $allowExt)) { die({error:1,msg:類型不允許}); } // 2. 校驗(yàn)真實(shí)文件類型防改名繞過(guò) $finfo finfo_open(FILEINFO_MIME_TYPE); $mime finfo_file($finfo, $_FILES[upload][tmp_name]); finfo_close($finfo); if (!in_array($mime, array(image/jpeg, image/png, image/gif, image/bmp))) { die({error:1,msg:文件內(nèi)容不是合法圖片}); } // 3. 重命名文件不保留原文件名目錄按日期隔離 $saveDir __DIR__ . /../../uploads/ . date(Ymd); if (!file_exists($saveDir)) { mkdir($saveDir, 0755, true); } $newName date(YmdHis) . _ . bin2hex(random_bytes(4)) . . . $ext; // 4. 移動(dòng)成功后返回可訪問(wèn)的 URL用站點(diǎn)常量拼完整地址 move_uploaded_file($_FILES[upload][tmp_name], $saveDir . / . $newName); echo {url: . SITE_URL . uploads/ . date(Ymd) . / . $newName . };這段代碼把前面討論過(guò)的三個(gè)核心點(diǎn)全占了擴(kuò)展名白名單是第一道門真實(shí)類型識(shí)別是第二道門隨機(jī)重命名消除了用戶可控文件名日期目錄讓文件分布散開(kāi)。SITE_URL 是項(xiàng)目已有的站點(diǎn)地址常量沒(méi)有就寫死在配置里不要用相對(duì)路徑拼。服務(wù)端文件類型校驗(yàn)不是萬(wàn)能的但能把大多數(shù)腳本后門擋在門外。配合 Web 服務(wù)器層把 uploads 目錄的腳本執(zhí)行權(quán)限關(guān)掉v8.0 最經(jīng)典的那條上傳漏洞路徑就被堵住了。Nginx 下可以對(duì)該目錄單獨(dú)配置 location 并禁掉 php 解析Apache 則用 Directory 配置 RemoveHandler 或 php_admin_flag。這一步在安全整改清單里屬于必做項(xiàng)不要因?yàn)榫庉嬈骺粗黄鹧劬吞^(guò)歷史上因此失守的站點(diǎn)不少。6. 驗(yàn)證與交付提交前內(nèi)容清理與一條完整驗(yàn)收路徑功能改完要交付了最后一步是給編輯器收口。收口的核心是“內(nèi)容不能裸奔”用戶寫的 HTML 里可能帶著 script 和事件屬性前臺(tái)展示時(shí)會(huì)執(zhí)行。v8.0 不做內(nèi)容過(guò)濾過(guò)濾必須落在提交函數(shù)里。function cleanHtml(html) { // 去掉 script、iframe、object 等標(biāo)簽再去事件屬性 return html.replace(/script[^]*[\s\S]*?\/script/gi, ) .replace(/iframe[^]*[\s\S]*?\/iframe/gi, ) .replace(/object[\s\S]*?\/object/gi, ) .replace(/\son\w\s*\s*[][^]*[]/gi, ); } function beforeSubmit() { var html editor.contentHtml(); document.getElementById(content).value cleanHtml(html); return true; }這一層清理不能取代服務(wù)端過(guò)濾但能大幅減少前端風(fēng)險(xiǎn)標(biāo)記的入庫(kù)。服務(wù)端建議再做一次同樣的清洗對(duì)存進(jìn)庫(kù)的 HTML 只放行白名單標(biāo)簽這是老系統(tǒng)加固的常見(jiàn)做法。驗(yàn)收清單按這條路徑走一遍新建文章輸入帶格式內(nèi)容并插入一張圖提交后到數(shù)據(jù)庫(kù)看源碼再在前臺(tái)頁(yè)面渲染確認(rèn)圖片和樣式正常用管理員身份錄一段含 script 標(biāo)簽的內(nèi)容確認(rèn)提交時(shí)被剝離換 Chrome 和 Edge 各驗(yàn)證一次編輯、上傳、回寫三件事。v8.0 作為老版本在現(xiàn)在的瀏覽器上走的是兼容模式只要部署的是完整包、BasePath 正確主流瀏覽器都能用。我接手每個(gè)老 OA 項(xiàng)目時(shí)第一件事永遠(yuǎn)是先把提交回寫和內(nèi)容清理做掉再談別的需求。曾有一個(gè)站點(diǎn)因?yàn)槁┝嘶貙懢庉嬓列量嗫嗯诺陌姹４婧笕縼G失那次教訓(xùn)讓我把這一步焊進(jìn)了流程。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取