CKEditor的安装与基本使用(JSP)
来源:互联网 发布:php开发工程师是什么 编辑:程序博客网 时间:2024/05/16 01:33
文章分类: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文件
<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
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文件
<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)
- CKEditor的安装与基本使用(JSP)
- CKEditor的安装与基本使用(JSP)
- CKEditor的安装与基本使用(JSP)
- CKEditor的安装与基本使用(JSP)
- CKEditor的安装与基本使用
- CKeditor的安装和基本使用
- CKEditor(在线富文本编辑器)的安装与使用
- JSP中使用CKEditor的简单例子
- CKEDITOR的使用与配置
- CKeditor的配置与使用
- ckeditor的使用与配置
- JSP使用ckeditor
- jsp使用CKEditor
- CKEditor 3.0的简单安装配置使用
- CKeditor在线编译器的配置与使用
- 基于DNN的CKeditor配置与使用
- CKEditor的下载、配置与使用
- Golang、Php、Python、Java基于Thrift0.9.1实现跨语言调用
- 获取通讯录联系人,选择后返回
- 安装cdh 版的impala
- 架构:Android的MVVM
- SeekBar的基本使用
- CKEditor的安装与基本使用(JSP)
- Java学习经验
- Flume+Kafka+Strom基于伪分布式环境的结合使用
- 为你的MacOS App添加开机自启动(Swift)
- 2016hdu多校赛第5场(hdu5784)
- 第二章
- Mysql支持的数据类型(总结)
- Logstash 2.2.0 的最佳实践
- 二叉树遍历