FCKeditor在线文本编辑器控件

最新推荐文章于 2023-12-16 00:00:00 发布

lxt2lili

最新推荐文章于 2023-12-16 00:00:00 发布

阅读量1.2k

点赞数

分类专栏： Java第三方插件文章标签： fckeditor 文本编辑 servlet html image flash

Java第三方插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一部署

首先要下载2个文件

FCKeditor2.3 (FCKeditot for java)
FCKeditor2.4 (FCKeditor基本文件)有最新版2.5版不过是测试版的建议不要用我们又不是帮他测试bug的
以下是下载地址：
http://www.fckeditor.net/download

FCKeditor2.3 为java的支持文件，FCKeditor2.4是控件的整体文件，前者使后者能够在j2ee环境下运行

首先把FCKeditor2.4 (FCKeditor基本文件)解压缩然后copy到工程的WebRoot目录下

如图：（FCKeditor文件夹就是FCKeditor2.4 (FCKeditor基本文件)解压缩然后得到的虽然文件夹报错但是对使用没有影响）

然后解压FCKeditor2.3 (FCKeditot for java)把FCKeditor-2.3/web/WEB-INF/lib里的commons-fileupload.jar，和FCKeditor-2.3.jar考到我们工程的lib文件夹下这时有可能弹出提示不要管它直接确认。

最后也就是最关键的要在我们工程的web.xml和FCKeditor-2.3/web/WEB-INF/web.xml进行结合

首先从FCKeditor-2.3/web/WEB-INF/web.xml中把2个<servlet>和2个<servlet-mapping> COPY到我们工程的web.xml中内容如下

<servlet>
  <servlet-name>Connector</servlet-name>
  <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
  <init-param>
   <param-name>baseDir</param-name>
   <param-value>/UserFiles/</param-value>
  </init-param>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
</servlet>

<servlet>
  <servlet-name>SimpleUploader</servlet-name>
  <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
  <init-param>
   <param-name>baseDir</param-name>
   <param-value>/UserFiles/</param-value>
  </init-param>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
  <init-param>
   <param-name>enabled</param-name>
   <param-value>false</param-value>
  </init-param>
  <init-param>
   <param-name>AllowedExtensionsFile</param-name>
   <param-value></param-value>
  </init-param>
  <init-param>
   <param-name>DeniedExtensionsFile</param-name>
   <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
  </init-param>
  <init-param>
   <param-name>AllowedExtensionsImage</param-name>
   <param-value>jpg|gif|jpeg|png|bmp</param-value>
  </init-param>
  <init-param>
   <param-name>DeniedExtensionsImage</param-name>
   <param-value></param-value>
  </init-param>
  <init-param>
   <param-name>AllowedExtensionsFlash</param-name>
   <param-value>swf|fla</param-value>
  </init-param>
  <init-param>
   <param-name>DeniedExtensionsFlash</param-name>
   <param-value></param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

把上段代码copy到我们的web.xml中然后进行修改（当然要根据我们的实际情况修改环境不同麻呵呵）

先来改<servlet-mapping>

原文上面有把它改成

<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/FCKeditot/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/FCKeditot/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

注意<url-pattern>/FCKeditot/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> 多了个/FCKeditot

这个/FCKeditot不是固定的 /FCKeditot指的是刚才导入FCKeditot2.4主体文件的文件夹名称我这里是FCKeditot文件夹

同样的道理<url-pattern>/FCKeditot/editor/filemanager/upload/simpleuploader</url-pattern>也变了吧嘿嘿

再来改<servlet>

要起开上传功能把

中的  <init-param>
   <param-name>enabled</param-name>
   <param-value>false</param-value>
  </init-param>
改为

<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>

一般改成这样就可以了

如果还想扩展就要了解里面属性的作用如下看注释

xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID" version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>FCKeditordisplay-name>

<servlet-name>Connectorservlet-name>

<servlet-class>

com.fredck.FCKeditor.connector.ConnectorServlet

servlet-class>

<init-param>

