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. ...
随机推荐
- Unity防破解 —— 重新编译mono
Unity4.x版本导出android包时,只能选择mono,无法使用il2cpp,这就造成了我们的程序集很容易被修改--很多朋友在发布项目时觉得即使代码暴露出去也没什么关系,只有项目火了才有 ...
- Codeforces #445 Div2 D
#445 Div2 D 题意 给出一些字符串,要求构造一个最短的且字典序最小的字符串,使得给出的字符串都为目标字符串的子串,且这些字符串作为子串出现的次数都是最多的,如果不存在目标字符串输出 &quo ...
- 51nod 最长公共子序列问题（动态规划）(LCS)(递归)
最长公共子序列问题 输入 第1行:字符串A 第2行:字符串B (A,B的长度 <= 1000) 输出 输出最长的子序列,如果有多个,随意输出1个. 输入示例 abcicba abdkscab 输 ...
- BSGS与二次剩余
BSGS $Big\ Step\ Giant\ Step$,大步小步法,一种在$O(\sqrt{p})$内求解方程$a^x\equiv b (mod\ p)$的算法. 先考虑$p$为质数的情况. 令$ ...
- python3开发进阶-Django框架中的ORM的常用操作的补充（F查询和Q查询，事务）
阅读目录 F查询和Q查询 事务 一.F查询和Q查询 1.F查询 查询前的准备 class Product(models.Model): name = models.CharField(max_leng ...
- Problem X: 零起点学算法22——华氏摄氏温度转换
#include<stdio.h> int main() { float f,c; while(scanf("%f",&f)!=EOF) c=*(f-); pr ...
- Java高级架构师（一）第28节：Index、商品详细页和购物车
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- O2S.Components.PDFRender4NET.dll 图片空白BUG问题
在用网上的2.0.1.0破解版的时候,会出现莫名的错误,大多数pdf转成图片都是Ok的,但是有部分转出来是空白,因为我这里要涉及大量的pdf转图片,不允许出现错误. 后来经过实验发现是这个版本存在bu ...
- 【spring mvc】spring mvc POST方式接收单个字符串参数，不加注解，接收到的值为null，加上@RequestBody,接收到{"uid":"品牌分类大”}，加上@RequestParam报错 ---- GET方式接收单个参数的方法
spring mvc POST方式 接收单个参数,不加任何注解,参数名对应,接收到的值为null spring mvc POST方式 接收单个参数,加上@RequestBody,接收到参数格式:{&q ...
- Queue 队列的用法
队列是一种特殊的线性表,它只允许在表的前端进行删除操作,而在表的后端进行插入操作. LinkedList类实现了Queue接口,因此我们可以把LinkedList当成Queue来用. 以下实例演示了队 ...