JSP 页面中使用FCKeditor控件(js用法)

袁颖360

袁颖360

2016-02-19 09:47

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是JSP 页面中使用FCKeditor控件(js用法),一起来学习了解下吧!

它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip、fckeditor-java-demo-2.4.1.zip、fckeditor-java-2.4.1-bin.zip里面的一些内容,读者可以自行下载。

1. 解开压缩包FCKeditor_2.6.3.zip,将其中的fckeditor文件夹复制到WEB-INF下面,后面可以直接使用。

2. 在页面中使用FCKeditor有两种方式。

方式一:JavaScript的方式

(1)直接使用,见method1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
方法一:通过JavaScript来实现的实现编辑器导入<br>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1') ;
oFCKeditor.BasePath = "fckeditor/";
//oFCKeditor.BasePath   = "/FCKEditTest/fckeditor/";
oFCKeditor.Width="50%";
oFCKeditor.Height="400";
oFCKeditor.Value="initial value";
//oFCKeditor.ToolbarSet="Basic";
//默认是default
oFCKeditor.ToolbarSet="Default";
oFCKeditor.Create() ;
</script>
<hr>
</body>
</html>

(2)通过Textarea,祥见method2.html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload=function(){
var oFCKeditor = new FCKeditor('MyTextarea') ;
oFCKeditor.BasePath = "fckeditor/"; //这里注意相对路径
//oFCKeditor.BasePath   = "/FCKEditTest/fckeditor/";
oFCKeditor.ReplaceTextarea();
}
</script>
</head>
<body>
方法二:通过Textarea来实现的实现编辑器导入<br>
<textarea rows="4" cols="60" name="MyTextarea">this is a value</textarea>
</body>
</html>

方式二:在标签使用FCKeditor

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

在使用标签之前,需要搭建环境。将fckeditor-java-2.4.1-bin.zip包中的fckeditor-java-core-2.4.1.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.2.jar以及包fckeditor-java-demo-2.4.1.zip中的slf4j-simple-1.5.2.jar复制到lib目录下,并构建环境。

构建完后,就可以在JSP页面中进行使用。祥见页面method_jsp.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_jsp.jsp</title>
</head>
<body>
早些版本必需将fckeditor的Value属性必需指定对应的值,且值不能为空。
而此处版本是2.6.3,该问题已经解决。
<FCK:editor instanceName="myEditor" basePath="/fckeditor"></FCK:editor>
</body>
</html>
展开更多 50%)
分享

猜你喜欢

JSP 页面中使用FCKeditor控件(js用法)

Web开发
JSP 页面中使用FCKeditor控件(js用法)

PHP中使用FCKeditor2.3.2配置

PHP
PHP中使用FCKeditor2.3.2配置

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

在jsp环境中配置使用fckeditor

Web开发
在jsp环境中配置使用fckeditor

在JSP环境中如何配置和使用fckeditor

Web开发
在JSP环境中如何配置和使用fckeditor

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

在JSP中使用JavaMail

Java JAVA基础
在JSP中使用JavaMail

在JSP中使用JavaMail(二)

Java JAVA基础
在JSP中使用JavaMail(二)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

hibernate中的增删改查实现代码

hibernate中的增删改查实现代码

正则表达式中的反向预搜索实现

正则表达式中的反向预搜索实现
下拉加载更多内容 ↓