`
sony-soft
  • 浏览: 1022576 次
文章分类
社区版块
存档分类
最新评论

Fckeditor使用宝典

 
阅读更多

Fckeditor的使用（一）：Fckeditor安装与例子

url:http://liss.javaeye.com/blog/578761

文章分类:Web前端

1.安装

把FCKeditor_2.6.3.zip解压后的内容拷到WebRoot下。

2.使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
oFCKeditor.Create();
</script>
<script type="text/javascript">
window.onload = function() {
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>


<body>
This is my JSP page. <br>
<textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
</body>
</html>

修改

三种方法：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

<script type="text/javascript">
//第一种方法
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
oFCKeditor.Width = "70%";
oFCKeditor.Height = "150";
oFCKeditor.Value = "default"
oFCKeditor.Create();
</script>

<script type="text/javascript">

window.onload = function() {
//第二种方法
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
//第三种方法
var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
fck.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
div.innerHTML = fck.CreateHtml();
}
</script>

<body>
<br/>Method 2<br/>
<textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
<br/>Method 3 <br>
<div id="myFCKeditor">
</div>
</body>
</html>

Fckeditor的使用（二）：Fckeditor对象的属性

文章分类:Web前端

Fckeditor对象的属性
属性名 默认值 描述
Width 宽度 100%
Height 高度 200
Value 编辑器初始化的内容 （空字符串）
ToolBarSet 工具条集合的名称（内置有Default和Basic,也可以自己定制） Default
BasePath 编辑器的基路径 /fckeditor/

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
oFCKeditor.Width = "400";
oFCKeditor.Height = "50%";
oFCKeditor.Value = "default"
oFCKeditor.Create();
</script>
<script type="text/javascript">
window.onload = function() {
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>


<body>
This is my JSP page. <br>
<textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
</body>
</html>

Fckeditor的使用（三）：Fckeditor对象的构造器

文章分类:Web前端

构造器

var FCKeditor = function( instanceName, width, height, toolbarSet, value )
{
// Properties
this.InstanceName = instanceName ;
this.Width = width || '100%' ;
this.Height = height || '200' ;
this.ToolbarSet = toolbarSet || 'Default' ;
this.Value = value || '' ;
this.BasePath = FCKeditor.BasePath ;
this.CheckBrowser = true ;
this.DisplayErrors = true ;

this.Config = new Object() ;

// Events
this.OnError = null ; // function( source, errorNumber, errorDescription )
}

instanceName: 编辑器输出的textarea元素的name属性的值，必需指定。

参数会赋值给同保属性

Fckeditor的使用（四）：用JSP自定义标签输出Fckeditor

文章分类:Web前端

添加jar包：

fckeditor-java-2.4.1/fckeditor-java-core-2.4.1.jar

fckeditor-java-2.4.1/lib/commons-fileupload-1.2.1.jar

fckeditor-java-2.4.1/lib/commons-io-1.3.2.jar

fckeditor-java-2.4.1/lib/slf4j-api-1.5.2.jar

sfckeditor-java-demo-2.4.1.war/WEB-INF/lib/slf4j-simple-1.5.2.jar

注：fckeditor-java-2.4.1/lib/slf4j-api-1.5.2.jar这个包只是个接口类，必需有实现类。我用的是sfckeditor-java-demo-2.4.1.war下WEB-INF/lib/slf4j-simple-1.5.2.jar

例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

<script type="text/javascript">
//第一种方法
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
oFCKeditor.Width = "70%";
oFCKeditor.Height = "150";
oFCKeditor.Value = "default"
oFCKeditor.Create();
</script>

<script type="text/javascript">

window.onload = function() {
//第二种方法
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
//第三种方法
var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
fck.BasePath = "<%=request.getContextPath()%>/fckeditor/" ;
div.innerHTML = fck.CreateHtml();
}
</script>

<body>
t<br/>Method 2<br/>
<textarea rows="4" cols="60" name="MyTextarea" style="display:none">default</textarea>
<br/>Method 3 <br>
<div id="myFCKeditor"> </div>
<br/>Method 4 用JSP自定义标签输出Fckeditor<br>
<FCK:editor instanceName="myDditor" basePath="/fckeditor" value="default"/>
</body>
</html>

Fckeditor的使用（五）：配置语言

文章分类:Web前端

１.创建myconfig.js

内容：

FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = "en" ;

注：语言设为英文，默认是中文的。

２.配置myconfig.js

方法一 ：修改WebRoot/fckeditor/fckconfig.js中的FCKConfig.CustomConfigurationsPath = '' ;为FCKConfig.CustomConfigurationsPath = '项目名/myconfig.js' ;

方 法二 ：

<script type="text/javascript">
//第一种方法
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
oFCKeditor.Width = "70%";
oFCKeditor.Height = "150";
oFCKeditor.Value = "default"

//此处设置配置
oFCKeditor.Config["CustomConfigurationsPath"] = "<%=request.getContextPath()%>/myconfig.js" ;
oFCKeditor.Create();
</script>

Fckeditor的使用（六）：常用配置

文章分类:Web前端

１.Toolbar的配置

在fckconfig.js中添加

FCKConfig.ToolbarSets["style"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
]
自定义的工具集。

使用：

<script type="text/javascript">
//第一种方法
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "<%=request.getContextPath()%>/fckeditor/";
oFCKeditor.Width = "70%";
oFCKeditor.Height = "150";
oFCKeditor.Value = "default"
oFCKeditor.Config["CustomConfigurationsPath"] = "<%=request.getContextPath()%>/myconfig.js" ;
oFCKeditor.ToolbarSet = "style";
oFCKeditor.Create();
</script

２.添加常用字体

在fckconfig.js中的

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

修改为

FCKConfig.FontNames = '宋体;楷体_GB2312;黑体;隶书;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

３.修改Enter和shift + Enter的换行行为

在fckconfig.js中的

FCKConfig.EnterMode = 'p' ; // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

改为：

FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br

此时效果：Enter换行，Shift +　Enter新段落

fckeditor-java-2.5给上传图片添加水印文章分类:Web前端

net.fckeditor.connector.Dispatcher类的

方法UploadResponse doPost(final HttpServletRequest request) {
logger.debug("Entering Dispatcher#doPost");

添加加水印的操作便可

if ("image".equals(type.getName().toLowerCase())) {
String tempName = fileName;
if (newName != null) {
tempName = newName;
}
String targetPath = PropertiesUtils.getCmsProperty("path");
ImageUtils.pressImage(targetPath
+ PropertiesUtils.getCmsProperty("waterMarker"),
targetPath
+ PropertiesUtils
.getCmsProperty("upload_file_path")
+ tempName, Integer
.parseInt(PropertiesUtils
.getCmsProperty("warterMarkerX")),
Integer.parseInt(PropertiesUtils
.getCmsProperty("warterMarkerY")));
}

分享到：
| 驱动注册的顺序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics