C#使用百度Ueditor富文字方塊實現上傳檔案

2022-07-05 10:01:33

使用背景

專案中需要用的富文字方塊去上傳視訊，圖片的話大部分都是可以的。相對來說，國外的富文字方塊很成熟。但鑑於檔案是英語，這裡使用了百度的富文字方塊。

採用的api的方式，呼叫介面進行上傳檔案。話不多說，開擼！

準備

建立一個.net mvc的專案。下載百度富文字方塊.net 版本的js檔案。

建立專案

建立好專案之後，首先參照一下富文字方塊的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>