fckeditor的使用具体步骤1

fckeditor在使用之前需要准备如下包：

fckeditor-java-2.4.2-bin.zip FCKeditor_2.6.3.rar fckeditor-java-demo-2.4.2.war fckeditor-java-demo-2.4.2.war

包已经准备好了之后，就开始把fckeditor整合到项目中去：

第一步

1，FCKeditor_2.6.3.rar解压后，将fckeditor这个文件夹复制到工程的WebRoot下面，当然可以不直接复制到WebRoot下面，可以复制到WebRoot下自己建立的文件夹下面，但是在后面需要指定basePath路径，后面会讲到；

2，复制了文件进去之后，可能会出现一个错误，找到那个报错的页面的错误的地方，将

<optionvalue='<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">'>HTML4.01 Transitional</option>

中的<!DOCTYPE..前面的”<”改成”<”

3，将所需要的5个jar包导入大lib目录下面：

commons-fileupload-1.2.1.jar commons-io-1.3.2.jar java-core-2.4.2.jar java-core-2.4.2.jar slf4j-simple-1.5.2.jar

第二步

1，新建一个jsp页面，在页面中实例化fckEditor对象：

实例化fckEditor对象由三种方法：

第一种：用javascript方式：

先导入fckeditor文件下下面的fckeditor.js文件(值得注意的是在导入这个文件的时候，不能<script… />而是要<script ….></script>)：

然后实例化一个oFCKeditor对象：

<scripttype="text/javascript">

//实例化一个

var oFCKeditor = new FCKeditor( 'FCKeditor1' );

//这里设置基本路径，fckeditor文件夹所在的位置，一定要记得以“/”开头，并且以“/”结尾

//或者是以用动态的路径，如下

oFCKeditor.BasePath ="${pageContext.request.contextPath}/fckeditor/" ;

oFCKeditor.Height =300 ;

oFCKeditor.Width = 800 ;

oFCKeditor.Value = '' ;

oFCKeditor.Create() ;//创建

</script>

第二种：使用textArea的方式

<%@ pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>textArea方式创建fck</title>

<scripttype="text/javascript"src="${pageContext.request.contextPath }/fckeditor/fckeditor.js">

</script>

window.onload = function(){

var oFCKeditor = new FCKeditor('demo2' ) ;//这里的名字要和下面的textArea名字一样

//设置基本路径，注意路径的最后要以"/"结束，要以“/”开头，假如我的工程名字是HWT的话，那么BasePath应该设置为/HWT/fckeditor/

//我这里是动态路径

oFCKeditor.BasePath ="${pageContext.request.contextPath}/fckeditor/" ;

oFCKeditor.Height =300 ;

oFCKeditor.Width =800 ;

oFCKeditor.ReplaceTextarea() ; //替换html的textArea元素

}

</script>

</head>

<body>

<textareaname="demo2"style="width:100%; height: 200px">初始值</textarea>

</body>

</html>

第三种：使用fck提供的jsp自定义标签

先要将fck的标签库导入到页面：（不要忘了导入）

<%@ taglib prefix="FCK" uri="http://java.fckeditor.net"%>

然后使用标签库来实例化一个fck对象：

<%-- 在标签里面，basePath指定不需要加工程名，默认是在当前工程下

但是还是以”/“开头表示当前工程下，以”/“结尾

--%>

<FCK:editor

instanceName="demo3"

basePath="/fckeditor/"

width="800"

height="300"

value="初始值"/>

第三步

1，对于在真实项目中，一般需要使用表单，而不是直接使用fck :

<body>

<formaction="content.jsp"method="post">

<FCK:editor

instanceName="demo4"

basePath="/fckeditor/"

width="800"

height="300"

value="初始值"/>

<inputtype="submit"value="提交"/>

</form>

</body>

在content.jsp中可以这样来接收fck里面的内容：

request.setCharacterEncoding("utf-8");

//这样也可以

//String content =request.getParameter("demo4");

//out.print(content);

${param.demo4}

2，对于fckeditor中，还要修改一下配置选项才能使用到真实的项目中，因为有些地方在实际的业务需求中不能满足，所以一般修改的地方有：

（1）自定义Toolbar，去掉一下功能

（2）加上几种常用的字体

（3）修改”回车” 和”shift+回车”的换行行为

（4）新增或替换表情图片

对于怎么修改配置呢？

·可以自己写个myconfig.js的配置文件

·在页面进行配置

·在fckeditor的配置文件中直接修改（fckeditor.js）--- 不推荐

如果只是在页面修改了的话，那么就只是对当前页面有效，如果直接修改了fckeditor.js自己的配置文件的话，那么所有编辑器都改了，下面以自己写一个myconfig.js文件为例：

