FCKeditor的JSP配置与使用

最新推荐文章于 2024-06-29 16:57:52 发布

shooter118

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量427

点赞数

分类专栏： JAVA 文章标签： fckeditor jsp templates javascript 语言工具

本文链接：https://blog.csdn.net/shooter118/article/details/6326369

版权

JAVA 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一 FCKeditor的下载

先给出FCKeditor的下载页面 http://ckeditor.com/download

下载FCKeditor_2.6.6.zip fckeditor-java-2.6-bin.zip fckeditor-java-demo-2.6.war 这3个文件

分别解压后备用

二将FCKeditor放入Web Project

将fckeditor拷贝,放置在WebRoot下

editor
fckconfig.js
fckeditor.js
fckpackager.xml
fckstyle.js
fcktemplates.xml

以上红色部分为必要项,喜欢用javascript显示就需要用fckeditor.js
导入fckeditor所需要的相关jar包
fckeditor-java-core-2.6.jar
commons-fileupload.jaar
commons-io.jar
imageinfo.jar
slf4j-api.jar
slf4j.jar
在src目录下新建fckeditor.properties配置文件,内容如下

connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
在web.xml文件中配置servlet

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

三 FCKeditor在页面上的使用

在<head>中引入 <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
在body中需要使用fckeditor的地方加入
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath="<%=request.getScheme()+ "://" +request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/fckeditor/"%>";
oFCKeditor.Create();
</script>

四 FCKeditor配置

FCKeditor的相关配置文件都可以在fckconfig.js修改,也可以自定义文件修改.

本文中使用自定配置修改

在WebRoot下新建/js/myfckconfig.js文件,内容如下

//自动检查语言 FCKConfig.AutoDetectLanguage = false ; //默认语言 FCKConfig.DefaultLanguage = 'zh-cn' ; //自定义工具集 FCKConfig.ToolbarSets["Custom"] = [ ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Anchor'], ['Image','Flash','Table','Rule','Smiley'], '/', ['Style','FontFormat','FontName','FontSize'], '/', ['TextColor','BGColor'], ['FitWindow','ShowBlocks'] // No comma for the last row. ] ; //字体 FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //字号 FCKConfig.FontSizes = '8px;10px;11px;12px;13px;14px;16px;18px;20px;22px;24px;26px;28px;36px;48px;72px' ; //回车 FCKConfig.EnterMode = 'br' ; //SHIFT+回车 FCKConfig.ShiftEnterMode = 'p' ; //表情图片路径 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 ;

更改页面

<SCRIPT type="text/javascript">
var oFCKeditor = new FCKeditor('content','100%','400px');
oFCKeditor.BasePath="<%=request.getScheme()+ "://" +request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/fckeditor/"%>";

//指定自定义配置文件路径
oFCKeditor.Config["CustomConfigurationsPath"]="/FCK/js/myfckconfig.js";

//选择工具集
oFCKeditor.ToolbarSet="Custom";
oFCKeditor.Create();
</SCRIPT>