Jquery 与 struts2 fckeditor 的整合

最新推荐文章于 2020-08-29 15:36:44 发布

cd0425

最新推荐文章于 2020-08-29 15:36:44 发布

阅读量2.2k

点赞数

分类专栏： java 文章标签： fckeditor jquery struts extension servlet 工具

本文链接：https://blog.csdn.net/cd0425/article/details/4959935

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近做一个发布新闻的页面，用到了文本编辑器选取了fckeditor 这个开源的。

用的是2.6的fckeditor

fckeditor下载地址 http://www.fckeditor.net/

下载fckeditor 并下载一个java 的demo

把demo里lib 目录下的几个jar 放到你的项目里面lib 目录下

还有一个fckeditor.properties 文件放到 src目录下

把fckeditor 解压放到webroot下面，我用的是myeclipse

然后进行配置

首先在 web.xml加入个 servlet 的配置

     <servlet>
       <servlet-name>Connector</servlet-name>
       <servlet-class> com.fredck.FCKeditor.connector.ConnectorServlet </servlet-class>
       <load-on-startup>1</load-on-startup>
   </servlet>
   <servlet-mapping>
       <servlet-name>Connector</servlet-name>
       <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
   </servlet-mapping>

把对应的struts2 filter改为

<filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>*.action</url-pattern>
        <url-pattern>*.jsp</url-pattern>
    </filter-mapping>

红色的地方要注意不然fckeditor 上传图片的时候会报错

好这时候我就用了taglib方式引用fckeditor

在要应用fckedirot的jsp 页中加入

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

然后对其引用引用方法如下

<FCK:editor instanceName="EditorDefault">
                <jsp:attribute name="value">This is some <strong>sample text
                    </strong>. You are using <a href="http://www.fckeditor.net">
                    FCKeditor</a>.
                </jsp:attribute>
</FCK:editor>

其中 <jsp:attribute name="value">This is some <strong>sample text
                    </strong>. You are using <a href="http://www.fckeditor.net">
                    FCKeditor</a>.
                </jsp:attribute>

是给fckeditor 放初始值的

这个是时候可以正常运行，但发现加jquery后，jquery的代码有些问题。难到不兼容?

在网上看到 jquery有一个fckeditor 的插件 jquery.fckeditor.js

下好，放到项目里

到网找下很多

这个是通个 js 方式还引用 fckeditor

引用的方法如下

      //初始化fckeditor的配置
                $.fck.config = {path: '/shop/fckeditor/', width:700,height: 400 ,toolbar:'Default'};
                $('textarea#prodcutSynopsis').fck();

其中#prodcutSynopsis为页面你所绑定的textArea的id或name

取值

var getcontent = $.fck.content(' prodcutSynopsis' , '' ); //其中 prodcutSynopsis为页面你所绑定的textarea的id或name

这个时候

应该可以正常上传图片到服务器了

通过fckeditor.properties文件可以更改图片存贮的位置

connector.userFilesPath=/img

允许上传的文件类型

connector.resourceType.file.extensions.allowed = avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png
connector.resourceType.flash.extensions.allowed = swf|fla
connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi

不过发现一个问题发现上传的图片不能自动重命名

找了些资料发现在没有什么好的方法最后把

com.fredck.FCKeditor.connector.ConnectorServlet

这个类复制出来

在dopost方法中的

String filename = FilenameUtils.getName(rawName);
String baseName = FilenameUtils.removeExtension(filename);
String extension = FilenameUtils.getExtension(filename);

这几行的下面自已进行重命名

我的写法如下

Random r=new Random();
filename=new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date())+r.nextInt(10)+"."+extension;

或者用UUID的方法

filename=UUID.randomUUID().toString()+"."+extension;

这样就能顺利的进行重命名了

然后把这个类放在你项目里面

把web.xml下的sevlet进行更改

<servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>com.hardy.fckeditor.ConnectorServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
    </servlet-mapping>

红的为你复制类存放的地方

其中还参考了些 fckconfig.js 的配置

如下

FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格
FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS
FCKConfig.DocType = '' ;//文档类型
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"
FCKConfig.Debug = false ;//是否开启调试功能
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径
FCKConfig.PreloadImages=... //预装入的图片
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径
FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言
FCKConfig.DefaultLanguage   = 'zh-cn' ; //默认语言
FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
FCKConfig.IncludeGreekEntities = true ;//包括希腊文
FCKConfig.ProcessNumericEntities = false ;//处理数字实体
FCKConfig.AdditionalNumericEntities = '' ;   //附加的数字实体
FCKConfig.FillEmptyBlocks = true ; //是否填充空块
FCKConfig.FormatSource   = true ; //在切换到代码视图时是否自动格式化代码
FCKConfig.FormatOutput   = true ; //当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = '    ' ; //当在源码格式下缩进代码使用的字符
FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容
FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE
FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体
FCKConfig.TabSpaces   = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格
FCKConfig.ShowBorders = true ;//合并边框
FCKConfig.SourcePopup = false ;//弹出
FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开
FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引
FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出
FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板
FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中输出内容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，可以将空的块级元素用空格来替代
FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码
FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B，I，U标记
FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
FCKConfig.ShowBorders = true/false; // 是否合并边框
FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏”时才出现
FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏
FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | br
FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
FCKConfig.FontColors = ""; // 文字颜色列表
FCKConfig.FontNames = ""; // 字体列表
FCKConfig.FontSizes = ""; // 字号列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置
FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整
FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容