首页 > 其他分享 >百度ueditor富文本--配置图片上传

百度ueditor富文本--配置图片上传

时间:2023-08-08 11:36:22浏览次数:41  
标签:ueditor -- 路径 jar 编辑器 上传 图片





我们在之前的文章中已经学习了如何 初始化百度ueditor富文本编辑器:

百度ueditor富文本--PC端单个,PC端多个,mobile单个,mobile多个


官网对编辑器的初始化和使用文档是比较详细的,这里就不多说了。


本小节 主要记录一下 在初始化完编辑器之后  配置启用 编辑器中的 图片上传插件。


项目路径如图:

百度ueditor富文本--配置图片上传_文本编辑




引用jar包


在ueditor的资源包中我们看到jsp文件夹里有lib文件夹和jar包。

我们需要引用这些jar包才能正常使用 图片上传功能。

我们这里把这些jar包 5个jar 放到 WEB-INF 目录下的lib 中。

右键Build Path ---》Add to Build Path 引用它们。

百度ueditor富文本--配置图片上传_百度_02



注意: 如果是maven项目,需要注意pom.xml文件中有没有重复和冲突。

百度ueditor富文本--配置图片上传_百度_03


如果有冲突 可以去掉pom中的引用 或者  Build Path 中 Configure Build Path 中把重复的jar包引用 remove。


引用包后 运行项目 正常初始化 编辑器后 发现已经图片上传功能可用了。如图:


百度ueditor富文本--配置图片上传_百度_04


百度ueditor富文本--配置图片上传_上传_05







原理


打开ueditor.config.js,可以看到服务器统一接口路径。

百度ueditor富文本--配置图片上传_百度_06




controller.jsp 作为服务端代码接收上传的文件 存入 本机或者服务器。---当然,读者也可以不使用ueditor自带的这种接收方式,自己实现一个。


我们这里增加一行代码

System.out.print(rootPath);



输出controller.jsp 接收到图片后存放的路径。


百度ueditor富文本--配置图片上传_上传_07


运行后初始化编辑器时输出了路径为:

F:\eclipseworkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springshiro

百度ueditor富文本--配置图片上传_文本编辑_08



则我们上传的图片 就保存在这个路径。


上传图片完成后 我们在这个路径下 可以看到已经上传的图片:

F:\eclipseworkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springshiro\ueditor\jsp\upload\image\20170824

百度ueditor富文本--配置图片上传_图片_09






这个路径 是 可以设置的。

设置的地方在 ueditor文件夹中 config.json里,如图:

百度ueditor富文本--配置图片上传_ueditor_10



imagePathFormat 就是设置的图片保存地址,这是一个相对路径,相对与项目在tomcat中的路径。

但是 这样保存会有一些问题,图片保存在tomcat的webapp项目中时,当重启tomcat后,这些图片就会丢失。

我们会在下一章节 讲解 路径的配置以及上传到远程服务器。



imageUrlPrefix配置的是 图片访问路径的前缀。 

有时候 我们上传图片成功了,但是 回调时显示不出来,就是因为 图片的地址不对。 比如 图片 是放在 项目中的,则访问图片 是需要带 项目名作为前缀的。


我的项目 设置 /  访问 项目,所以设置 "imageUrlPrefix": ""。



标签:ueditor,--,路径,jar,编辑器,上传,图片
From: https://blog.51cto.com/u_16218512/7006202

相关文章

  • 银河麒麟等 Linux系统 安装 .net 5,net 6及更高版本的方法
    最近项目上用到银河麒麟的操作系统,需要搭建.net跨平台方案。一开始使用各种命令都安装不上,很多提示命令找不到,或者下载包时候网络无法下载。网上教程很多,但没有一个是成功的,多数使用apt-get等命令,都报错,提示命令未找到。于是开始手动安装。最终发现还是在Windows官网给出......
  • 4.深度学习(1) --神经网络编程入门
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......
  • HS-GCN Hamming Spatial Graph Convolutional Networks for Recommendation
    目录概符号说明HS-GCNInitialLayerPropagationLayerHashCodeEncoding矩阵表示PredictionLayerOptimization代码LiuH.,WeiY.,YinJ.andNieL.HS-GCN:Hammingspatialgraphconvolutionalnetworksforrecommendation.IEEETKDE.概二值化的nodeembedding.符......
  • hadoop组件---数据仓库(二)---hive的数据模型和数据类型
    我们在上一章中已经大概了解了Hive有四种数据模型,本章就来详细了解它们的使用。Hadoop组件—数据仓库(一)—Hive简介数据模型Hive没有专门的数据存储格式,也没有为数据建立索引,用户可以非常自由的组织Hive中的表,只需要在创建表的时候告诉Hive数据中的列分隔符和行分隔符,Hive......
  • 人人贷(中js逆向学会模块改写(define/require/exports/module)
    链接https://renrendai.com/login?returnUrl=%2F这里逆向登入中的password加密 我们需要定位到password加密到位置,通过下面的搜索j_password,或者通过栈调用方式查找 可以看到加密的是这种模式define("common:node_modules/glpb-components-common/src/rsa/rsaCrypt",f......
  • kettle案例六数据表关联--排序记录-记录集连接-过滤记录
    如果我们清洗的数据是多个维度的,那么很有可能对数据进行关联得到一张最终表进行分析。比如回答集合的数据里有如下字段idoptionIduser包含了谁回答了哪个问题,选项是什么。选项集合的数据里有如下字段idquestionoption我们最终希望得到的数据集合是idquestionop......
  • Siemens 西门子PLC的TCP通讯(不同项目下)②--TRCV_C指令
    上期主要了解了TSEND_C指令的各项参数的意义,隐藏参数LEN等可以默认本期将了解另一个配套组合指令块TRCV_C,这是个接收指令块,大概呢跟发送指令TSEND_C差不多1.0从右边指令栏--通信--开放式用户通讯--其他,选择TRCV_C拖动到程序1中,如下图 2.0下面说下具体这个指令块的参数设置......
  • Pentaho Report Design发布报表到Pentaho Server
    我们在前面两章分别学习了windows安装PentahoReportDesignPentahoReportDesign设计柱状图windows安装PentahoServer本章来学习PentahoReportDesign发布报表到PentahoServer。PentahoReportDesign准备报表使用PentahoReportDesign设计好报表之后需要呈现给其他人看时,......
  • MySQL
    一、优化定位分析索引聚簇索引优化二、其他面试题事务主从同步分库分表......
  • 火山引擎DataLeap数据质量动态探查及相关前端实现
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群需求背景火山引擎DataLeap数据探查上线之前,数据验证都是通过写SQL方式进行查询的,从编写SQL,到解析运行出结果,不仅时间长,还会反复消耗计算资源,探查上线后,只需要一次探查,就可以得到整张表的......