富文本编辑器Ueditor实战(四)-video集成

简介: 文章介绍了如何在springboot环境中集成ueditor,以及如何修改配置支持在富文本编辑器中直接预览视频资源。

   本文接上文富文本编辑器Ueditor实战(三)-springboot集成,上文留了一个小问题,ueditor中上传video存在一个问题,标签会被自动替换的问题。那么如何应对在富文本编辑器中上传视频呢?本文将回答这个问题。

   以下是未调整前的界面:

image.png切换至源码模式,你看到的代码如下:

image.png

我们期望的是在富文本编辑器中可以正常预览上传的视频,以上的代码再一次加载的时候,video会被替换掉以至于看不到真实的效果(video标签替换成img)。我们需要修改ueditor.all.js或者ueditor.all.min.js。


第一步,将7343、7344、7345这三行注释掉。

image.png

第二步、将17683行中最后一个字符串image改成video

image.png

第三步、将17769中image字符改成vedio

image.png

ueditor.all.min.js的修改方法也是一样的,重启后将看到视频上传的效果,如下:

image.png

通过以上的修改可完成视频资源的加载。到此ueditor的实战教程到此告一段落,希望对你有所帮助。

ueditor集成完整代码地址:https://gitee.com/yelangcode/boot-ueditor


目录
相关文章
|
2月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
79 0
|
1月前
|
监控 关系型数据库 MySQL
zabbix agent集成percona监控MySQL的插件实战案例
这篇文章是关于如何使用Percona监控插件集成Zabbix agent来监控MySQL的实战案例。
31 2
zabbix agent集成percona监控MySQL的插件实战案例
|
2月前
|
前端开发 关系型数据库 测试技术
django集成pytest进行自动化单元测试实战
在Django项目中集成Pytest进行单元测试可以提高测试的灵活性和效率,相比于Django自带的测试框架,Pytest提供了更为丰富和强大的测试功能。本文通过一个实际项目ishareblog介绍django集成pytest进行自动化单元测试实战。
30 3
django集成pytest进行自动化单元测试实战
|
2月前
|
JSON 数据管理 关系型数据库
【Dataphin V3.9】颠覆你的数据管理体验!API数据源接入与集成优化,如何让企业轻松驾驭海量异构数据,实现数据价值最大化?全面解析、实战案例、专业指导,带你解锁数据整合新技能!
【8月更文挑战第15天】随着大数据技术的发展,企业对数据处理的需求不断增长。Dataphin V3.9 版本提供更灵活的数据源接入和高效 API 集成能力,支持 MySQL、Oracle、Hive 等多种数据源,增强 RESTful 和 SOAP API 支持,简化外部数据服务集成。例如,可轻松从 RESTful API 获取销售数据并存储分析。此外,Dataphin V3.9 还提供数据同步工具和丰富的数据治理功能,确保数据质量和一致性,助力企业最大化数据价值。
115 1
|
2月前
|
jenkins Java 持续交付
【一键搞定!】Jenkins 自动发布 Java 代码的神奇之旅 —— 从零到英雄的持续集成/部署实战秘籍!
【8月更文挑战第9天】随着软件开发自动化的发展,持续集成(CI)与持续部署(CD)已成为现代流程的核心。Jenkins 作为一款灵活且功能丰富的开源 CI/CD 工具,在业界应用广泛。以一家电商公司的 Java 后端服务为例,通过搭建 Jenkins 自动化发布流程,包括创建 Jenkins 项目、配置 Git 仓库、设置构建触发器以及编写构建脚本等步骤,可以实现代码的快速可靠部署。
61 2
|
2月前
|
C# Windows 开发者
当WPF遇见OpenGL:一场关于如何在Windows Presentation Foundation中融入高性能跨平台图形处理技术的精彩碰撞——详解集成步骤与实战代码示例
【8月更文挑战第31天】本文详细介绍了如何在Windows Presentation Foundation (WPF) 中集成OpenGL,以实现高性能的跨平台图形处理。通过具体示例代码,展示了使用SharpGL库在WPF应用中创建并渲染OpenGL图形的过程,包括开发环境搭建、OpenGL渲染窗口创建及控件集成等关键步骤,帮助开发者更好地理解和应用OpenGL技术。
96 0
|
3月前
|
JSON 数据挖掘 API
天猫店铺商品数据接口集成指南与实战技巧
**天猫商品API概览** - **接口**: Tmall.item_search_shop, 获取店铺商品详情。 - **功能**: 开发者可获取商品标题、价格、销量等。 - **流程**: 注册天猫开放平台账户→获App Key/Secret→获取Access Token→构建URL调用API→解析JSON响应。 - **参数**: 包含店铺ID、页码、数量等。 - **返回**: JSON格式的商品列表。 - **应用**: 商品管理、电商应用开发、数据分析。此API助力商家高效管理、提升用户体验。
|
3月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
4月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
47 5
|
4月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解
下一篇
无影云桌面