首先，在WebRoot/fckeditor/下面新建一个myconfig.js文件，然后打开fckeditor自己的fckconfig.js文件，去找里面需要修改的选项，找到之后然后粘贴到myconfig.js文件中，再到myconfig.js里面修改，修改的配置选项会覆盖fckconfig.js里面的选项，没有修改的选项就用fckconfig.js里面选项

然后可以在页面指定这配置文件，或者在fckconfig.js中指定配置文件（对所有有效）

·对用javascript创建的fck实例指定配置文件：

<scripttype="text/javascript">

//实例化一个

varoFCKeditor = new FCKeditor( 'demo1' );

//这里设置基本路径，fckeditor文件夹所在的位置，一定要记得以“/”开头，并且以“/”结尾

//或者是以用动态的路径，如下

oFCKeditor.BasePath ="${pageContext.request.contextPath}/fckeditor/";

//指定配置文件

oFCKeditor.Config["CustomConfigurationsPath"] ='${pageContext.request.contextPath}/fckeditor/myconfig.js';

oFCKeditor.ToolbarSet = "myToolbar";//配置文件中自定义的toolbar

oFCKeditor.Height = 300 ;

oFCKeditor.Width = 800 ;

oFCKeditor.Value ='' ;

oFCKeditor.Create() ;//创建

</script>

·对于用fck的标签创建的实例指定配置文件：

<FCK:editor

instanceName="demo3"

basePath="/fckeditor/"

width="800"

height="300"

toolbarSet="myToolbar"

value="初始值">

<!—指定配置文件的位置，被包含在<FCK:editor>标签里面 -->

<FCK:configCustomConfigurationsPath="${pageContext.request.contextPath}/fckeditor/myconfig.js"/>

</FCK:editor>

·在fckconfig.js中指定

修改FCKConfig.CustomConfigurationsPath：

FCKConfig.CustomConfigurationsPath =FCKConfig.EditorPath+'myconfig.js';

注意：FCKConfig.EditorPath的路径是指： http://127.0.0.1:8081/工程名/fckeditor/

FCKConfig.BasePath的路径是指：http://127.0.0.1:8081/工程名/fckeditor/editor/

在fckconfig.js的配置文件中basepath值的不是基本路径basepath（在实例化的时候的路径）

----------------------------------------------------------------------------------------

（1）自定义toolbar

在fckconfig.js 中找到相应的配置选项：FCKConfig.ToolbarSets["Default"]=…

然后将其复制到自己写的myconfig.js的配置文件中，打开一个编辑器，对应着上的功能，一个个的删掉自己不需要的功能（’-’ 表示分隔符；’/’ 表示换行）：

FCKConfig.ToolbarSets["myToolbar"] = [

['Save','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteWord'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

'/',

['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

'/',

['Style','FontFormat','FontName','FontSize']

] ;

定义好了之后，还没完，切记要在相应的页面设置ToolbarSet = ‘myToolbar’;

（2）加上几种常用的字体

在fckconfig.js中找到FCKConfig.FontNames ，然后粘贴至myconfig.js中

如：

FCKConfig.FontNames = 'Arial;Times NewRoman;Verdana;黑体;宋体;隶书;楷体_GB2312';

在保存的时候会保存，因为myconfig.js的编码是iso-8859-1，将其改成utf-8然后关掉，再打开js文件，粘贴上面的FCKConfig.FontNames = … ，保存。

（3）修改”回车”和”shift+回车”的换行

在fckconfig.js中找到FCKConfig.EnterMode= 'p' ;FCKConfig.ShiftEnterMode ='br' ;

粘贴到myconfig.js中，改成

FCKConfig.EnterMode = 'br' ;FCKConfig.ShiftEnterMode='p' ;

（4）新增或替换表情图片

先将自己要新增的表情图片拷贝至fckeditor/editor/images/smiley/,然后

在fckconfig.js中找到

//表情图片的路径

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;

//需要显示的图片名字

FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;

//显示多少列

FCKConfig.SmileyColumns = 8 ;

//宽度

FCKConfig.SmileyWindowWidth = 320 ;

//高度

FCKConfig.SmileyWindowHeight = 210 ;

粘贴至myconfig.js中，修改自己图片的路径，显示窗口的宽度很高度以及显示哪些图片

但是这样做了之后，选图片的窗口还是没有变小，而且没有根据大小出现滚动条，下面我们还需要修改一个地方：

首先点击打开选择图片的窗口，然后在窗口中（图片区域）点击鼠标右键—>属性—>在属性的地址项找到相应的路径—>然后找到那个页面（fckeditor/editor/dialog/fck_smiley.html）：

找到fck_smiley.html页面后，修改两处：

1，window.onload= function ()

{

// First of all, translate the dialog boxtexts

oEditor.FCKLanguageManager.TranslatePage(document);

dialog.SetAutoSize( false) ;//修改成false,默认是true

}

2, <body style="overflow:auto"> //修改为auto,默认为hidden

秒客网

fckeditor的使用具体步骤1

第二步

第三步

相关文章