天天看點

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

1、上傳圖檔

2、上傳塗鴉

3、字數限制

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

4、另一視圖頁圖文顯示

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

下載下傳後,在Scripts檔案夾下建立UEditor檔案夾,把所有下載下傳文檔都放到UEditor檔案夾中。

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

我們需要一個Model,用[DataType(DataType.MultilineText)]來指定某字元串類型屬性使用TextArea來顯示。

HomeController中,一個Action用來顯示強類型視圖,另一個Action,當驗證通過顯示Result.cshtml部分視圖。

Result.cshtml部分視圖顯示圖文資訊。

Home/Create.cshtml中,讓TextArea呈現編輯器,通過addListener()方法為編輯器添加偵聽contentChange事件方法,當字數超出限制(這裡是100),就讓編輯器執行一個回退操作:editor.execCommand("undo")。另外,還通過 Window.UEDITOR_HOME_URL = "/Scripts/UEditor/"設定了UEditor的根路徑,這裡的設定最終會指派給ueditor.config.js中UEDITOR_HOME_URL屬性。

圖檔的上傳路徑在config.json中設定。

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

以上,從imageUrlPrefix和imagePathFormat或scrawlPathFormat設定大緻可以看出圖檔的儲存路徑是:Scripts/UEditor/net/upload/image/20140607/6353775730679106479709368.jpg,為此,我們需要在Scripts/UEditor/net下建立upload檔案夾,再在Scripts/UEditor/net/upload下建立image檔案夾。

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

最後在ueditor.config.js中設定UEditor的全局路徑、一般處理程式的路徑、字數限制,等等。

MVC使用百度開源文本編輯器UEditor實作圖文并茂,字數限制,上傳圖檔或塗鴉

繼續閱讀