CKEditor的安装与基本使用（JSP）
文章分类:Web前端
1、下载CKEditorjavascript
1. 直接下载地址。当前最新版本号为3.5：html
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip前端
2. 或者可直接到官方站点下载：java
http://ckeditor.com/downloadweb
2、安装CKEditor框架
解压ckeditor_3.5.zip，获得ckeditor目录，将ckeditor整个目录拷贝到项目project的根目录下，即WebRoot下编辑器
3、验证CKEditor是否成功安装ide
部署执行项目，訪问: http://localhost/项目名称/ckeditor/_samples/index.htmlspa
则可出现 “CKEditor Samples List” 的Demo页面，说明CKeditor已成功安装orm
4、应用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>
5、获取编辑器里的数据
有时在提交表单时，需要推断下编辑器里的内容是否为空。这时可以使用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来存储。
1、下载CKEditorjavascript
1. 直接下载地址。当前最新版本号为3.5：html
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip前端
2. 或者可直接到官方站点下载：java
http://ckeditor.com/downloadweb
2、安装CKEditor框架
解压ckeditor_3.5.zip，获得ckeditor目录，将ckeditor整个目录拷贝到项目project的根目录下，即WebRoot下编辑器
3、验证CKEditor是否成功安装ide
部署执行项目，訪问: http://localhost/项目名称/ckeditor/_samples/index.htmlspa
则可出现 “CKEditor Samples List” 的Demo页面，说明CKeditor已成功安装orm
4、应用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>
5、获取编辑器里的数据
有时在提交表单时，需要推断下编辑器里的内容是否为空。这时可以使用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来存储。
- 1. jupyter的安装与基本使用
- 2. Eclipse SVN的安装与基本使用
- 3. Bower的安装与基本使用
- 4. MongoDB的安装与基本使用
- 5. 05-sqlyog的安装与基本使用
- 6. browsersync的安装与基本使用
- 7. gradle的安装与基本使用
- 8. burp suite的安装与基本使用
- 9. jsp基本使用
- 10. JSP——MySQL的基本使用
- 更多相关文章...
- • Redis基本安装和使用 - Redis教程
- • Wireshark下载安装和使用教程 - TCP/IP教程
- • Composer 安装与使用
- • Kotlin学习（二）基本类型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jupyter的安装与基本使用
- 2. Eclipse SVN的安装与基本使用
- 3. Bower的安装与基本使用
- 4. MongoDB的安装与基本使用
- 5. 05-sqlyog的安装与基本使用
- 6. browsersync的安装与基本使用
- 7. gradle的安装与基本使用
- 8. burp suite的安装与基本使用
- 9. jsp基本使用
- 10. JSP——MySQL的基本使用