C#使用百度Ueditor富文本框實現(xiàn)上傳文件

更新時間：2022年07月05日 07:55:28 作者：CoolDog;

這篇文章主要為大家詳細介紹了C#如何使用百度Ueditor富文本框實現(xiàn)上傳文件（圖片，視頻等），文中的示例代碼講解詳細，感興趣的可以了解一下

使用背景

項目中需要用的富文本框去上傳視頻，圖片的話大部分都是可以的。相對來說，國外的富文本框很成熟。但鑒于文檔是英語，這里使用了百度的富文本框。

采用的api的方式，調用接口進行上傳文件。話不多說，開擼！

準備

創(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>