6.第三方控件

1. 所见即所得的新闻编辑
   1. CKEditor
      • 网页中实现所见即所得的编辑器
   2. 第三方组件
      • 第三方组织提供的组件
   3. 视图CKEditor步骤
      • 下载CKEditor
      • 解压到项目中
      • 再页面中加入CKEditor
      • 使用CKEditor编辑内容
      • 提交CKEditor编辑的内容

 

1. 详细步骤

首先下载CKEditor：

http://ckeditor.com/download

 

解压并复制CKEditor到项目WebRoot中

 

在页面中引入CKEditor：

1.<script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>

2.在“内容”textarea标签中加入class="ckeditor"

 

引入后就可以使用CKEditor编辑新闻的内容了

 

编辑好新闻内容后，就可以提交到doAdd.jsp，把新闻存入数据库中

 

 

 

1. 为新闻添加图片
   1. commons-fiileupload
      • http://commons.apache.org
      • apache公司提供的组件,实现上传功能
   2. 实现步骤
      • 下载commons-fileupload-1.2.2.jar和commons-io-2.4.jar
      • 准备添加新闻的页面,提交至JSP
      • 在JSP中实现文件上传和新闻添加

 

 

1. 详细步骤

第一步下载，commons-fileupload-1.2.2.jar和commons-io-2.4.jar

建议在API中参考使用到的类和接口

 

将jar导入项目中（WEB-INF/lib）

 

修改添加新闻的页面newsDetailCreateSimple.jsp，把表单提交到doAdd.jsp

注意：

1. 表单form标签中，method="post"  enctype="multipart/form-data"
2. 上传图片的标签为：<input type="file" name="picPath" value=""/>

 

在doAdd.jsp中提取表单提交的新闻相关字段，并保存上传的文件，实现新闻的保存功能

注意：

1.需要在doAdd.jsp中导入需要的包

<%@page import="java.io.*,java.util.*,org.apache.commons.fileupload.*"%>

<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>

<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>

请复制素材中的doAdd.jsp

2.在newsDetailList.jsp中点击“增加”打开newsDetailCreateSimple.jsp页面；“新闻标题”链接到newsDetailView.jsp并传递新闻Id参数，用以查看指定Id的新闻详情。

3.修改Dao和Service相关的类，完善“增加新闻信息”方法public boolean add(News news)，增加“picPath”字段。增加“通过新闻id获取新闻”的方法public News getNewsById(int id)