iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >C#使用百度Ueditor富文本框实现上传文件
  • 888
分享到

C#使用百度Ueditor富文本框实现上传文件

2024-04-02 19:04:59 888人浏览 安东尼
摘要

目录使用背景准备创建项目配置项目使用使用背景 项目中需要用的富文本框去上传视频,图片的话大部分都是可以的。相对来说,国外的富文本框很成熟。但鉴于文档是英语,这里使用了百度的富文本框。

使用背景

项目中需要用的富文本框去上传视频,图片的话大部分都是可以的。相对来说,国外的富文本框很成熟。但鉴于文档是英语,这里使用了百度的富文本框。

采用的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>

配置项目

最后我们改一下富文本框的一些配置,点击 根目录下 Scripts 文件夹下的 Ueditor-net 文件夹 下的 ueditor.config 和 Ueditor-net 文件夹下 net 文件夹下的 config.json 。

ueditor.config.js 中 toolbars 是显示菜单的配置,按需使用即可。这个文件中关键的配置是serverUrl。这里采用的是读取本地发布的ip进行拼接的地址。

config.JSON 中 显示的是各个功能的配置。代码如下:

使用

配置结束后,我们打开vs 进行测试。可以看到上传图片 和上传视频 是没有 域名的。怎么办呢?

很简单,我们只需要找到image.js文件夹 找到ueditor.all.js文件夹,按照图中所示操作一下即可。

以上就是C#使用百度Ueditor富文本框实现上传文件的详细内容,更多关于C#富文本框上传文件的资料请关注编程网其它相关文章

--结束END--

本文标题: C#使用百度Ueditor富文本框实现上传文件

本文链接: https://www.lsjlt.com/news/153441.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作