最近由於項目需求,要實現一個前端文本編輯框,附帶圖片上傳實時查看的功能。比較了網上的幾款插件,首先是百度的UEitor,發現該框架過於龐大,一個小框架引入如此多的文件並不是我想看到的;其次是jQuery的easyUI,雖然個人版的是免費的,但是項目屬於公司業務,似乎用商業版的框架並不妥。考慮到項目的前端主要就是在bootstrap的基礎上構建起來的,最終選用了bootstrap-wysiwyg插件,它非常的精簡,輕巧而且擴展性強。
引入bootstrap-wysiwyg並且實現文本編輯功能十分的便捷,但是,我注意到,圖片上傳是用fileapi實現的。對於大多數網站,雖然用FileApi實現無上傳預覽用戶體驗非常好,但是真正存入數據庫的時候,我們還是希望能夠存儲圖片的在服務器的靜態路徑,而並非字符串化的圖片。簡而言之,我們需要對bootstrap-wysiwyg(以下簡稱WY)做稍許改寫。
首先我們來觀察下頁面上圖片控件,其它的控件略過,查一下源碼,很容易發現如下代碼:
<div class="btn-group"> <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"> <i class="icon-picture"></i></a> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" /> </div>
做一下說明,data-role,data-target屬性是bootstrap中預定義的事件,在這裡我們可以理解為布局相關,不用考慮。關鍵點來了,第三個屬性data-edit,bootstrap中並沒有這一事件,觀察bootstrap-wysiwyg.js,可以發現這樣一些代碼:
toolbar.find('input[type=file][data-' + options.commandRole + ']') .change( ... ... commandRole : 'edit',
也就是說,該屬性其實是為了方便選擇器而實現的,相當於給圖片按鈕添加了監聽器事件。
我們接著研究一下WY圖片預覽的實現,第一步,就像上面代碼展示的一樣,監聽器捕捉到fileInput的change事件,做出響應,調用insertFiles函數
restoreSelection(); if (this.type === 'file' && this.files && this.files.length > 0) { insertFiles(this.files); } saveSelection(); his.value = '';
找到insertFiles函數
insertFiles = function (files) { editor.focus(); $.each(files, function (idx, fileInfo) { if (/^image\//.test(fileInfo.type)) { $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) { execCommand('insertimage', dataUrl); }).fail(function (e) { options.fileUploadError("file-reader", e); }); } else { options.fileUploadError("unsupported-file-type", fileInfo.type); } }); }
我們注意到它使用了jQuery的$.Deferred()方法,先調用了一個readFileIntoDataUrl方法,成功之後通過自封裝的execCommand方法實現將圖片輸出到文本框。該圖片其實就是一個<img>標簽,只不過src屬性是用字符串表示的圖片。所以我們要做的其實是在監聽器觸發之後,將文件上傳,獲得圖片的src,再把鏈接交給之後的execCommand方法。
由於筆者對Deferred並不是特別熟悉,所以還是采用更為通常的callback模式
觀察ajaxFileUpload的調用方式:
$.ajaxFileUpload({ url : ..., secureurl : false, fileElementId : ..., dataType : "json", success : function(obj) { ... }, error : function() { ... } });
有兩個必選的屬性,url和fileElementId,為了保持依賴的正確性,重寫ajaxFileUpload是不可取的。但是由於WY的控件是監聽器實現的,所以通過函數將參數傳過去是不現實的,所以我們需要自己對輸入框定義一些屬性來達到目的。
在fileInput中添加一些屬性
<input type="file" id="pictureInput" name="picture" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" action="..." />
id 用作 fileElementId,name屬性也是必須的,主要是為了後台取值指名,action是圖片需要提交到的url
在bootstrap-wysiwyg.js中定義一個函數名為uploadFileToServer,函數格式如下:
var uploadFileToServer = function(id, action, callback) { $.ajaxFileUpload({ url : action, secureurl : false, fileElementId : id, dataType : 'json', success : function(obj) { if (obj.status) { callback(obj.imgsrc); } else options.fileUploadError("server-internal-exception", obj.message); }, error : function() { options.fileUploadErroe("upload-failure", ""); } });
將insertFiles方法作改寫如下:
insertFiles = function(files, id, action) { editor.focus(); $.each(files, function(idx, fileInfo) { if (/^image\//.test(fileInfo.type)) { /* * $.when(readFileIntoDataUrl(fileInfo)).done(function(dataUrl) { * execCommand('insertimage', dataUrl); }).fail(function(e) { * options.fileUploadError("file-reader", e); }); */ uploadFileToServer(id, action, function(src) { execCommand('insertimage', src); }); } else { options.fileUploadError("unsupported-file-type", fileInfo.type); } });
同時對監聽器做出一定的修改,以便拿到必要的屬性
toolbar.find('input[type=file][data-' + options.commandRole + ']') .change( function() { restoreSelection(); if (this.type === 'file' && this.files && this.files.length > 0) { insertFiles(this.files, $(this).attr('id'), $(this).attr('action')); } saveSelection(); this.value = ''; });
主要是增加了兩個參數位置。
如此,改寫便完成了,注意,要確保正確執行,請在控件之前引用ajaxFileUpload.js.
如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。