Java web--CKEditor编辑器的使用

桃扇骨 2023-02-13 05:47 47阅读 0赞

CKEditor是新一代的FCKditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

**目录**

一、CKEditor的下载

二、CKEditor的创建

三、CKEditor的配置

四、CKEditor调用实例

--------------------

### 一、CKEditor的下载 ###

在CKEditor的官网http://www.ckeditor.com下载CKEditor压缩包，解压之后就可以使用。

我在博客中上传了CKEditor4的资源，如果你不想费事的话可以下载 [https://download.csdn.net/download/qq\_43238335/12466599][https_download.csdn.net_download_qq_43238335_12466599]

### 二、CKEditor的创建 ###

将CKEditor工具嵌入网页有很多方法，在此使用的是通过js和jsp完成的。

1.将解压后的ckeditor目录复制到Web工程的WebRoot（myeclipse）或WebContent（eclipse）下。

2.在WebRoot或WebContent下，创建调用页面。

①.导入ckeditor.js文件，<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

②.创建textarea元素，将其class属性设置为ckeditor

3.创建一个显示页面，获取textarea中的信息

### 三、CKEditor的配置 ###

CKEditor编辑器可以自由配置，如编辑器的语言、工具集、背景颜色等，CKEditor的配置都集中在ckeditor/config.js文件中。具体的配置属性在官网都可以查阅，没有特殊要求的话是无需配置的。

### 四、CKEditor调用实例 ###

通过两个jsp文件完成调用和显示。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>编辑公告</title>
    </head>
    <body>
    	<center>
    		<form method="post" action="a04a_2.jsp">
    			编辑公告内容
    			<textarea class="ckeditor" rows="40" cols="80" name="board"></textarea>
    			<input type="submit" value="显示公告内容" />
    		</form>
    	</center>
    </body>
    </html>
    
    
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>公告显示</title>
    </head>
    <body>
    <%request.setCharacterEncoding("UTF-8"); %>
    ${param.board}
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjM4MzM1_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjM4MzM1_size_16_color_FFFFFF_t_70 1][]

[https_download.csdn.net_download_qq_43238335_12466599]: https://download.csdn.net/download/qq_43238335/12466599
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjM4MzM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527180216821.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjM4MzM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjM4MzM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200527180219460.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjM4MzM1,size_16,color_FFFFFF,t_70