在JSP中使用JS方式引用ckeditor
2010-05-31 23:01
405 查看
最近在自己做的项目中需要用到在线编辑器,在网上搜了下,发现了ckeditor,当然网上有好几种在线编辑器,不知道为什么选择了ckeditor,本来打算用Fckeditor的,但是看到网上还需要导入好几个JAR包,还要进行一堆配置,有点麻烦,本来项目中也就用一下,还要那么麻烦地去配置。
于是去ckeditor网站下载了最新版本的ckeditor,ckeditor是fckeditor的下一代版本,于是顺带把fckeditor和ckeditor都下载下来测试下哪个更好用。经过比较还是ckeditor的门槛比较低,两行代码就搞定了,但是配置了fckeditor却没有起作用,于是就选择了ckeditor,也许大家还是用fckeditor的比较多。不过既然ckeditor门槛低那就自然选择ckeditor了。
不多废话了,下面就来说下ckeditor的使用吧!
要使用ckeditor,当然首先就是去http://ckeditor.com/ (ckeditor网站)下载ckeditor的压缩包,现在最新的是ckeditor_3.3.zip
下载后将压缩包解压,将解压后文件夹中的ckeditor文件夹copy到自己的web项目的WebRoot目录下。
打开ckeditor目录,可以看到文件夹结构如下
ckeditor
---_samples
---_source
---adapters
---images
---lang
---plugins
---skins
---themes
....
---ckeditor.js
---config.js
...
从每个文件夹和每个文件的名字我们就可以很容易看出它们的作用,_samples文件夹下放的自然就是供我们学习如何使用的样例程序了。
拿到一个我们以前没用过的东西,首先要看的当然就是它给的例子了,这可以让我们对这个程序有个整体的了解并快速掌握简单的使用方法。
想要在JSP页面中引用ckeditor是非常简单的一件事,前面我们只要已经将解压的ckeditor文件夹copy到WebRoot目录下了,只需要在jsp文件的代码中要加入ckeditor的位置加上如下代码,(比如我们要在一个form中使用ckeditor)。
下面在index.jsp(笔者建的一个测试页面)中引用ckeditor并测试
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
<form name="testForm" method="post" action="<%=path %>/index.jsp">
<textarea cols="80" id="editor1" name="editor1" rows="10">
在此添加内容
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
skin : 'kama',
language : 'zh-cn'
});
</script>
<input type="submit" value="提交"/>
</form>
</body>
</html>
比较关键的代码在代码中已用红色和蓝色标出,要能在页面中使用就要先将ckeditor目录下的ckeditor.js加入页面
form表单的写法还如我们未使用ckeditor时一样,只需要在页面中加入一段javascript代码,上面已经用蓝色
标出.
CKEDITOR.replace('要用ckeditor取代的textarea的name属性值或id属性值',{要设置的ckeditor属性:属性值,......});
上面的蓝色代码显示我将editor的皮肤风格设置为kama,在ckeditor的skins文件夹下默认还有office2003和vi两种皮肤风格
将ckeditor的语言设置为zh-cn(简体中文).当然你也可以根据个人需要设置更多的属性。这里不过多介绍,大家可以通过样例中
和压缩包中提供的文档进行学习
要想提取我们在编辑器中编辑的内容并在页面上显示也和我们提取表单数据一样
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
这段代码显示了如何提取编辑器中内容。这里我将表单提交到页面本身。
通过上面的介绍,大家应该可以看出使用ckeditor的方便快捷。大家不需要任何的改变就可以在项目中引用在线编辑器了。
当然要想根据自己的需求进行定制就需要进行一些更深入的学习,不过也并不难。
我们可以在项目中新建一个ckconfig.js文件专门用来定制自己的ckeditor,下面贴出一个本人自己的配置
你可以根据自己的需要定制,下面贴出一个含有完整工具栏的配置文件 ,供大家参考定制自己的工具栏
只要在页面中将你的配置文件和ckeditor.js同时引入页面,就可以显示你自己定义的ckeditor了。
大家现在应该对ckeditor有一个简单的了解了,希望对需要的朋友会有所帮助。
于是去ckeditor网站下载了最新版本的ckeditor,ckeditor是fckeditor的下一代版本,于是顺带把fckeditor和ckeditor都下载下来测试下哪个更好用。经过比较还是ckeditor的门槛比较低,两行代码就搞定了,但是配置了fckeditor却没有起作用,于是就选择了ckeditor,也许大家还是用fckeditor的比较多。不过既然ckeditor门槛低那就自然选择ckeditor了。
不多废话了,下面就来说下ckeditor的使用吧!
要使用ckeditor,当然首先就是去http://ckeditor.com/ (ckeditor网站)下载ckeditor的压缩包,现在最新的是ckeditor_3.3.zip
下载后将压缩包解压,将解压后文件夹中的ckeditor文件夹copy到自己的web项目的WebRoot目录下。
打开ckeditor目录,可以看到文件夹结构如下
ckeditor
---_samples
---_source
---adapters
---images
---lang
---plugins
---skins
---themes
....
---ckeditor.js
---config.js
...
从每个文件夹和每个文件的名字我们就可以很容易看出它们的作用,_samples文件夹下放的自然就是供我们学习如何使用的样例程序了。
拿到一个我们以前没用过的东西,首先要看的当然就是它给的例子了,这可以让我们对这个程序有个整体的了解并快速掌握简单的使用方法。
想要在JSP页面中引用ckeditor是非常简单的一件事,前面我们只要已经将解压的ckeditor文件夹copy到WebRoot目录下了,只需要在jsp文件的代码中要加入ckeditor的位置加上如下代码,(比如我们要在一个form中使用ckeditor)。
下面在index.jsp(笔者建的一个测试页面)中引用ckeditor并测试
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
<form name="testForm" method="post" action="<%=path %>/index.jsp">
<textarea cols="80" id="editor1" name="editor1" rows="10">
在此添加内容
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
skin : 'kama',
language : 'zh-cn'
});
</script>
<input type="submit" value="提交"/>
</form>
</body>
</html>
比较关键的代码在代码中已用红色和蓝色标出,要能在页面中使用就要先将ckeditor目录下的ckeditor.js加入页面
form表单的写法还如我们未使用ckeditor时一样,只需要在页面中加入一段javascript代码,上面已经用蓝色
标出.
CKEDITOR.replace('要用ckeditor取代的textarea的name属性值或id属性值',{要设置的ckeditor属性:属性值,......});
上面的蓝色代码显示我将editor的皮肤风格设置为kama,在ckeditor的skins文件夹下默认还有office2003和vi两种皮肤风格
将ckeditor的语言设置为zh-cn(简体中文).当然你也可以根据个人需要设置更多的属性。这里不过多介绍,大家可以通过样例中
和压缩包中提供的文档进行学习
要想提取我们在编辑器中编辑的内容并在页面上显示也和我们提取表单数据一样
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
这段代码显示了如何提取编辑器中内容。这里我将表单提交到页面本身。
通过上面的介绍,大家应该可以看出使用ckeditor的方便快捷。大家不需要任何的改变就可以在项目中引用在线编辑器了。
当然要想根据自己的需求进行定制就需要进行一些更深入的学习,不过也并不难。
我们可以在项目中新建一个ckconfig.js文件专门用来定制自己的ckeditor,下面贴出一个本人自己的配置
/* Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'zh-cn'; //配置语言 config.uiColor = '#BFEFFF'; //背景颜色 config.width = 700; //宽度 config.height = 300; //高度 config.skin='kama'; //工具栏 config.toolbar = [ ['Source','Bold','Italic'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Smiley'], ['Styles','Font','FontSize'], ['TextColor'], ['Undo','Redo'] ]; };
你可以根据自己的需要定制,下面贴出一个含有完整工具栏的配置文件 ,供大家参考定制自己的工具栏
/* Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; config.width = 900; config.height = 300; config.skin = 'kama'; // 背景颜色 config.uiColor = '#BFEFFF'; config.toolbar_Full = [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'] ]; };
只要在页面中将你的配置文件和ckeditor.js同时引入页面,就可以显示你自己定义的ckeditor了。
大家现在应该对ckeditor有一个简单的了解了,希望对需要的朋友会有所帮助。
相关文章推荐
- datagrid使用本地加载的方式将js得到的json传递到jsp
- js定时的几种方式及插件变量公用(直接使用jsp中js变量)
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- jquery.form.js插件错误的引用方式
- js字符串引用的两种方式(必看)
- 数据采集-关于密码使用js脚本进行rsa方式加密的解决方法
- js中使用jsp声明变量方法 + js访问servlet及相互传值方法
- 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png
- jsp页面的js 以及 单独的js文件中 使用EL表达式
- button和submit的区别及使用js实现页面跳转的方式
- 利用JS使用POST方式提交请求的方法
- 在cocos2d-js-v3.0 中使用cocostudio UI的正确方式
- Asp.net MVC4 使用了Bundle,引用的JS文件不能出现智能感知的解决之道
- const成员或者引用成员必须使用构造函数初始化列表的方式
- 打包公用的jsp,css,js到jar,其他war包引入后使用
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- jsp引用外部js时的错误
- require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式