<param-name>baseDirparam-name>

<param-value>/UserFiles/param-value>

init-param>

<init-param>

<param-name>debugparam-name>

<param-value>trueparam-value>

init-param>

<load-on-startup>1load-on-startup>

servlet>

<servlet-name>SimpleUploaderservlet-name>

<servlet-class>

com.fredck.FCKeditor.uploader.SimpleUploaderServlet

servlet-class>

<init-param>

<param-name>baseDirparam-name>

<param-value>/UserFiles/param-value>

init-param>

<init-param>

<param-name>debugparam-name>

<param-value>trueparam-value>

init-param>

<init-param>

<param-name>enabledparam-name>

<param-value>falseparam-value>

init-param>

<init-param>

<param-name>AllowedExtensionsFileparam-name>

<param-value>param-value>

init-param>

<init-param>

<param-name>DeniedExtensionsFileparam-name>

<param-value>

php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi

param-value>

init-param>

<init-param>

<param-name>AllowedExtensionsImageparam-name>

<param-value>jpg|gif|jpeg|png|bmpparam-value>

init-param>

<init-param>

<param-name>DeniedExtensionsImageparam-name>

<param-value>param-value>

init-param>

<init-param>

<param-name>AllowedExtensionsFlashparam-name>

<param-value>swf|flaparam-value>

init-param>

<init-param>

<param-name>DeniedExtensionsFlashparam-name>

<param-value>param-value>

init-param>

<load-on-startup>1load-on-startup>

servlet>

<servlet-mapping>

<servlet-name>Connectorservlet-name>

<url-pattern>

/editor/filemanager/browser/default/connectors/jsp/connector

url-pattern>

servlet-mapping>

<servlet-mapping>

<servlet-name>SimpleUploaderservlet-name>

<url-pattern>

/editor/filemanager/upload/simpleuploader

url-pattern>

servlet-mapping>

web-app>

好了后台配好了我们就可以在jsp页面中调用了

二调用

调用很简单在要调用的JSP页面中

先把标签定义加上

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

然后在要引用的地方使用这个标签

<FCK:editor id="content" basePath="/TestText/FCKeditor/"
imageBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/TestText/FCKeditor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/TestText/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/TestText/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"
width="80%"
    height="800"
    skinPath="skins/silver/"

>
请你输入内容 :)
</FCK:editor>

basePath属性是路径的意思也就是FCKeditor主体文件夹的路径建议加上工程名字我这里是basePath="/TestText/FCKeditor/"
同样的道理

imageBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/TestText/FCKeditor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/TestText/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/TestText/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"

前面/TestText/FCKeditor/也为FCKeditor主体文件夹的路径你可以copy这段代码到要使用的jsp页面中但是千万记住改文件夹路径如果和我的一样就不用改了说明我们有缘呵呵

常用的属性还有

width="80%"
    height="800"
    skinPath="skins/silver/"

width和 height属性是宽和高这个不要说了

skinPath="skins/silver/"是皮肤如果不加这个属性将使用默认的default皮肤

皮肤有3个存放在FCKeditor/editor/skins文件夹下
1.default 乃黄色的皮肤

2.office2003和微软office2003风格区别不大是浅蓝色的

3.silver亮白色皮肤个人认为这个皮肤不错如图

还有一个属性可以控制功能如果是留言就没有必要给用户这么多功能

我们可以把让toolbarSet="Basic" Basic是官方帮我们预定的简洁定义。如图

注意：如果不加toolbarSet属性则是开放所有功能当然我们也可以自定义功能在下文中我在介绍嘿嘿不要急

当然网上还有其它调用的方法但是我认为这个方法最直接最方便

现在启动服务器就可以看到FCKeditor文本编辑器了

如果报404错误说明配的路径有问题更正路径就可以了如果报500错误先检查标签是否写错代码是否有语法问题如果没有请来找我...一般按我上文所说的操作就不会有问题

看到FCKeditor编辑器了没什么了不起的这个时候它更其他的文本编辑器是一样的功能我们还要进行高级应用这就是FCKeditor编辑器的强大之处

