一、源碼路徑
https://github.com/weiganyi/mini-editor
二、界面
你用瀏覽器打開源目錄下的test.html文件，就可以看到一個樣例Web編輯器的外觀。
三、背景
網上有許多開源的Web編輯器項目可以方便我們使用，但是它們的功能通常都比較豐富，體積也較大，並且很多功能通常都用不到，所以我萌生了做一個輕量級Web編輯器的想法。
Web編輯器的使用環境決定了要使用Javascript來實現，有些開源項目需要前後臺代碼來配合完成功能，我考慮到編輯器的通用性，所以主要依靠HTML/CSS/Javascript來實現，儘量不依賴後臺代碼的配合。
Web前端開發一個很重要的問題是要保證不同瀏覽器的兼容性，所以我儘量使用jQuery庫而不是原生API來完成DOM樹的操作，並且實測了主流的IE、Firefox、chrome三個瀏覽器的兼容性。
一些編輯器需要用戶手動輸入html或者自定義的標籤來實現格式，需要用戶有編程基礎或者學習一套格式標籤，非常不方便，所以實現一個所見即所得的編輯器是項目的首要目標。
四、功能實現
編輯器主要完成如下功能：
1、提供一個編輯框工具條，工具條提供如下功能：bold、italic、underline、strikethrough、font、orderedlist、unorderedlist、indent、outdent、horizontalrule、link、unlink、hostimage、nwkimage、removeformat、emoticon、table。
2、對font、link、hostimage、nwkimage、emoticon、table等編輯功能提供下拉菜單風格的具體配置頁框。
3、提供支持界面多語言的機制。
4、選擇三個主流瀏覽器IE8、Firefox24、chrome31來驗證兼容性。
5、要能夠比較方便的集成到Web頁面中。
五、總體設計思路
1、編輯器使用jQuery來提高瀏覽器兼容性，通過給jQuery庫增加插件函數和對象的方式來組織代碼。同時由於給jQuery增加插件函數或對象，會污染jQuery的名字空間，考慮到要儘量減少名字空間污染，整體控制在只給jQuery增加一個創建函數和一個編輯器對象來實現所有功能。
2、編輯器用到的html和css要儘量獨立出來，這樣便於閱讀和維護，減少直接通過Javascript對DOM樹的操作。
3、下拉菜單風格的命令配置頁框，使用css的absolute視圖來實現，通過鼠標事件觸發頁框的顯示與隱藏。
4、Web編輯器實現主要有兩種方式，一種是通過textarea的多行文本框，另一種是使用iframe框架，然後把它的contentEditor屬性設爲true，前者的優點是能夠跟表單無縫集成，缺點是如果插入圖片，不能夠所見即所得的顯示出來，考慮到用戶友好性，我選擇後一種方式來實現。
5、在實現格式編輯功能時，也有兩種選擇，一種是通過瀏覽器支持的execCommand來完成，另一種是自己獲取選中範圍，然後修改範圍的樣式，再重新插入文本中的手工方式。前者的優點是簡單，後者的優點是靈活，但是需要自己處理不同瀏覽器的兼容性。考慮方便和兼容性方面，我主要依靠execCommand來實現格式功能，除了execCommand不支持的表格插入功能用第二種方式來實現。
6、因爲iframe本身不能提交，所以在提交時需要另外創建一個隱藏的表單，表單包含一個textarea多行文本框，然後獲取iframe的內容並賦值給textarea多行文本框，來實現提交功能。
7、多語言機制設計上通過定義一個包含界面文本的字符串數組，每種語言獨立一個js文件，文件裏包含這種語言對應的字符串數組。然後通過Javascript腳本把配置語言對應的js文件鏈接到Web頁面的<head>標籤裏，來實現界面文本的多語言定義，最後再對界面文本進行替換。
8、在實現本地圖片提交功能時，也有幾種選擇。第一種是採用傳統input type=file控件來實現，在選擇文件後，通過val()獲取選擇文件的路徑，但在chrome和firefox下瀏覽器由於安全考慮要隱藏本地文件的路徑，只能獲取到文件名，不能獲取到完整路徑，所以沒法把圖片實時插入iframe中並顯示出來。第二種是採用ajax來提交本地圖片，但是在chrome下也是因爲安全原因不能通過ajax來訪問本地文件，並且用ajax提交時要創建FormData類型的數據，IE卻不支持這個，所以這種方法不具有瀏覽器通用性。第三種是創建一個隱藏的iframe，然後再創建一個表單，表單的target屬性指向這個隱藏的iframe，表單包含input type=file控件，當提交這個表單時，只會刷新這個隱藏的iframe，不會刷新頁面，所以頁面看起來是沒有刷新的。再通過監聽iframe的load事件，可以獲取服務器的響應，從中取得服務器端生成的圖片路徑。所以最後採用第三種方式來實現本地圖片的提交功能。
9、爲了預防重複提交文章，我在每次提交表單時增加一個timestamp隨機字符串參數，供後臺判斷是否是重複的請求。
10、不提供同一Web頁面的多個編輯器支持，主要有如下考慮：1）用戶體驗不好，如果一個頁面有多個編輯器，提交其中一個編輯器內容時頁面會刷新，會導致其他編輯器也被刷新，即便通過提交的編輯器觸發其他編輯器也同時提交，還是需要用戶保證所有編輯器的內容都是處於最終可提交狀態的，不好控制。2）編輯器主要應用的博客之類網站可以不需要一個頁面有多個編輯框。3）如果要實現一個頁面有多個編輯器，同時要在提交一個編輯器時不刷新頁面，需要爲每個編輯器準備一個隱藏頁框來實現，提交時刷新這個頁框。另外工具條以及編輯器對象需要採用動態創建的方式，以便於根據編輯器的名字來給它們設置名字，以避免同一Web頁面中對象的名字衝突。
六、文件及目錄介紹
jquery-1.10.1.js：jQuery庫代碼。
mini_editor.css：定義了工具條所使用的css樣式基礎。
mini_editor.js：編輯器的主要Javascript代碼，同時包括工具條的html基礎代碼。
test.html：一個使用編輯器的樣例Web頁面。
images目錄：包含工具條所用到的圖片。
images/emoticons目錄：包含表情圖片。
lang目錄: 包含界面文本不同語言的js文件。
七、使用方法
1、怎樣應用Web編輯器到頁面
首先需要鏈接jQuery庫、編輯器CSS/JS文件到<head>標籤：
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<link type="text/css" rel="stylesheet"href="mini_editor.css"/>
<script type="text/javascript"src="mini_editor.js"></script>
其次在Web頁面中定義一個iframe，iframe的外觀自己控制並決定最終編輯框的外觀：
<p>
<iframe src="" frameborder="0" id="editor"name="editor" width="800" height="300"style="border:1px solid #ccc;"></iframe>
</p>
最後在定義的iframe下面插入一段Javascript腳本來生成編輯器：
<script type="text/javascript">
$("#editor").mini_editor_create({lang:"ch",
image_page:"http://172.125.102.146/image.php",
text_page:"http://172.125.102.146/text1.php"});
</script>
經過上述步驟後，Web編輯器就可以在頁面中工作了。
2、Web編輯器的參數介紹
lang：語言參數，取值可以是en（英語）、ch（中文），還可自己擴充，但要和lang目錄下的語言js文件名對應上。
image_page：提交本地圖片的服務器頁面地址。
text_page：提交文章的服務器頁面地址。
base_url：編輯器根目錄在目標系統的路徑。
max_img：可以插入的本地圖片最大數量，默認值是10。
load_callback：編輯器加載完後的回調函數，可以實現這個函數對加載完後的編輯器做一些修改動作。
submit_callback：按了提交按鈕之後的回調函數，可以實現這個函數對即將提交前的表單做一些修改動作。（完）