一、问题引入

这块以理解为主，在项目开发中一定会遇见这些第三方组件，只要能把这些组件加载到项目中会用就可以了，就能帮你实现一些功能。比如说现在觉得新闻编辑界面有点丑，而第三方提供了这样的编辑器，那直接拿来用就好了。
这一块也别背，什么时候用什么时候直接把代码复制过去就好。

二、CKeditor

怎么样对新闻进行所见即所得（即看到的就是最终的效果）的编辑呢？

1、CKEditor：网页中实现所见即所得的编辑器
2、第三方组件：第三方组织提供的组件
3、使用CKeditor步骤：

下载CKEditor
解压到项目中
在页面中加入CKEditor
使用CKEditor编辑内容
提交CKEditor编辑的内容
具体使用步骤如下：

首先下载CKEditor：

http://ckeditor.com/download

解压并复制CKEditor到项目WebRoot中

在页面中引入CKEditor：

1.<script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>（这句话放在head标签里面）

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

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

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

加入完毕之后的创建新闻页面的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
    <head>
        <link href="<%=request.getContextPath() %>/css/common.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>
    </head>
<body>
<form name ="dataFrm" id="dataFrm" action="doAdd.jsp" method="get"  enctype="multipart/form-data">
    <table  width="100%" border="0" cellspacing="5" cellpadding="0">
        <thead>
            <tr><td align="center" colspan="2" class="text_tabledetail2">增加新闻</td></tr>
        </thead>
        <tbody>
            <tr>
                <td style="text-align:right;" class="text_tabledetail2">分类</td>
                <td style="text-align:left;"> 
                <!-- 列出所有的新闻分类 -->
                    <select name="categoryId">
                        <option value="1">国内</option>
                        <option value="2">国际</option>
                        <option value="3">娱乐</option>
                        <option value="4">军事</option>
                        <option value="5">财经</option>
                        <option value="6">天气</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;" class="text_tabledetail2">标题</td>
                <td style="text-align:left;"><input type="text" name="title" value=""/></td>
            </tr>
            <tr>
                <td style="text-align:right;" class="text_tabledetail2">作者</td>
                <td style="text-align:left;"><input type="text" name="author" value=""/></td>
            </tr>
            
            <tr>
                <td style="text-align:right;" class="text_tabledetail2">摘要</td>
                <td style="text-align:left;"><textarea id="summary" name="summary" rows="8" cols="50"></textarea></td>
            </tr>
            <tr>
                <td style="text-align:right;" class="text_tabledetail2">内容</td>
                <td style="text-align:left;">
                <div id="xToolbar"></div>
                <textarea id="newscontent" name="newscontent" rows="8" cols="30" class="ckeditor"></textarea></td>
            </tr>
            <tr>
                <td style="text-align:right;" class="text_tabledetail2">上传图片 </td>
                <td style="text-align:left;"><input type="file" name="picPath" value=""/></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <button type="submit" class="page-btn" name="save">保存</button>
                    <button type="button" class="page-btn" name="return" onclick="javascript:location.href='newsDetailList.jsp'">返回</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>
</body>
</html>

运行访问之后的浏览器页面如下：

image.png

结果：可以看到是富文本编辑。同时进行测试的时候，在数据库里面的保存格式是这样的：

image.png

一、CKEditor实现富文本编辑

一、CKEditor实现富文本编辑

一、问题引入

二、CKeditor

推荐阅读更多精彩内容