三高级应用

FCKeditor支持上传功能如图：

也可以浏览服务器上的共享文件如图

支持上传flash 视频图片等等当然上文介绍的web.xml配置里面可以设置过滤内容

要实现这一功能必须对FCKeditor/fckconfig.js 文件进行修改

fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。
打开/FCKeditor/fckconfig.js修改 FCKConfig.DefaultLanguage = 'zh-cn' ;把FCKConfig.LinkBrowserURL等的值替换成以下内容：
FCKConfig.LinkBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL
= FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL
= FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

这样上传功能就可以正常的使用了

附加信息：

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

上段代码就是前文说的toolbarSets自定义设置

FCKConfig.ToolbarSets["Default"] 为默认的所有功能我们可以参照把FCKConfig.ToolbarSets["Basic"] ＝['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;数组里的内容改下就可以了

我们也可以自己写个FCKConfig.ToolbarSets["自定义名称"]在调用的时候把 toolbarSet属性设置为toolbarSet＝"自定义名称就可以了"

FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

这是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。

找到： 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' ;
这里要注意一下不能用Eclipse 打开改如果打开改就不能保存了会提示类型不匹配因为我们加了中文这也是为什么前文中说fckconfig.js用记录本打开，修改后将文件存为utf-8 编码格式的原因即使你改过之后用Eclipse打开再改动其他地方也不能保存我试过几次了切记要用记事本。

最后要说的是如果你改变了配置没有看到效果那是因为没有清空IE缓存

关于jsp页面把FCKeditor的值传入form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
    <html:base />

    <title></title>
    <script type="text/javascript">
    function hehe()
    {
      var Content =FCKeditorAPI.GetInstance("content").GetXHTML();

      alert(Content);
      document.forms[0].text.value=Content;
      alert( document.forms[0].text.value);



    }
     function load()
     {
     // FCKeditorAPI.GetInstance("content").SetXHTML(document.forms[0].text.value);
     document.forms[0].content.value=document.forms[0].text.value;
     }

    </script>

</head>

<body οnlοad="load()">
   <html:formaction="/user?sosoone=adduser">
    <html:text property="name"></html:text>
    <html:hidden property="text" />
    <FCK:editor id="content" basePath="/TestText/FCKeditor/"
imageBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/TestText/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/TestText/FCKeditor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/TestText/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/TestText/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"
width="80%"
    height="800"
    skinPath="skins/silver/"

>
请你输入内容 :)
</FCK:editor>
    <html:submit οnclick="hehe();"></html:submit>
    </html:form>
    <%=request.getParameter("content")%>
</body>
</html:html>

注意javascript代码

在提交表单的时候调用hehe()函数

我这个页面和actionform关联起来了

<html:hidden property="text" />
为后台actionform的属性这里用hidden标签

提交的时候把<FCK:editor id="content" basePath="/TestText/FCKeditor/"
content值赋给text

var Content =FCKeditorAPI.GetInstance("content").GetXHTML();
document.forms[0].text.value=Content;

就这两句简单的javascript代码可以实现

加载的时候content要得到后台actionform text属性的值主要用于修改

function load()
     {
        document.forms[0].content.value=document.forms[0].text.value;
     }

调用<body οnlοad="load()">

好了关于FCKeditor控件的使用就介绍到这里其实还有很多功能

可以改到了这个地步了相信对FCKeditor的配置和应用都已经不成问题了至于其他的配置问题只要在这个基础上改fckconfig.js就可以了

终于写完了...

lxt2lili

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FCKeditor在线文本编辑器控件

一部署首先要下载2个文件FCKeditor2.3 (FCKeditot for java)FCKeditor2.4 (FCKeditor基本文件)有最新版2.5版不过是测试版的建议不要用我们又不是帮他测试bug的以下是下载地址：http://www.fckeditor.net/downloadFCKeditor2.3 为java的支持文件，FCKeditor2.4是控件的整体文件，
复制链接

扫一扫