1. 程式人生 > >【在MVC中應用百度富文字編輯器】

【在MVC中應用百度富文字編輯器】

1.下載.NET版本的百度富文字編輯器,前往 下載.NET版本百度富文字框 

2.解壓下載的.zip壓縮包,將utf8-.net資料夾名稱改為:ueditor,複製到MVC根目錄下面。結構如下:

App_Code 上的檔案是應用程式的原始碼

  • Config.cs 負責讀取配置檔案
  • Handler.cs 是請求處理器的基類,提供了一些基本物件的訪問以及輸出控制。如果需要增加處理器,應該從該基類繼承
  • PathFormatter.cs 解析 PathFormat,把資訊填充為執行時資訊。
  • *Handler.cs 是各種處理器,處理各種 UEditor 需要的請求。

Bin 裡面的是應用程式的依賴庫,當前依賴 Newtonsoft 的 Json 庫。Bin 目錄和 App_Code 目錄受應用程式保護,不用擔心被使用者訪問到。

config.json 是 UEditor 後端的配置檔案,上一節已經介紹了比較重要的配置項。

controller.ashx 是 UEditor 請求的入口,它把不同的 action 分發到不同的 Handler 來處理。

net.sln 是專案的解決方案檔案,安裝 Visual Studio 2013 或以上的機器可以開啟進行專案的改造。

README.md 是本說明檔案。

Web.config 是應用程式的配置檔案

4.將index.html中的程式碼複製到Home控制器下的index試圖,修改script連結的src:為其新增字首~/ueditor/

    <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="~/ueditor/lang/zh-cn/zh-cn.js"></script>
編譯執行程式,效果如下,後端配置正常,可以實現所有功能。