java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显

本文部分参考一下项目:https://blog.csdn.net/yuancenyi/article/details/53327414,感谢作者!


1、项目需求:

        使用百度富文本编辑器实现“重要节假日高速出行指南内容”编辑,功能涉及图片、视频上传。

2、存在问题

        百度富文本编辑器默认将图片、视频上传至项目里,如果使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显不方便,这时可以配置图片保存位置,将图片保存到项目外的地方。

3、解决方法:

        (1)将图片、视频等上传至非工程目录下,好处是:不用担心项目重启,图片会清空的问题,不好的地方是,需要tomcat配置虚拟路径,可参考:https://blog.csdn.net/qian5211991/article/details/80764635

        (2)将图片、视频等上传至FTP服务区

            解决步骤:

                    1、正常引入相关js


                    2、实例化编辑器并自定义图片保存路径(可参考:http://fex.baidu.com/ueditor/#qa-customurl)

java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第1张图片

    其中,标红的是重写上传的后台方法,后面会有说明。

3、上传图片配置项

    修改config.json文件中,图片、视频上传相关内容,如下:

java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第2张图片

注意标红处内容。

        4、后台保存上传图片、视频,如下:

        与2步骤中,图片请求地址相同。

java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第3张图片

    注意箭头指示地方,这是图片能回显的关键,因为图片回显的src使用的就是URL配置的地址!

    至此图片上传进FTP服务器(FTP相关工具包,如需要,请留言,谢谢)

5、修改ueditor中的js文件ueditor.all.js中代码,是图片回显。

java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第4张图片

    在3步骤中,配置图片访问路径前缀为空,则页面回显图片的时候,图片src显示为:


    图片默认请求后台的captchaImage方法,如下:

java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第5张图片

           至此,图片回显完成!


            6、清理ueditor中上传的无用的图片

                    请参考:https://blog.csdn.net/qian5211991/article/details/80764852

            另:FTP上传需要配置的地方

            1、属性文件配置

                java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第6张图片

            2、spring配置文件

        java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显_第7张图片



你可能感兴趣的:(百度富文本(ueditor))