SSH：利用Struts2+Hibernate4+Spring4+SQLServer框架，搭建一个前后端web网站（2）

百度编辑器编辑文章

利用百度编辑器实现文章的编写，实现效果如下：

可以看到利用百度编辑可以很好的实现文字的排版效果，同时还可以多图上传以及添加锚点和上传视屏。

配置的一些关键点：

• 当从官方文档中下载了相关的js和源代码添加到myeclipse中的时候是会出现红叉叉的，但是不影响使用。可以通过右键文件夹 –> Myeclipse –> Enclude From Validation/Run Validation 消除

• 上传图片的时候需要修改ueditor中 –> jsp –> config.json可以看到有图片配置说明，需要修改的是 “imageUrlPrefix”（11行） 设置成该web-project的目录下，我的web名字为City,同时可以

修改图片上传的大小，图片的格式

• 除此之外，还需要自己

配置拦截器(用于图片的上传)

1
2
3
4
5
6
7
8
9
10
11
1<!-- 定义使用了自己的过滤器  目的是编辑器的上传图片 -->

2    <filter>

3        <filter-name>struts2</filter-name>

4        <filter-class>com.Filter.Filter</filter-class>

5    </filter>

6

7    <filter-mapping>

8        <filter-name>struts2</filter-name>

9        <url-pattern>/*</url-pattern>

10    </filter-mapping>

11

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1// 编写自己的过滤方法 

2public class Filter extends StrutsPrepareAndExecuteFilter {

3

4     public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {    

5            HttpServletRequest request = (HttpServletRequest) req;

6          //  HttpServletResponse response = (HttpServletResponse) res;

7

8            request.setCharacterEncoding("utf-8");

9

10

11            String url = request.getRequestURI();  

12             // 这是项目的路径 项目名字到百度编辑器control.jsp页面路径  

13            if ("/City/ueditor/jsp/controller.jsp".equals(url)) {     

14                chain.doFilter(req, res);    

15            }

16            else if(url.equals("/City/null")){

17

18            }

19            else{    

20                super.doFilter(req, res, chain);    

21            }    

22        } 

23}

24

• 还有一个上传视屏的问题会出现：当上传视屏后，如果百度编辑器失去了焦点，当焦点再次回到编辑器的时候，上传的视屏的边框会消失，修改如下：ueditor.config.js的403行附近，替换img

1
2
1* img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass','style', 'class', '_url', 'anchorname'] 

2

        这是百度编辑器的的一个的一个bug

• 百度编辑器上传图片慢的问题：

找到 ueditor/dialogs/image/images.js 将

1
2
3
4
5
1accept: {

2  title: 'Images',

3  extensions: 'jpg,jpeg,png',

4  mimeTypes: 'image/*'}

5

        修改为

1
2
3
4
5
6
1accept: {

2  title: 'Images',

3  extensions: 'jpg,jpeg,png',

4  mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif'   

5}

6

源码或者运行文件及数据库

SSH：利用Struts2+Hibernate4+Spring4+SQLServer框架，搭建一个前后端web网站（1）

SSH：利用Struts2+Hibernate4+Spring4+SQLServer框架，搭建一个前后端web网站（3）

SSH：利用Struts2+Hibernate4+Spring4+SQLServer框架，搭建一个前后端web网站（4）

SSH：利用Struts2+Hibernate4+Spring4+SQLServer框架，搭建一个前后端web网站（5）