C#使用百度Ueditor富文本框?qū)崿F(xiàn)上傳文件
使用背景
項目中需要用的富文本框去上傳視頻,圖片的話大部分都是可以的。相對來說,國外的富文本框很成熟。但鑒于文檔是英語,這里使用了百度的富文本框。
采用的api的方式,調(diào)用接口進行上傳文件。話不多說,開擼!
準備
創(chuàng)建一個.net mvc的項目。下載百度富文本框.net 版本的js文件。
創(chuàng)建項目
創(chuàng)建好項目之后,首先引用一下富文本框的js。目錄如下:
然后新增一個單頁。這里使用的 home 控制器 下的index頁面。代碼如下 :
@{ ViewBag.Title = "Home Page"; } <link href="~/Scripts/Ueditor-net/themes/default/css/ueditor.css" rel="external nofollow" rel="stylesheet" /> <script src="~/Scripts/jquery-3.4.1.js"></script> <!-- 配置文件 --> <script src="~/Scripts/Ueditor-net/ueditor.config.js"></script> <!-- 編輯器源碼文件 --> <script src="~/Scripts/Ueditor-net/ueditor.all.js"></script> <div> <p>開始編輯</p> <textarea name="myEditor" id="myEditor" style="width:600px;height:500px"> </textarea> </div> <!-- 實例化編輯器 --> <script type="text/javascript"> $(function () { var editor = new baidu.editor.ui.Editor(); editor.render('myEditor'); }); </script>
配置項目
最后我們改一下富文本框的一些配置,點擊 根目錄下 Scripts 文件夾下的 Ueditor-net 文件夾 下的 ueditor.config 和 Ueditor-net 文件夾下 net 文件夾下的 config.json 。
ueditor.config.js 中 toolbars 是顯示菜單的配置,按需使用即可。這個文件中關(guān)鍵的配置是serverUrl。這里采用的是讀取本地發(fā)布的ip進行拼接的地址。
config.json 中 顯示的是各個功能的配置。代碼如下:
使用
配置結(jié)束后,我們打開vs 進行測試??梢钥吹缴蟼鲌D片 和上傳視頻 是沒有 域名的。怎么辦呢?
很簡單,我們只需要找到image.js文件夾 找到ueditor.all.js文件夾,按照圖中所示操作一下即可。
以上就是C#使用百度Ueditor富文本框?qū)崿F(xiàn)上傳文件的詳細內(nèi)容,更多關(guān)于C#富文本框上傳文件的資料請關(guān)注腳本之家其它相關(guān)文章
相關(guān)文章
C#如何Task執(zhí)行任務(wù),等待任務(wù)完成
這篇文章主要介紹了C#如何Task執(zhí)行任務(wù),等待任務(wù)完成,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06C#動態(tài)對象(dynamic)詳解(實現(xiàn)方法和屬性的動態(tài))
下面小編就為大家?guī)硪黄狢#動態(tài)對象(dynamic)詳解(實現(xiàn)方法和屬性的動態(tài))。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02C#使用zxing/zbar/thoughtworkQRcode解析二維碼的示例代碼
zxing是谷歌開源的二維碼庫,zbar,thoughtworkQRcode也是開源的,三者之間比較各有優(yōu)劣,本文將通過一個案例demo源碼,帶來認識學(xué)習(xí)下這三者的實際解碼效果,感興趣的可以了解一下2023-07-07c#創(chuàng)建vc可調(diào)用的com組件方法分享
本文詳細闡述如何用C#創(chuàng)建一個COM組件,并能用VC6.0等調(diào)用,大家參考使用2013-12-12C#操作Access數(shù)據(jù)庫的實現(xiàn)過程(vs2019)
這篇文章主要介紹了C#操作Access數(shù)據(jù)庫的實現(xiàn)過程(vs2019),打開Office Access新建一個空白數(shù)據(jù)庫DATA.accdb,并改好存放位置,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02