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