文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

C#怎么使用Ueditor富文本框实现上传文件

2023-07-02 14:58

关注

本篇内容介绍了“C#怎么使用Ueditor富文本框实现上传文件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

使用背景

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

采用的api的方式,调用接口进行上传文件。话不多说,开撸!

C#怎么使用Ueditor富文本框实现上传文件

准备

创建一个.net mvc的项目。下载百度富文本框.net 版本的js文件。

创建项目

创建好项目之后,首先引用一下富文本框的js。目录如下:

C#怎么使用Ueditor富文本框实现上传文件

然后新增一个单页。这里使用的 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" > </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 。

C#怎么使用Ueditor富文本框实现上传文件

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

C#怎么使用Ueditor富文本框实现上传文件

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

C#怎么使用Ueditor富文本框实现上传文件

使用

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

C#怎么使用Ueditor富文本框实现上传文件

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

C#怎么使用Ueditor富文本框实现上传文件

“C#怎么使用Ueditor富文本框实现上传文件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