CKEditor的安装与基本使用（JSP）

文章分类:Web前端

一、下载CKEditor

1. 直接下载地址，当前最新版本为3.5：

http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip

2. 或者可直接到官方网站下载：

http://ckeditor.com/download

二、安装CKEditor

解压ckeditor_3.5.zip，得到ckeditor文件夹，将ckeditor整个文件夹复制到项目工程的根目录下，即WebRoot下

三、验证CKEditor是否安装成功

部署运行项目，访问: http://localhost/项目名称/ckeditor/_samples/index.html

则可出现 “CKEditor Samples List” 的Demo页面，说明CKeditor已安装成功

四、应用CKEditor

1. 导入JS文件

2. 创建和使用CKEditor

Java代码

<textarea class="ckeditor" cols="80" id="content" name="content" rows="10">
CKEditor Test......(此处的内容会在编辑器中显示)
</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace('content',{toolbar:'Full', skin : 'kama'});
//]]>
</script>

说明：

1) textarea属性值 name="content": 名字可随意定义，但必须与下面的CKEDITOR.replace('content');匹配

2) CKEDITOR.replace('content');是最基本的写法，表示使用CKEditor的JavaScript API创建的编辑器实例，

替换上面的textarea。

若要为CKEditor增加一些属性设置，则其属性必须写在{}花括号内，

如上{toolbar:'Full', skin : 'kama'}，

具体的属性网上很多文章均可搜索到，这里不累述了。

3) 上面的textarea后面的“CKEDITOR.replace('content');”脚本也可以写在<head></head>标签内

Java代码

<script type="text/javascript">
window.onload = function(){
CKEDITOR.replace('content');
}
</script>

五、获取编辑器里的数据

有时在提交表单时，需要判断下编辑器里的内容是否为空，这时可使用CKEditor的JavaScript API：

CKEDITOR.instances.content.getData()

Java代码

function test() {
var editor_data = CKEDITOR.instances.content.getData();
if(editor_data==null || editor_data==""){
alert("请填写内容！");
return false;
}
}

注意：如果你在编辑器里打了一堆的空格，内容是不为空的，因为编辑器会把你打的空格都转换成 

至此，CKEdiotr编辑器即可在页面上显示与使用。

补充说明：如果你的项目中使用struts2等框架，也可根据上面textarea的属性name="content"来获取编辑器里的内容，最好使用BLOB来存储。

CKEditor的安装与基本使用（JSP）相关推荐

CKEditor的安装与基本使用
http://blog.csdn.net/liananse/article/details/6320617 CKEditor的安装与基本使用(JSP) 文章分类:Web前端一.下载CKEditor ...
（总结）CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL
(总结)CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL PS:这个是懒人yum快速安装法,用于开发和测试环境很方便,用于没有特殊要求的生产环境也可以.特 ...
腾讯云服务器CentOS 7安装Tomcat并部署JSP站点统计进入站点人数
一.进入官网下载tomcat,http://tomcat.apache.org/ 二.使用rz命令上传下载的tomcat压缩包,并在XShell中解压解压压缩包 tar -zxvf apache-t ...
安装eclipse中html/jsp/xml editor插件以及改动html页面的字体
近期在做android项目,用到了jquery mobile 框架以及phonegap,所以就会涉及一些html文件,可是html文件打开的方式是Text Editor ,而且打开之后一些html代码 ...
centos mysql php tomcat_CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL
1.安装Apahce.PHP.MySQL和PHP连接MySQL数据库的包: # yum -y install httpd php mysql mysql-server php-mysql 2.安装Ap ...
java 工具箱安装方法,Java工具包的安装配置和使用-JSP教程,Java技巧及代码
1.下载j2sdk 1.4.1或更高版本 (http://java.sun.com,建议同时下载其java documentation,这是java帮助文档) 2.运行刚刚下载的j2sdk-1_4_1 ...
Eclipse中安装配置Tomcat和创建JSP项目
这里写自定义目录标题安装配置Tomcat 创建JSP项目安装配置Tomcat 下载并解压Tomcat到指定目录 Eclipse菜单栏中找到Window–>Preperences->Se ...
JavaWeb(十)——jetty服务器、创建jsp项目、servlet生命周期及url的匹配规则
文章目录 1. jetty服务器的下载与安装 1.1 jetty简介 1.2 jetty的下载与安装 2. idea创建jsp项目 3. idea给jsp项目导入jar包 4. 编写第一个servle ...
linux php jsp网页,Linux上架设支持JSP+PHP的Web服务器
近年来Linux在服务器市场占有比例日渐攀升,除了缘于Linux的免费和安全性之外,还因为Linux上的应用服务日益丰富.大部分常见的服务都在Linux上有了较好的解决方案.而对于Intenet上应用 ...

CKEditor的安装与基本使用（JSP）

文章分类:Web前端

CKEditor的安装与基本使用（JSP）相关推荐

最新文章

热门文章