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. ...
随机推荐
- 完全背包【p1832】A+B Problem（再升级）
Description 给定一个正整数n,求将其分解成若干个素数之和的方案总数. Input 一行:一个正整数n Output 一行:一个整数表示方案总数 素数之和 ? 背包啊. 没一遍切的题都不是水 ...
- POJ2349 Arctic Network(Prim)
Arctic Network Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 16968 Accepted: 5412 D ...
- ( 转 ) 优秀REST风格 API的设计原则
设计优秀的REST风格API非常困难!API是服务提供方和使用方之间的契约,打破该契约将会给服务端开发人员招来非常大的麻烦,这些麻烦来自于使用API的开发人员,因为对API的改动会导致他们的移动app ...
- [BZOJ1095]捉迷藏
点了动态点分治的科技树,这道题是树形态不变的动态点分治,形态变化的话...待会补 考虑点分治过程中的这样一种结构:按递归层次把当前层的重心与上层重心互相连接,这就是点分治树,容易看出它的树高只有$O( ...
- [POI2018]Plan metra
题目大意: 一棵$n(n\le5\times10^5)$个结点的树,每条边的边权均为正整数,告诉你$2\sim n-1$号结点到$1$号点和$n$号点的距离$d1[i]$和$d2[i]$.求是否存在这 ...
- Problem G: 零起点学算法27——等级分制度
#include<stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)!=EOF) +a* ...
- 杂谈PID控制算法——第一篇：三个量
电赛训练了大半个暑假,人渐渐开始进入到了疲倦期.既然这样那就好好休息下自己也好吧. 休息也不能光休息,乘机把平常写过的一些东西好好整理也好. 从第一次训练开始我们就接触到了一个新的名词——PID控制理 ...
- springmvc-框架学习
https://www.androiddev.net/springmvc-框架学习一-helloworld/
- CMD_命令行
一.bat执行一闪而过 最后一个end下一行,加PAUSE 二.cmd命令:不是内部或外部命令,也不是可运行的程序或批处理文件 解决: 需将路径先切换到system32下 cd c:\WINDO ...
- java.sql.SQLException: Io 异常: Got minus one from a read call
博客分类: Oracle Tomcat服务器下的应用连接Oracle时报错,出现以下异常: java.sql.SQLException: Io 异常: Got minus one from a r ...