CKEditor的安装与基本使用（JSP）
文章分类:Web前端
一、下载CKEditor
1. 直接下载地址。当前最新版本号为3.5：
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip
2. 或者可直接到官方站点下载：
二、安装CKEditor
解压ckeditor_3.5.zip，得到ckeditor目录，将ckeditor整个目录拷贝到项目project的根目录下，即WebRoot下
三、验证CKEditor是否成功安装
部署执行项目，訪问: http://localhost/项目名称/ckeditor/_samples/index.html
则可出现 “CKEditor Samples List” 的Demo页面，说明CKeditor已成功安装
四、应用CKEditor
1. 导入JS文件
<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
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
1. 直接下载地址。当前最新版本号为3.5：
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip
2. 或者可直接到官方站点下载：
二、安装CKEditor
解压ckeditor_3.5.zip，得到ckeditor目录，将ckeditor整个目录拷贝到项目project的根目录下，即WebRoot下
三、验证CKEditor是否成功安装
部署执行项目，訪问: http://localhost/项目名称/ckeditor/_samples/index.html
则可出现 “CKEditor Samples List” 的Demo页面，说明CKeditor已成功安装
四、应用CKEditor
1. 导入JS文件
<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
2. 创建和使用CKEditor
- <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>标签内
- <script type="text/javascript">
- window.onload = function(){
- CKEDITOR.replace('content');
- }
- </script>
五、获取编辑器里的数据
有时在提交表单时，须要推断下编辑器里的内容是否为空。这时可使用CKEditor的JavaScript API：
CKEDITOR.instances.content.getData()
- 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）的更多相关文章
- （总结）CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL
(总结)CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL PS:这个是懒人yum快速安装法,用于开发和测试环境很方便,用于没有特殊要求的生产环境也可以.特 ...
- ckeditor实现WORD粘贴图片自动上传,jsp应用
官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...
- [Java Web] 6、Tomcat服务器的安装及配置以及JSP技术笔记
目录 1.Web容器简介 2.Tomcat粗介及配置粗讲 3.Tomcat服务器配置 3-1.修改端口号 3-2.配置虚拟目录 3-3.配置首页 4.JSP执行流程 5.JSP粗略了解 1 ...
- 在线安装eclipse中html/jsp/xml editor插件（很可靠）
之前有一篇文章也是安装eclipse中的web开发插件 ,可是经过非常多人使用,那种方法.不是全部人使用都能够. 接下来,找到一种很管用的方法.就是在线安装. 废话不多说,这样的方法绝对能够成功安装. ...
- 在线安装eclipse中html/jsp/xml editor插件 eclipseeditor
1.打开eclipse中的help————>Install New Software 2.点击Add按钮,然后弹出一个框,第一个文本框可以随便写,第二个一定要写: http://download ...
- 安装eclipse中html/jsp/xml editor插件以及改动html页面的字体
近期在做android项目,用到了jquery mobile 框架以及phonegap,所以就会涉及一些html文件,可是html文件打开的方式是Text Editor ,而且打开之后一些html代码 ...
- 2020JavaWeb之宝塔安装tomcat+nginx关于jsp处理问题
关于nginx反向代理,是将jsp文件转交给tomcat处理,nginx主要处理静态资源,nginx处理静态资源的效率相对于tomcat高的多 在配置文件如下部分: location ~ \.jsp$ ...
- drupal中安装CKEditor文本编辑器，并配置图片上传功能 之 方法二
drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...
- Windows操作系统下tomcat安装版图文教程
下载tomcat安装文件,官方下载地址是:http://tomcat.apache.org/,本文以tomcat-7.0.26版本为例进行安装过程的说明: 1.双击apache-tomcat-7.0. ...
随机推荐
- 礼物（BFS）
礼物 时间限制: 1 Sec 内存限制: 64 MB提交: 39 解决: 4[提交][状态][讨论版] 题目描述 给出一个n行m列的点阵,“．”表示可通行格子,“#”表示不可通行格子,“K”表示国 ...
- POJ 3728 The merchant（并查集+DFS）
[题目链接] http://poj.org/problem?id=3728 [题目大意] 给出一棵树,每个点上都可以交易货物,现在给出某货物在不同点的价格, 问从u到v的路程中,只允许做一次买入和一次 ...
- 【二分答案】【最大流】bzoj1305 [CQOI2009]dance跳舞
http://hzwer.com/1986.html #include<cstdio> #include<algorithm> #include<queue> #i ...
- 【矩阵哈希】【哈希表】bzoj2351 [BeiJing2011]Matrix
引用题解:http://blog.csdn.net/popoqqq/article/details/41084047 #include<cstdio> #include<cstrin ...
- @RequestParam注解的使用
自SpringMVC4.2之后,RequestParam内部有4个参数: 1.String name; 2.String value; 3.boolean required; 4.String def ...
- 微服务之SpringCloud实战（三）：SpringCloud Eureka高可用
高可用Eureka 高可用我就不再过多解释了,Eureka Server的设计一开始就考虑了高可用的问题,在Eureka的服务治理设计中,所有的节点即是服务提供方也是消费方,注册中心也不例外,上一章中 ...
- iOS数据库的基本使用
今天总结下数据库的基本使用方法: iOS使用的数据库一般就是sqlite3,在使用该数据库前一定要先导入数据库框架,否则会出错,接下来引入头文件#import<sqlite3.h> 在工程 ...
- 让你的saga更具有可伸缩性（Scaling NServiceBus Sagas）
https://lostechies.com/jimmybogard/2013/03/26/scaling-nservicebus-sagas/ 当我们使用NServiceBus sagas (pro ...
- Oracle的取整和四舍五入函数——floor,round,ceil,trunc使用说明
Oracle的取整和四舍五入函数——floor,round,ceil,trunc使用说明 FLOOR——对给定的数字取整数位SQL> select floor(2345.67) from dua ...
- Google开源C++单元测试框架Google Test
1.玩转Google开源C++单元测试框架Google Test系列(gtest)之一 - 初识gtest 2.玩转Google开源C++单元测试框架Google Test系列(gtest)之二 - ...