百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

时间:2024-04-02 08:32:21

1.下载ueditor,地址:http://ueditor.baidu.com/website/download.html

2.我下载的是jsp版本的

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

3.下载解压后,把整个文件夹下面的东西全部放到一个目录下,我放在了ueditor文件夹下。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

4.之后会报错,因为没有相应的jar包。打开jsp文件夹,会有一个lib文件夹,把整个lib文件夹复制到WEB-INF下,然后builepath一***意,应该放到WEB-INF下,否则可能会出错。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

5.下面我们来测试一下,在jsp中加入相应的js文件,ueditor自带的。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

6.成功

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

7.更改ueditor.config.js文件

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

8.配置config.json,主要是配置图片上传保存路径,下面我会教大家如何把图片保存到磁盘中。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

9.显然,仅仅这样是不行的,图片只能保存到服务器中,所以下面我们要修改jar包,配置ueditor保存图片路径,将图片保存到项目之外的磁盘当中。

10.下载ueditor的源码,地址https://github.com/fex-team/ueditor。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

11.下载好之后解压

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

12.打开开发工具,粘贴到src下,

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

13.

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

14.编写配置文件

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

15.编写读取配置文件的工具类。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘


16

import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Properties;


/**
 * 用于读取配置文件
 * @author LingDu
 */
public class ConfigUtil {
    private static Properties pro;


    static{
        pro=new Properties();
        //默认从类的所在包目录开始查找资源文件
        //如果要classpath的根目录开始找,必须加上/
        /*InputStream input=PropertiesUtil.class.
                getResourceAsStream("/config.properties");*/
        //默认从classspath的根目录开始查找资源文件
        InputStream input=ConfigUtil.class
                .getClassLoader()
                .getResourceAsStream("application.properties");




        try {
            pro.load(new InputStreamReader(input,
                    "UTF-8"));
        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            if(input!=null){
                try {
                    input.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    public static String get(String key){
        return pro.getProperty(key);
    }


    public static int getInt(String key){
        return Integer.parseInt(pro.getProperty(key));
    }


}

17.

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

18.

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

19.好了,现在我们的源码就改写好了,下面配置服务器的虚拟路径。

20.打开tomcat所在目录

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

21

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

22.好了,下面我们来试一下

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

23.需要注意的是,如果开发时候用的是eclipse的话,你修改tomcat的虚拟路径可能会没有用,因为当你把项目放在eclipse中运行的时候,eclipse还有一份server.xml文件,会将tomcat中的server.xml文件给改回来,这时候我们需要修改的就是eclipse的server.xml文件。以我的STS为例:

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

24.现在基本上就可以使用了,但在使用的时候也许会遇到一些问题,比如ueditor文本编辑器的字数限制以及隐藏元素路径,我们可以在配置文件editor.config.js里把这两个的注释打开,不要忘了还有逗号,把10000修改为你想要的值,数据库中text类型,用utf-8字符集的话能存21000个字左右,大于这个数据库就会报错了,当然也可以选用更大的类型,比如mediumtext,可以存500万字左右,(以utf-8计算)

wordCount:true, //是否开启字数统计

maximumWords:10000, //允许的最大字符数 

25.隐藏元素路径,打开ueditor.config.js。

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

26.后面要说的是,在我们把图片存到服务器后,要怎么删除上传的图片呢?假如前后端分离的话,我们存在数据库中的资源地址就是

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

百度Ueditor富文本编辑器基础使用配置以及怎样保存图片到磁盘

27.我们在删除内容的时候这样写,现在博主只能想到这个办法了。

import java.io.File;
import java.util.regex.Matcher;
import java.util.regex.Pattern;


import com.qjzx.qjzxadmin.utils.ConfigUtil;




public class DeleteContent {


protected void deleteContent(String content) {
//图片路径表达式
String regex ="src=\"(.*?)\"";
Pattern pa = Pattern.compile(regex,Pattern.DOTALL);
Matcher ma = pa.matcher(content);
String savePath = ConfigUtil.get("savepath");
while(ma.find()) {
String temp = ma.group();
//去掉src和双引号,获取图片路径
temp = temp.replaceAll("src=","" );
temp = temp.replace("\"", "");
File uFile = new File(savePath+File.separator+temp);
if(uFile.isFile()&&uFile.exists()) {
uFile.delete();
}
}
}


}

28.参考文献

https://blog.csdn.net/gfd54gd5f46/article/details/69348716?locationNum=7&fps=1

http://blog.sina.com.cn/s/blog_13c6397540102wzkj.html

29.最大的受益人是博主自己,感谢那些热爱分享的人。